How To Insert Custom Image Thumbnail on Facebook Link Sharing

If you want to have a custom image showing besides the link shared on Facebook, you can do it by adding a simple piece of code in your page’s header section. Facebook link sharing is one of the best way to spread your links on most powerful social community platform. You should be careful while sharing links on Facebook as that link may become a branding initiative from your side. In that case, that link should appear perfectly on other’s home page as well.

Whenever we share a link on Facebook, it actually try to retrieve some images from that particular page and show you the option to choose an image as thumbnail or select “No thumbnail”. What if the options shown by the Facebook link sharing tool is not having the proper image thumbnail? In that case you can apply the changes below to have the custom image thumbnail besides the link on Facebook.

You may also like: How To Add Blog Feed On Facebook To Share Latest Post Over There

According to the Facebook Share Documentation, Facebook takes the image provided with tag rel=”image_src” in the header section that will definitely considered in the thumbnail options on link sharing. For example, if you want to have your blog’s logo in link shared as your homepage’s URL then add the below mentioned piece of code to have logo as thumbnail in Facebook,

I added below piece of code in HEAD section of my blog i.e. header.php below wp_head,


Now I am getting an options as my blog’s logo on any link shared on Facebook. I tried to share a post from my blog to facebook using Sexybookmark plugin, See the output as below:

Thumbnail on facebook Share

Please note that the piece of code is working properly in IE8 but still there is some issue with Firefox and Chrome browser. I tried on IE 8 and it worked fine for me.

Related: Embed HTML Code On Facebook Profile To Spread Your Social And Blog Links

Sanjeev Mishra is a professional blogger and an Internet Marketing Consultant based in India. He has built the Internet Techies to provide you updates in technology and web application area.

20 Comments

  1. Quantum

    November 2, 2009 at 11:00 pm

    Awesome, a new post about this. I just searched over 20 sites and couldn’t find the solution to my problem.

    I’ve figured out this line of code, now I have another question. I am posting news posts and I’m using facebook fan page to do so. Now when I post a new post, it’s always the same logo that comes up over and over. How can I get it to use that picture (logo) or one of the images from the news article?

    Thanks in advance.

  2. Claud Williams

    February 2, 2010 at 10:14 am

    Thanks, this helped alot

  3. Mike

    February 12, 2010 at 5:03 pm

    Marvellous solution! Thank you so much for sharing.

  4. Guto

    March 2, 2010 at 6:16 pm

    I have the exact same problem told by Quantum. How can I use the image from the post, not the blog logo? Do we have to add some code at the image?

    Best,

  5. Lara Jane | Ultimate Lifestyle Project

    March 23, 2010 at 2:55 am

    It’s weird, sometimes Facebook gives me the option of displaying the thumbnail, or not, and other times it will only post the link as is with no image. Frustrating!

  6. Michael

    April 14, 2010 at 5:22 pm

    This didnt work for me. This is so frustrating. It still grabs a image from the sidebar. Also when I put in the share button for post, it doesnt grab the content. urghh!

  7. Suede

    May 19, 2010 at 6:19 pm

    This DOES NOT WORK at all

  8. Mike

    June 1, 2010 at 10:50 pm

    It doesn’t say so on the Facebook doc page for this feature, but you also need to make sure you are setting meta tags for title and description – those are required for the image_src to get picked up and used.

  9. Dave

    June 6, 2010 at 2:02 am

    great, works fine in Firefox for me.

    But the thing is, I would like if facebook would actually take the picture from the blog-post instead of the logo from the blog. Any idea how I have to code my images in my article?

  10. Jane

    July 14, 2010 at 6:32 pm

    Hi there.
    My thumbnails to links to posts on my blog were working fine and then one day (and this has happened before, it just fixed itself somehow) when I tried to post a link, it stopped scanning for thumbnails…or maybe it scanned and couldn’t find. Do you know what potentially could be the problem. Is it some change that I made that caused this? Any info you could provide would be most helpful…it’s annoying the crap out of me.

  11. pavan

    August 2, 2010 at 12:04 pm

    I tried above code to displaying the thumbnail image,but it is not dispalyin any thumbnail image to share.please give some suggestions.
    Thanks in advance.

  12. Tejaswini

    August 10, 2010 at 7:54 pm

    Please refer this post on SWS, there are some new changes in the code. This works, I have tried that myself.

  13. samual

    December 15, 2010 at 7:24 am

    Nice comment J
    you could try http://www.fbmarketingbooth.com if you want more facebook fans. I’ve tried them and they do response fast… true reward

  14. Jane

    December 16, 2010 at 6:07 am

    I figured it out! If u want to have fb scan ur blogpost for thumbnails, copy the link and leave out the last part of the link (/#content). I did this and it was back to normal and was scanning the blogpost for thumbnail images.

  15. Dave

    December 16, 2010 at 3:06 pm

    Strange, I didn’t change anything, but now, Facebook recognizes my pics in my post.

  16. Brian

    March 3, 2011 at 6:46 am

    My problem, for wordpress, is that it picks up images from within a page but not from within a post!

  17. Events

    March 4, 2011 at 5:31 pm

    It did not work for me,I don’t know what is the problem?

  18. Raviraj Deora

    March 15, 2011 at 5:29 pm

    Thanks, works perfectly for me.

  19. Rohan

    July 2, 2012 at 6:41 pm

    how to post content image and if content image not found send logo in fb share

  20. Elle Hoxton_FM

    August 23, 2012 at 7:29 pm

    hi, where is this header section in tumblr?? thanks

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>