How to set image, description and title for each facebook like in a Wordpress blog page? [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

How does Facebook Sharer select Images?

开发者_高级运维So I wanted to set a different image, title and description to each post when a user clicks like on that certain post on the main blog page. This is the same way that Mashable and Techcrunch have it. So far I've only been able to find solution that include adding a meta tag on the head section. But the problem is the home page has many posts and each post has a different title, image, etc. So do I do this, anyone has any idea?

---

I'm guessing you'd have to manually set up something like this for each.

http://developers.facebook.com/docs/reference/javascript/FB.ui/

And for each item do something like

<div id="post-id">
    <h2>title</h2>
    <img class="thumb" src="src.jpg">
    <p class="excerpt">the description</p>
    <a class="permalink" href="permalink">Read more</a>
    <a href="#" class="share">
</div>

Jquery

$(".share").click( function(e) {
    e.preventDefault();

    FB.ui(
      {
        method: 'feed',
        name: $(this).parent().child('h2').html(),
        link: $(this).parent().child('.permalink').attr('href'),
        picture: $(this).parent().child('img').html(),
        caption: 'Reference Documentation',
        description: 'Dialogs provide a simple, consistent interface for applications to interface with users.'
      },
      function(response) {
        if (response && response.post_id) {
          alert('Post was published.');
        } else {
          alert('Post was not published.');
        }
      }
    );      
});

Now, this jQuery isn't right (i'm pretty sure), and you'll need to have the Facebook app and all that set up as well. But I'm thinking something of this sort would work pretty well.

Or find a plugin, like addthis.com or the facebook "like" plugin might work if you insert the permalink. http://developers.facebook.com/docs/reference/plugins/like/

---

You can write a function that takes the posts picture, title and description and dynamically inserts that into the Section:

function insert_fb_in_head() 
{

        if (is_singular()) { 
            $image = get_the_post_thumbnail(); 
            $title = get_the_title(); 
            $type = 'article';
        }
        else { 
            $image = 'standard_image.jpg';
            $title = bloginfo('name');
            $type = 'blog';
        }
        echo '<meta property="og:title" content="'.$title.'"/>'; 
        echo '<meta property="og:type" content="'.$type.'"/>';
        echo '<meta property="og:url" content="'.get_permalink().'"/>'; 
        echo '<meta property="og:site_name" content="'.$title.'"/>'; 
        echo '<meta property="og:email" content="yours@example.com"/>';
        echo '<meta property="og:phone_number" content="000 555 888"/>'; 
        echo '<meta property="og:description" content="'.meta_description().'"/>';
        echo '<meta property="og:image" content="' . $image . '"/>'; 
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

...to get the description I just added a 'custom field' in my posts and read it with this function here:

function meta_description() 
{
    $description = "";
    if ( is_single() || is_page() ) 
    {
        $post_id = get_the_ID();
        $description = get_post_meta($post_id, 'description', true);
    } 
    else { $description = get_bloginfo('name')." - ".get_bloginfo('description'); }
    return $description;
}

There may be better ways to define the title, image and description in here, but that gives you an idea how to do it I think. At least I'm quite happy with that way.

PS: Just to clarify, change the variables to your needs and put this in your functions.php file of your template and that's pretty much it. As soon as someone clicks the like button you hopefully inserted already in your blog, the title, image and description will appear on his/her facebook wall!