03.03.2011 in Home > Internet > Facebook by Namit Gupta

Solution to Facebook Like Button Thumbnail Problem

Facebook like button now works similar to the Facebook share button. Whenever someone hits the Facebook Like button on any webpage the activity update is now shown up in Facebook profile in the same manner (see the below image) as Facebook share button update. The share button allows to manually choose the thumbnail image before posting the shared link to the Facebook profile. But Like button has no such option. It randomly pics up any image from the current web page and displays it as the thumbnail.

facebook activity update

To correct this issue you could use a simple code to define a particular image as the thumbnail image. So the link button will only display that image as the activity update thumbnail.

Put the following line of code to the header section of your website. Replace the example image url with your website/company logo url.

<link rel="image_src" href="http://example.com/logo.png" />

For WordPress Users

If you would like to use a particular image for your whole website you could use the code I just mentioned above. But if you want to display a related image with each individual page of your blog you can go for any one of the method below:

• Install the Facebook Like Thumbnail WordPress plugin which automatically picks up the first image from the post and defines it as the thumbnail image for the like button.

• Another way is to manual add a code snippet to get the desired results. This method is for the people who did not like to increase the plugin count of their WordPress installation.

Copy and paste the following code snippet in your theme’s function.php file:

/**
* Function which sets the first image of the post as the thumbnail which shows up on FB like and share - http://blog.ashfame.com/?p=888
*/
add_action( 'wp_head', 'fb_like_thumbnails' );
function fb_like_thumbnails()
{
global $posts;
$default = 'http://blog.ashfame.com/wp-content/themes/ashfameblog/images/ashfame-logo.png';
$content = $posts[0]->post_content; // $posts is an array, fetch the first element
$output = preg_match_all( '/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $content, $matches);
if ( $output > 0 )
$thumb = $matches[1][0];
else
$thumb = $default;
echo "\n\n<!-- Facebook Like Thumbnail -->\n<link rel=\"image_src\" href=\"$thumb\" />\n<!-- End Facebook Like Thumbnail -->\n\n";
}
[Source]

Note:

  1. Properly ensure that you paste the code between php and ?> php tags.
  2. Replace the default image url ($default=’ //Default Image URL ‘;) with any image url you would like to display in-case there is no image on the webpage.
  3. Facebook scrapes page every 24 hours, so the results may not display immediately. Although you can use the Facebook url linter to get your page scraped immediately.

Do let us know your queries in the comments!

  • http://www.niharsworld.com/ Nihar

    Great find.

    Thanks for this. I will add the above snippet in functions.php

    • http://theitechblog.com/ Namit Gupta

      Greatly recommended! Facebook like button now can bring a good number of visitors to your site. Its proper styling will prove beneficial. :-)

  • http://blog.ashfame.com Ashfame

    The snippet is incorrect here, missing code.

    • http://theitechblog.com/ Namit Gupta

      Corrected! Thanks for pointing out. :-)

  • Barry

    Hi, I have tried to use the image_src and it does not work, I get no image at all. I have read that it is no longer supported? but just found your post here which is very recent. I know that they are using the open graph protocol. Could you elaborate?

    • http://theitechblog.com/ Namit Gupta

      Open graph protocol does not support the ‘image_src’ tag. Check out http://developers.facebook.com/docs/reference/plugins/like/ for more info on open graph protocol.

      This article is for the simple like button which now functions similar to that of ‘facebook share’ button and shares the page headline, blurb and thumbnail on to your Facebook profile wall. The ‘image_src’ tag is for that thumbnail.

      Also note that Facebook scrapes your page every 24 hours, so the results may not display immediately. Although you can use the “Facebook url linter” http://developers.facebook.com/tools/lint/ to get your page scraped immediately.

  • Barry

    Hi Namit, Thanks for the clarification… I understand that the open graph is a completely sepearte entity altogether.

    I have been to the url linter and can see the image that is being used here, but still at the moment when I like the post, it is not showing the image as I expect, it has not been 24 hours yet, so I should be patient.

    Thanks

    • http://theitechblog.com/ Namit Gupta

      You are using open graph tags in your website. “image_src” wont work with them. use the following code instead.

      <meta property="og:image" content="tag value"/>

      replace “tag value” with URL to an image you would like to be display on hitting the like button.

  • http://www.bellingham.org Sommer C.

    I used the snippet in my functions.php and changed the URL to my image of choice for the default, but it still doesn’t work. I just get a random image from my header graphic – same as I got before using the code. Ideas?

    • http://theitechblog.com/ Namit Gupta

      You have done it correct. But the Facebook scrapes pages every 24 hours, so the results may not display immediately. Although you can use the “Facebook url linter” http://developers.facebook.com/tools/lint/ to get your page scraped immediately.

      • http://www.bellingham.org Sommer C.

        That’s what it was – I needed to wait 24 hours for it to pick up my changes. Thanks!!

      • Felipe Brandão

        Hi, Im from brazil, so, sry about my english. About this thing u said, I typed my url on that tool and I got the following:

        Inferred Property The og:url property should be explicitly provided, even if a value can be inferred from other tags. Same with Title, image and locale.

        How can I fix that? Thanks!

  • http://sputznik.com Samuel Thomas

    Interesting.. let me try it out..

  • http://www.happinessplunge.com HappinessPlunge

    Great article and advice. Just thought I’d share that if there is a problem, when the URL Linter is run it’ll try to pick up the default image. If the link is broken then you have a problem. Just see where the link is pointing to. I did that and I found exactly what path and what file name it was looking for. I FTP’d into my account, put my picture there, and voila, problem solved. Hope that helps someone!

  • http://www.myheartpoetry.com/ Kimberly

    I would like to thank you so much for creating a fix for a problem that is frustrating many people with the Thesis theme. I have had issues with this for over a month now. Your wit is deeply appreciated.

  • Jemma Jones

    I don’t understand where I insert this code?

    Do I replace example.com with my own web site and logo.png with another image such as example.gif?

    • http://theitechblog.com/ Namit Gupta

      If you are talking about the following single line code:

      <link rel="image_src" href="http://example.com/logo.png" />

      Put it anywhere in the head section of your website. And replace the ‘example.com/logo.png’ with the image url you would like to show as the thumbnail.

  • Brad

    awesome, man! I’ve been looking all over for this solution. Thanks, very much.

    • http://theitechblog.com/ Namit Gupta

      You’re welcome Brad. :-)

  • Stanislav Yakubenko

    Really great Tip. Really helped me

  • Driezzie

    Hi,

    Thx for the tip ! The image thumbnail works fine ! when clicking the url linter I noticed that I head some text in my description that’s part of my design/info. Is there any way to get rid of that description text or to change it / leave empty ? I just wanna show the title of the wordpress article when people like it.

    cheers

  • ishan

    its not work for me. im using php smarty for my web development. please if you guys have any solution for that please let me know thanks

  • http://plmedia.net Paul L

    Hi – Does anyone know how to fix this issue if using a Moonfruit built website?

  • http://www.porumbei.ro porumbei

    Thank you, the no-plugin solution is what I was looking for. Using a ton of plugins is totally wrong, I try to keep them to a zero count. :)

  • http://apps.facebook.com/ Biswa

    Hi Namit,
    I used the meta tags

    og:image content type="{$fburl}"

    in between head tags for fb:like to publish the image on the FB wall .I m also using smarty to use the “tag value” dynamically.The problem is sometimes i m able to see the images of some items and sometime not .I have also used URL lint. it shows correct image…but still im nt able see the images continuously.plz help me

  • John

    How will you implement this in a Thesis theme site?

    • http://theitechblog.com/ Namit Gupta

      Same procedure is applicable to Thesis as well. You can also go for the WordPress plugin if you are finding it difficult to add the code manually.

  • http://www.successfulmanifestations-store.com Nicole

    Hi Namit,

    Thanks for this great post! I have visted many on this topic, but none that was so clear and helpful as this.

    However, unfortunately Facebook still seems to pick another image from my site, instead of my logo.

    All the meta tags are correct and in the correct place on my website, including the correct image url. I have used the open graph tag directly from Facebook.

    However on “Facebook url linter” the other image (which I do not want) appears and looking at ‘data source’ it shows the wrong url (the url of the image I do not want)

    I have reset it many times, waited for well over 24 hours, but still no luck.

    To ‘Happiness Plunge': you made a suggestion, but I don’t understand what you mean: “If the link is broken then you have a problem. Just see where the link is pointing to. I did that and I found exactly what path and what file name it was looking for. I FTP’d into my account, put my picture there, and voila, problem solved.”

    Can you elaborate on that: a broken link and ‘FTP’d? What exactly is a broken link and FTP?

    Thanks Namit, I hope you can help me :-)

    • http://theitechblog.com/ Namit Gupta

      Hello Nicole,

      You are using Open Graph Tags on your website. And they are appearing twice at the head and footer. Are you using any plugin for that?

      First of all you need to remove the footer tags. And secondly edit the ‘og:image’ tag value in the ‘Head’ section of your website. Change its current url to the logo image url. And everything will be ok.

      Feel free to let me know if you have further queries.

      • http://www.successfulmanifestations-store.com Nicole

        Hi Namit, thanks for your reply.

        I am confused now :-) I am looking at the HTML code of my website (inside the website editor) and I do not have any meta tags (open graph tags) at the footer. Only at the head where I placed the tags in the first place. Am I missing something?

        And the correct image url (that of my logo) is already in place in the head section.

        Would it be helpful if I send you the HTML as I have it now?

        Cheers.

  • http://www.successfulmanifestations-store.com Nicole

    Hi Namit, I see what you mean with the two tags when looking at the ‘view page source’. This is what is so confusing: this is exactly NOT what I have when I am looking at the HTML code INSIDE my webeditor it only shows 1 tag (head) with the correct image url.

    Why would this be and how can I correct this?

    • http://theitechblog.com/ Namit Gupta

      That could be because of any plugin or your theme’s functionality. Checkout all the plugins you have installed. And also your theme’s options. Also Checkout the following image to get more clear idea about what I was referring to earlier. http://i56.tinypic.com/2cg25jd.jpg.

      • http://www.successfulmanifestations-store.com Nicole

        Many thanks for the link Namit. I understood what you were saying.
        I can not for the life of me think what it is- as I said before, INSIDE the webeditor it only shows the one (and CORRECT) meta tags with the correct image url in the head. There is nothing in the footer- despite what ‘view page source’ shows! I don’t have ‘themes’ (that I am aware of) My site is with Weebly, not WordPress. And any other plugins I am not aware of- I do not see any in my HTML coding.
        Any suggestions?

  • Anand Jadhav

    Hello Namit, I have the issue mentioned your post and was hoping your solution is ideal.
    However, I am using google sites and it does not allow editing the Header HTML.
    Placing this “img_src” code anywhere else gives “html error’s” on google sites…can you please help?
    thanks!

    • http://theitechblog.com/ Namit Gupta

      “img_src” need to be placed in the Head section only. And as far as I know Google Sites does not support editing head section html. So sorry, nothing can be done in your case.

      • Anand Jadhav

        Thanks for the response Namit. Mera kuch nahi go sakta with google sites :)

  • http://romacontact.ru roma

    thanx a lot!

  • SERGI

    Thanks a lot! It help me very much to know that “Facebook scrapes page every 24 hours”…. i was nearly to kill me!! because nothing that i tested run… So, now i will wait for 24 hours.

    Thanks!
    SERGI

  • Robson

    Salvou a minha pele (you saved my skin)!

  • Brandt

    What if I want this to only happen on one WordPress page? For example, we have a page on a site where users can click ‘Like’ and the first thumbnail on the page appears on Facebook like it should. But when the admins of the site try to paste a URL into the Facebook status window, they are now unable to choose anything except for the logo (default thumbnail).

    Thanks!

    • http://theitechblog.com/ Namit Gupta

      @Brandt for that you’ll have to bind the above mentioned code withing WordPress conditional tags, to make it appear only on that particular page.

      And you will not get the option to choose other image while sharing links on Facebook, if you have already specified which image to display as thumbnail.

  • http://www.twenty19.com Kamalesh

    Hi Namit,

    Thanks for this post. It was really helpful.

    Just one thing. In some of my pages, FB picks up the og:image tag. In others, it is picking up the img_src tag only. I have added both the tags in all pages. Not sure if this is the correct way, but it works!

    Thanks!

  • Robert Paragasam

    Thank you for this buddy! I was really looking for a solution, and found it here. Thank you!

  • http://blog.woodylabs.com Woody

    This fixed my thumbnail issue, cheers dude:

    For people with the zero like issue I have a blogpost/fix @ http://blog.woodylabs.com/2011/08/facebook-like-button-not-working-or-showing-0-likes/ if that’s of any use :)

    Cheers

    Woody

  • Kalith

    Hi!
    I have an weebly website but the thumbnail does not work on facebook when i share it. pls help me! thnx!

    • http://theitechblog.com/ Namit Gupta

      @Kalith I suppose Weebly does not allow its users to add custom code to header. In that case where no thumbnail image is pre-assigned, facebook picks up the first image of the post.

  • http://www.terminatorfiles.com TerminatorFiles

    Thanx for the great solutions to an ever-persisting problem!

    I always try to validate coding in XHTML1 Strict and this totally passes the checks! For some reason I could not get og:image working, and Faceboook still choose random images.

    Your solution seems to work with lots of posts I made. Thanx! This means a lot to me!

  • Sam

    hey

    I need to fix this problem. I changed all the meta tags and added and but it’s again the same issue.

    When I went through the URL linter, it’s still showing the old information.

    Wat am I doing wrong.?? HELPPPP…

    • Anil

      My URL Linter shows the new image…

      But when I click “like” new image doesn’t show up on the NEWS FEED.
      It still shows random image.

      Any suggestions.

      Thanks.!!

    • http://theitechblog.com/ Namit Gupta

      @Sam @Anil You must have done some mistake while placing the code, go though it once again properly. And also ensure that you are not using both, Open Graph and image_src tags together.

      • Anil

        That worked Namit.. Thanks a lottt…

  • varblane

    hi! i need help. i want that like button chooses thumb only from biggest size image.
    example, i have in page one big image, that is main, and others smaller thumb. how can i set this meta. here is i cant set spesified url.

  • kaWa

    Thank a lot !!!

  • jorge nueve

    Hi, when a video and image in the post does not show the image thumbnail, here’s a image example http://i.imgur.com/lYzie.jpg

    any solution?, thanks

  • http://nuteez.com Hari

    Hi Namit,

    Thanks a lot! Your post has saved me a lot of time..

  • http://eduardomenendez.net Eduardo

    hi Namit, really useful snippet of code.. I have been encountering this problem with the facebook like button for a while without getting a faster and easy solution as you have nailed out here. Much appreciated!

  • http://wordpressnotes.blogspot.com Wordpressnotes

    Searched many websites for the solution every one is saying to add the link tag in the header but none is clear like adding function to functions.php that will automatically grab the image and assign as thumbnail to facebook.
    Thanks For sharing

  • saumil

    Hi nimit,
    i have used your solution but still the issue is coming.
    i have used this method,

    but i am using smarty in my project so where should i keep this line of codes
    as header and product is different page.
    please help

  • saumil

    What About Prestashop??
    FAcebook still fetching wrong image for the product i liked?
    further i put meta tag also but no help still problm is there

  • http://www.infohiway.net/ Marvs

    Hi Namit, I’m having issues with my Like button, ever since I added the code to show AdSense below each post title, everytime somebody clicks on Like it shows the AdSense code as the snippet instead of the usual first part of the post body. How do I correct it?

    Thanks!

    • http://theitechblog.com/ Namit Gupta

      You must have added the Adsense code inside the post content. Add that Adsense code to the single.php template file of your theme and your problem will be solved. Cheers.

      • http://www.coolbloggertemplate.com/ Marvs

        looks like I found the solution. Thanks again!

  • http://www.retailtrader.net David

    Great post! You just saved my life with this. I was dying when I saw facebook was picking up an affiliate banner as my like graphic. LOL Now I can rest easy as the like button’s getting hit. :-)

    David John Hall

  • http://www.zasklem.cz dusan

    Hello Namit,
    I don’t know the correct place in functions.php to put the code.
    Thank you.

    • http://theitechblog.com/ Namit Gupta

      If you are finding it difficult to insert the code, I would recommend you to use the plugin which I have mentioned in the article. here’s the link – http://wordpress.org/extend/plugins/facebook-like-thumbnail/

      • http://www.zasklem.cz dusan

        Namit, thank you for your answer. But this plugin doesn’t work for me. I don’t know why. I’ve tried to install the plugin and it’s done well, the plugin is installed and activated. But I can’t see the like icon, nor any other facebook link.

        • http://theitechblog.com/ Namit Gupta

          This plugin only sets the thumbnail for the like button. You need to add the like button yourself to your site. Either use any of the numerous plugins available for the same or add the button code manually. refer to this page http://developers.facebook.com/docs/reference/plugins/like/

          • http://www.zasklem.cz dusan

            Thank you, it works now :)

  • http://bestdemotivationalposters.com Jessy

    Is this post updated? Is your code works with XFBML?

  • Jey

    Adding your code give me this error.

    syntax error, unexpected T_STRING in /home/content/29/8539329/html/wp-content/themes/SwiftBasic-v0.0.1/functions.php on line 84

  • Gunaseelan

    using facebook share button, i shared same document for many times to my friends wall. the image and content selected randomly by facebook. (it shows in newsfeed)
    how to solve this issue?
    can i give the custom image and content?

  • Whitney

    Okay. I used the debugger (http://developers.facebook.com/tools/lint/ ) and saw that it is using the correct image but do i still have to wait 24 hours before I can see it correctly utilized when I use the like button on my page?

    • http://theitechblog.com/ Namit Gupta

      No, you don’t have to wait if you already have used the lint tool. Like button will use the same image as shown by the lint tool.

  • Saad

    I am using FACEBOOK SOCIAL PLUGIN which is given by facebook while creating page of my website. While my site was under construction, I tested the LIKE functionality. Facebook picked up raw data from that page and displayed in my status…… After that, I changed the page data and modified page title and content as well. However, if this page is now LIKED by someone or referred in facebook by entering URL, somehow facebook still shows old data and URL. I have tried a lot of things, but somehow it is not getting updated to latest data on the page. Please help!

  • http://www.kevintrinh.com/ kt

    great.. that worked… now how do we add/modify the text description that appears in facebook?

  • KT

    if you have a code for wordpress (to change the ‘like’ description text) to insert into function.php… what would be very very helpful

    • http://theitechblog.com/ Namit Gupta

      The facebook like button picks up the description text from the header ‘description’ meta tag. In wordpress you can use any good seo plugin such as ‘Yoast SEO’ to edit the description text for any post or page. Hope it helps.

  • Giopt13

    I used the Facebook url linter and it shows this error: Object Invalid Value:Object at URL ‘http://www.congeo.gr/’ of type ‘website’ is invalid because the given value ” for property ‘og:image:url’ could not be parsed as type ‘url’.

  • Lalisha

    Hi there…
    concerning my website, when i copy the URL to FB the thumbmnail shows latin text from the sample template, how do i rectify that
    Thanks

  • Sagar Sutariya

    Solution works for me thanks a lot

    • http://www.theitechblog.com/ Namit Gupta

      glad to know that

  • Elaine

    Hey thanks!!
    I am using WordPress. Where exactly should the code above be placed in the header?