2

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.

Community
  • 1
  • 1
user3117509
  • 833
  • 3
  • 14
  • 32

2 Answers2

10

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/apple-touch-icon@2.png?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.

Stackoverflow Open Graph Debug Output

To resolve your problem, you can:

Jonathan
  • 178
  • 2
  • 9
  • Thank you. Your answer was a big help. I installed the official facebook plugin but I am still having 2 issues. The first, is that some of my facebook shares are including the date the wordpress post was made like this "Feb122014" so I went and looked at the facebook debugger results but "Feb122014" is nowhere in the results. Any idea how to get rid of that, or why it shows up on some shares but not others? – user3117509 Feb 12 '14 at 06:28
  • The 2nd problem is I get this error in the debugger "fb:admins and fb:app_id tags are missing. These tags are necessary for Facebook to render a News Feed story that generates a high click-through rate." I registered to be a facebook developer so I could get an app id, it says I register, and then it takes me nowhere. If I click again on the "Apps" dropdown it just gives me the option to register as a developer again. Is the app id really necessary? And any idea what to put for the fb:admin? – user3117509 Feb 12 '14 at 06:30
  • I think both issues are related to the Facebook plugin. I'd actually suggest using my second suggestion unless you need full integration with Facebook. You will probably need to create a Facebook application ID. Have a look at my second suggestion, it may resolve everything - [http://wordpress.org/plugins/wordpress-seo/](http://wordpress.org/plugins/wordpress-seo/) – Jonathan Feb 12 '14 at 07:35
  • Thank you! The official facebook plugin was pure crap. You'd think a billion dollar company could create a wordpress plugin. I installed the yoast plugin and not only is everything perfect now but it even lets you customize the share description on a post by post basis! Seriously thank you i was ready to jump in front of a bus. – user3117509 Feb 12 '14 at 07:47
  • I also have this problem. I have open graph metas on my page, and facebook debugger is showing another image. I get totally rid of image link that is showing on facebook debugger from my page, and facebook debugger is choosing another image but not my post image. http://tinerii.md/2016/02/08/impresii-de-la-deschiderea-team/ I still think that is a facebook problem, and does not have nothing to do with wordpress. Does someone fixed this problem? – iamandrewluca Feb 10 '16 at 06:13
1

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];?>" />
Brane
  • 3,257
  • 2
  • 42
  • 53