Facebook sharing option is a good way to present your site and to share its content with people all around the world. Facebook is using its own automated system to grab all important information about link you have shared like title, image and short text related to that link.
|OG debugger tool for facebook crawling site|
However – Sometimes Facebook just can’t grab information needed for sharing to look good. In most cases WordPress site owners having trouble with automated loading images while sharing posts. This could be for many reasons like using some plugin which causing conflicts or just using a WordPress Theme which is not coded by guidelines Facebook has provided in that manner.
If you are ‘lucky’ to read this post – Do steps like I shown under, and make your posts easy to share on Facebook.
First step you can do is to copy link of that post and to visit Facebook Open Graph Debugger tool. There you can paste your link and see what is happening and how exactly Facebook sees your post data. In many cases, because of using plugins and re configuring original WordPress theme, Facebook can’t grab information needed to share properly – and wee see that like Image is missing.
To make your posts easy to ‘read’ – Meta Tag & <meta property=”og:locale” content=”en_US” /> – make these slight changes into your header.php file.
|Add this code to your header.php file|
Open Your WordPress site Dashboard and navigate to Appearance > Editor. On the right side find file called header.php and click on it. Now you have edit that file and you can see codes like on the picture above.
Code you see on that picture is helping Facebook grabber to grab my post content properly and to show all relevant data for that link.
Code should be placed inside header.php file before <?php wp_head(); ?> line of code. Before doing any changes be careful and make a backup copy of your original header.php file.
Here is code you need for Facebook meta property – just copy it to your header.php file and see how it works. In case your WordPress theme using other function names for og:title, og:url and og:image just rewrite these small parts of code to make it work on your site.
<?php if( is_single() ) : ?>
<meta property='og:title' content='<?php the_title(); ?>' />
<meta property='og:url' content='<?php the_permalink(); ?>' />
<meta property='og:image' content='<?php $image_id = get_post_thumbnail_id();
$image_url = wp_get_attachment_image_src($image_id,'large', true);
echo $image_url; ?> ' />
<?php endif; ?>
Hope this code will help you to share your posts easily without broken images on your wall.