Let Facebook “Like” button pick the right image!

How common: you have 20 images on your site, you place a like button on your site. You see others start to “like” your content but with the wrong image. Actually, last year I heard the complaint more than once because Facebook started to add an image to a “liked” post. Luckily it is not hard to fix this ..

Why is this an issue?

As said, some time ago the Facebook “Like” button would just show a phrase in your profile “you liked blabla..”, but now it shows the thumb and some text, typically the first paragraph of the article. This is seen on your profile and in your friend’s news stream.

Example

I tested the like button on my site to see that it takes a random image, one of my social share buttons. Not quite what I want of course. Now it seems erroneously that the article is about digg :(

Compare this with “Facebook Share” where you can select the thumbnail you want to appear alongside the post:

Or better, control which image is visible !

The solution

Check out this interesting post.  Basically you can use the meta tag to tell which image to show on your post to your wall:

<meta property="og:image" content="<your image link>"/> 

Facebook’s Like Button page explains the tag as:

og:image – The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.

So this is easy to implement. Just control the meta html tags. But what if you have your WordPress blog and you don’t want to poke to much in the code (for example, you are not using a child theme). I did some research and it depends the plugin you use. Sadly enough I could not find one plugin that would be that flexible to let me choose the image that would show up..

WordPress

Up until now I used fbLikeButton, but it does not add any og:.. meta properties.
Update: Nustiu (comments) confirms FbLikeButton has indeed everything you need. He says that if you want one default picture or for every single post another picture, it does the job. He also pointed me to this tutorial. I am not sure if it is an improved version or I initially overlooked it. In latter case sorry, in both cases this might be interesting to try, so cheers Nustiu ! I personally stick with Michael Fields solution for now ( see later on in this post )
== end update ==

I did some searching and I found a better “Like” plugin that does the work, but still not to my satisfaction. The Like plugin has the exact same appearance and config settings (e.g. show the “like” button before and after the post), but it also adds the meta tags. The only problem is that you can only specify one image. So if you want all your articles to carry your logo, just specify the full URL to that image and you are done. For example:

<meta property="og:image" content="http://bobbelderbos.com/.. ..badge_bb.png" />
..

A better solution

If you have a child theme, you can place hooks to existing WP functionality. I found a brilliant blog post from Michael Fields where he explains how you can add the “Like button” to your posts and set the meta tags for each and every post. It sets the “featured image” as og:image, and it is that image that shows up in the Facebook post upon liking the URL.

For me this is the ideal solution, because I always make an image that characterizes the post and that will show on my homepage and in my blog’s archive page.

Testing two posts it works great:

<meta property="og:image"
  content="http://bobbelderbos.com/ .. .. readitlater.png"/>

<meta property="og:image"
  content="http://bobbelderbos.com/.. .. fb_comments.png"/>

.. these are the featured images of the two posts.

It seems to work great:

So thanks Michael Fields for sharing this solution! I think a lot of us are looking for this ..

Outside WP, another option

When you don’t use WordPress, and you want user’s to send your content to their walls, you can use the Facebook API to control how such a post will look like. I covered this technique here and use it for sharemovi.es and my reading list.

Debugging

Facebook’s lint is a great tool to debug issues with Facebook’s share plugins. When you put in an URL it shows how Facebook reads it. Note the <meta .. og: .. .. > stuff in the example below:

  • http://wordpress.mfields.org Michael Fields

    Hi Bob! Thanks for including my solution in your post. I thought that you and your readers might be interested in a plugin that I made which adds the appropriate metadata for even more views than the code I wrote a year ago. The code can be downloaded from Github and will support all post_types (even custom ones), categories, tags, custom taxonomies and author archives. I originally thought that code such as this was better served in the theme, but upon further thinking, I’ve decided that this is pretty much plugin territory. Would love to hear your thoughts on the new code!

    • Anonymous

      I will check it out and let you know .. thanks for reaching out to my blog!

  • http://www.nustiu.ro nustiu

    Hey. I found your post searching on google after fblikebutton wrong image. And here I am. I had the same problem on my webpage http://www.nustiu.ro, wrong thumbnails after hiting like button. After reading your post I made some searches and you are wrong.
    FbLikeButton has everything you need. Check this tutorial, after I found this my like button is working how I want. If I want one default picture or if I want for every single post another picture this does the job.
    Here is the tutorial http://www.youtube.com/watch?v=gsxA0Hai6kU&feature=player_embedded#at=169

    Hear ya. bye

    • Anonymous

      cool video, thanks for adding this info. I am busy with something else now but I will check the out the plugin and correct my article if needed. cheers

  • Pingback: Facebook like image thumbnail | SiteKickr Blog

  • FreeFrog

    Thanks. Your post got it working for me and fixing a client’s site. I was redundant and posted both options. It didn’t work with www in from of the domain, but removing www it works just fine now. I also made a custom image at 50×50 pixels so it would look good. Thx.

    • Anonymous

      Great, thanks for letting me know

    • http://twitter.com/computer_genie computer_genie

      After reading through numerous pages and numerous changes/tweaks while testing out this issue, YOUR simple 2-liner did the trick for me… THANK GOD!!!!

      Thank you, FreeFrog :))

      • FreeFrog

        Excellent! Who knows how long that approach will last though, as FB loves to change things behind the scenes.

        • http://bobbelderbos.com/ Bob Belderbos

          nice how you guys continued hacking based on my post. good work!

          • FreeFrog

            LOL We’ll just have to see how long the hacks can continue, and of course continue to work. :D

  • Mjefferson96

    I want to change the image that goes on the post. So I changed the path in the meta tag to point to a new image, but it still posts with the old image. Whats going on??

    • Anonymous

      maybe caching? do you have the url to look at? what about facebook’s url linter? what image displays there?

    • Mjefferson96

      It took a few days to show up but the image finally changed.

      • Anonymous

        good to hear. it’s a bit tricky at the start but once you get a hang of the api there is no ending …

  • Pingback: » web support for people like you. and me. pete's web work

  • Pingback: The Mubulaw Blog Is Now Online | mubulaw.com/blog

  • http://www.facebook.com/npwsamarasinghe Nalaka Prasad Wijesiri Samaras

    omg!!! you are God!!!

  • Limon69

    Great help, Thanks

    • http://bobbelderbos.com/ Bob Belderbos

      you are welcome, other doubts about the API?

  • Vinçenc

    veri good

    • http://bobbelderbos.com/ Bob Belderbos

      thanks Vinçenc

  • http://bobbelderbos.com/ Bob Belderbos

    according to the facebook url linter (debug page) the og:image you specified gets selected so that seems ok, there are some other errors though

  • Freddie Lore

    Hi Bob, 

    Thanks for sharing this here. 

    Sure <meta property="og:image" content="”/> works within a single post or a user is viewing in a single post. But how would you display the right thumbnail if you have a list of post that comes with “Like/Send” button each?

    This is for my Homepage, where I displayed the first 10 articles with thumb, excerpt and read more link. But every time a click on Like/Send button, I always got the wrong thumb.. Any ideas?

    Regards,
    Fred

  • Empee

    Hi Bob…. How can i Use the like button function on a picture… but i don’t wanna place the button here by clicking on image itself it should work as the like button. can u plz help me with this….?? 

  • ArleyM

    Great post, thanks a lot! I thought this was going to be tricksy. 

    • http://bobbelderbos.com/ Bob Belderbos

      nice, thanks

  • Cesar Castro

    Hey there!
    Do you know how can I add a “main thumbnail”, instead of an only option? I believe users should also have the choice to add any other image present in the page as a thumbnail.

  • http://bobbelderbos.com/ Bob Belderbos

    you mean programmatically? please provide me some more details and/or contact me

  • Orquídea Errante Editores

    genial

© 7250 Bob Belderbos. All rights reserved.

- If you like something here, link to it instead of copy+paste.
- Disclaimer: ideas expressed on my blog are mine, and have nothing to do with the current/previous employers.
- Proudly using Wordpress and the Insider Theme on Bluehost