While it might not seem like a big issue, managing to avoid a thumbnail issue (thumbnails not showing) when clicking on a Facebook share link can be a little tricky. Just so we’re on the same page, below is an example of what a shared post with a working thumbnail looks like and what one without a thumbnail looks like. It’s pretty clear which one draws the eye more. The better you can draw eyes to your post, the more likely it is people are going to take the action you want them to.
One way to solve this is via a header.php script, however there are some solutions that don’t require this tweak.
What you need to realize is that Facebook doesn’t always know how to link a post and a thumbnail, as their script is not the best out there. Therefore, on some page loads the image tags and the image displayed are not the same. The other problem is that the script can be busy at times, which means that the image you might end up with might be one other than the one you’re looking for.
Facebook itself realizes the issue and a quick fix they recommend is the use of a meta tag. The code can solve the issue for most instances.
However, because WP is a dynamic platform, to make it work one needs to do an extra tweak in the form of the WP Post Thumbnail, which is going to aid communications between Facebook and your website.
Editing functions.php
The following code will aid Facebook in better communicating with your blog:
function insert_image_src_rel_in_head() {
global $post;
if ( !is_singular()) //if it is not a post or a page
return;
if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
$default_image="http://yourblog.com/image.jpg"; //replace this with a default image on your server or an image in your media library
echo '';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '';
}
echo "
";
}
add_action( 'wp_head', 'insert_image_src_rel_in_head', 5 );
What it does is add a meta tag to a single post page, the one that includes the thumbnail URL. You want to change the http://yourblog.com/image.jpg with the URL that you’re actually using.
A simpler way to get the fix is via the Add image_src Meta Tag plugin, which automates the process and accomplishes the same function as the code above.