5

Displaying correct post thumbnail on facebook share

Facebook share allows you to define certain portions of page preview. You can define them using the following tags:
[html]<meta name="title" content="title" />
<meta name="description" content="description " />
<link rel="image_src" href="thumbnail_image" />[/html]
Here i will show you how to implement a post thumbnail meta in order to show the right image in the post preview.

Those tags go to header.php which defines your page’s styles and meta informations.

  1. Open the header.php
  2. Paste the following code before <?php wp_head(); ?>
    [php]global $wp_query;
    $thePostID = $wp_query->post->ID;
    if( has_post_thumbnail( $thePostID )){
    $thumb_id = get_post_thumbnail_id( $thePostID );
    $image = wp_get_attachment_image_src( $thumb_id );
    echo "<link rel=\"image_src\" href=\"".$image[0]."\" / >";
    }[/php]
    (Don’t forget to wrap it up with <?php and ?> if it doesn’t exist.)
  3. Save and upload the file to your theme directory. Voila!

You can also use my Facebook Meta Tags for WordPress plugin. It automatically inserts related tags to your site.
Don’t forget to put a facebook share button to your site. You can get one here.
You can read more about facebook meta tags here.

Cheers!

5 Comments

  1. Irene Shih :

    this is very useful!thank you~~~

  2. marvzz :

    if i have multiple image in a webpage, how can I force the Sharer to use only one thumbnail, meaning, there will be no option to select other thumbnails?

    • Facebook looks for other images in your page and allows users to use them too.
      One trick would be using other images as background in your CSS file.
      Facebook doesn’t use css files while searching images.

      • marvzz :

        Thanks for your reply, but that would seem impractical for our usage as we are using animated gifs on some of our images.

        Thanks anyway :) i’m looking into using the stream.publish

One Trackback

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*