Wrong thumbnail image when using facebook share button

Question

When I click the share button for one of my wordpress posts, a popup window successfully opens. It displays the correct thumbnail image, and the title and summary text are correct as well.

However, when I actually go and look at the share on facebook, the thumbnail is not correct. For some reason facebook always shows the thumbnail for the first share I ever made for every single share I make.

What's weird is the title and summary are always correct, but I just can't get the thumbnail to work properly.

Here is the code I use for my Facebook share buttons:

<a class="facebook" onclick="return !window.open(this.href, 'Facebook', 'width=640,height=300')" href="http://www.facebook.com/sharer.php?s=100&amp;p[title]=This Is The Title Of My Post&amp;p[summary]=This is the summary of my post.&amp;p[url]=http://www.mywebsite.com/individual-wordpress-post/&amp;p[images[0]=http://www.mywebsite.com/images/this-is-my-thumbnail-image.jpg" target="_blank"><img class="size-full wp-image-96 alignleft" alt="shareonfacebook" src="http://www.mywebsite.com/images/this-is-my-facebook-share-button-image.jpg" /></a>

I put this code together after reading the following answers here.

Any ideas why the title and summary are always correct, but the thumbnail is never right? Remember, when I click the share button, the thumbnail is correct in the popup window but not the same when I go and look at the share on facebook.

Thanks for the help I really appreciate it.

Solution 1

Facebook uses the Open Graph protocol to determine what information is displayed when sharing a web page. The problem is more than likely not with your link but with missing Open Graph tags.

To debug the problem, copy/paste the URL you're testing into the Facebook Open Graph Debugger and press the 'Debug' button. The debugger will display the information Faceebook will use when sharing that specific URL.

As an example, the Open Graph tags for the home page of Stackoverflow are:

<meta name="og:type" content="website" />
<meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/[email protected]?v=fde65a5a78c6"/>
<meta name="og:title" content="Stack Overflow" />
<meta name="og:description" content="Q&amp;A for professional and enthusiast programmers" />
<meta name="og:url" content="http://stackoverflow.com/"/>

The output for the Open Graph debugger is shown below.

To resolve your problem, you can:

• Change your Wordpress theme to output the Open Graph tags on each post/page.
• Install a plugin to output the Open Graph tags. Facebook have an official plugin or you can use Wordpress for SEO which will output Open Graph tags and also meta-data tags for Twitter.

Solution 2

To solve this problem you need just to edit your theme header.php and set this code below the tag:

<?php
if ( has_post_thumbnail())
     {
     $fb_image = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'full');
}
?>
<meta property="og:image" content="<?php echo $fb_image[0];?>" />