Correctly implementing the Facebook Like button

Question

As per documentation I satisfied all the requirements of the like button by using the meta-tags, however I still don't get the image I would like linked by Facebook: it always goes fishing for another image in the sidebar.

Now, of course I could solve this by being explicit about which image I really want but I do I get that image from Wordpress? Is there a function like post_image() that would print its URL like there is for the permalink?

Thanks

Answer 1

Yoast.com actually covered this quite recently...

if (  is_singular() ) {
  global $post;
  if ( current_theme_supports('post-thumbnails') 
      && has_post_thumbnail( $post->ID ) ) {
    $thumbnail = wp_get_attachment_image_src( 
      get_post_thumbnail_id( $post->ID ), 'thumbnail', false);
    echo '<meta property="og:image" 
      content="'.$thumbnail[0].'" />';  
  }
  echo '<meta property="og:title" 
    content="'.get_the_title().'" />';
  if ( get_the_excerpt() != '' )
    echo '<meta property="og:description" 
      content="'.strip_tags( get_the_excerpt() ).'" />';
}

Explanation and more details are here: http://yoast.com/facebook-share-wordpress/

Answer 2

Here's a code sample from a recent project. This sets the OpenGraph properties for a specific post. Add the code to the header.

<?php if (is_single()) { // Display only on single posts ?>
<?php $thumbnail_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID)); 
// Optionally, use the code below (untested) to get a thumbnail based on a specific thumbnail size
// $thumbnail_url = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'custom-thumbnail-name'); 
?>
<meta property="og:title" content="<?php echo get_the_title($post->ID); ?>" />
<meta property="og:url" content="<?php echo get_permalink($post->ID); ?>" />
<meta property="og:image" content="<?php echo $thumbnail_url[0]; ?>" />
<meta property="og:site_name" content="Website Name" />
<meta property="og:type" content="article" />
<meta property="fb:admins" content="732866210" />
<?php } ?>

Answer 3

I've used FB OpenGraph meta tags (as Jonathan wrote) on one of my websites, and it works, but not always. Sometimes, the thumbnail still is another image on the site. Then I found the link tag that is working for me:

<link rel="image_src" href="http://www.example.com/images/image.jpg" />

I'm using both methods now (link and meta tags), and the thumbnail shown on FB is always correct!

After implement any methods, you should use this tool to check it out. If should show correct title, description and thumbnail.

This is another topic you might interested in.