Share Page On Facebook With Thumbnail Featured Image
Posted by in Tips And Tricks March 31, 2011 5 Comments

When you share your page with Facebook Like Button or http://www.facebook.com/share.php?u=url, Facebook will automatically parse your Title, Description meta tag and try to find an image to assign it as the preview thumbnail for the sharing.

But sometime the image which you would like to share is not chosen. In order to make sure your favorite image is always correctly populated you should add a tag as below somewhere in your HTML code:

<link rel=”image_src” href=”your_feature_image_url” />

Where as:

+ image_src: it’s convention of Facebook

+ your_feature_image_url: your full url of the featured image. You don’t need to worry about resizing, Facebook will take care for you.

If you’re using WordPress, I will share with you how I control the featured image which will show on your wall story when you click Like Button on every my post.

Facebook Like Button Preview

Facebook Like Button Preview

First, please this tutorial: http://4rapiddev.com/tips-and-tricks/add-and-get-custom-field-in-wordpress/ to know how to config your featured image by adding and getting a custom field.

Second, for every post which contains some image, you just assign a image url you like best to the value of the custom field named featured_image. For example, I intend to use this image: http://4rapiddev.com/wp-content/uploads/2011/03/Faebook-Custom-Featured-Image-Preview.jpg as the thumbnail image on Facebook as follow:

Wordpress Set Custome Field Featured Image

Wordpress Set Custome Field Featured Image

Before I do the trick, all thumbnail on Facebook for each share on the Wall are not really perfect, all of them are just a Google icon. I love Google but in this case, it’s really not my expectation :)

Facebook Default Featured Image

Facebook Default Featured Image

Now it’s better :)

Faebook Custom Featured Image Preview

Faebook Custom Featured Image Preview

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at hoan@4rapiddev.com
  • http://marekcernak.com Marek

    and what about drupal in node-xxx.tpl.php included?? is there any solution for sending thumbnail from pages, not from site at all? thanks for solution

  • http://www.phonesexhoneys.co.uk live chat line uk

    Could you please give us some information on Drupal in noce-xxx.php

  • http://marekcernak.com Marek

    just looking for solution of facebook thumbnail sent from drupal node file

    • hoanhuynh

      Sorry Marek, I don’t have any solution for Drupal at the moment. However, you could add this line somewhere in your template:

      <link rel=”image_src” href=”your_feature_image_url” />

      & replace the your_feature_image_url with your full image url.

      Hope it helps.

  • Ajaykumar

    Sir,
    I WANT TO SHARE MY FACEBOOK FAN PAGE ON FACEBOOK ITSELF.I WANT TO CHANGE HE THUMBNAIL IMAGE WITH AN ANIMATED ONE., 
    HERE IS A PAGE WHICH SHARES THEIR PAGE WITH ANIMATED IMAGE.,http://www.facebook.com/nsjTN AS YOU CAN SEE FROM THIS PAGE ., ON THEIR WALL POST., THE THUMBNAIL IMAGES ARE ANIMATED., HOW CAN I SHARE MY PAGE WITH A CUSTOM IMAGE.??ANY IDEA IN THAT.? 
    PLEASE MAIL ME …
    ajaykmr009@gmail:disqus .com
    IT WILL BE MORE HELPFUL