Now Reading
Add Thumbnails to FB Recommend Social Plugin
5

Add Thumbnails to FB Recommend Social Plugin

by Jason GreenJune 1, 2010

Adding icons from your wordpress posts to the Facbook recommend widget is really easy.

Thumbnails on the Facebook Recommend Social Widget

Adding thumbnails to the facebook recommend
or like widget in wordpress is super easy if you
already use a custom field to store the
thumbnail location for each post.

This is a great way to add thumbnails and can really
make your website stand out on facebook.
You can look at the live example on my website,
on the right where my widget is or
on the screenshot on the left.

See all the icons right there in the feed?
It’s actually really easy with wordpress!

Ok, lets get started:

Start by pasting this code in your header.php
file that is found in your theme’s folder.

Inside the <head> section somewhere,
preferably at the top in header.php.
(*Note this code may need some Modification for your specific theme*)

<? // META FOR FAILBOOK ?>
<meta property="og:title" content="<? if (is_single()){?><? wp_title('');?>|Custom Tagline<? } ?>"/>
<meta property="og:site_name" content="Green Complex"/>
<?php $thumb = get_post_meta($post->ID, 'thumb', TRUE); ?>
<meta property="og:image" content="<?php echo $thumb ?>"/>

Make sure to make any changes you need in the bold sections to tweak it just right!

For those webmasters who want to know what’s going on, I’ll walk with you line by line. 😀

  1. <? // META FOR FAILBOOK ?> -This is just a comment, good code is always commented
  2. <meta property="og:title" content="<? if (is_single()){?><? wp_title(''); ?>|Custom Tagline <? }?>"/> -This Line checks if the page is a post, and if so, it takes the name of the post and sets that as the meta tag og:title, which is where facebook gets the page title from (Don't know why the real title tag wasn't good enough) A Custom Tagline is optional and you could add a little tag line to the end of every status update like - lol or something.
  3. <meta property="og:site_name" content="Green Complex"/> -This line sets the site name. The user's status will now say Jason likes (titleofpost) on Green Complex.
  4. <?php $thumb = get_post_meta($post->ID, 'thumb', TRUE); ?> -And here we grab the image link from the posts custom field.  Where it says 'thumb' you will want to change to whatever custom field you use for your post images like 'image' 'large' or 'thumbnail'
  5. <meta property="og:image" content="<?php echo $thumb ?"/> -Then we take the custom image url at return it in the meta tag for facebook to pick up, and add to the recommend widget. (It should return something like http://site.com/image.jpg)

And that’s it in a nutshell! Adding the images will customize the like experience a bit more for the user

and increase the chance that other readers will check out other stories on your site too. Great stuff!

If this post is a little rough forgive me, I’m still settling in to my new site design!

About The Author
Jason Green
The writer and owner of Green Complex, Jason is an A+ Certified for Computer Hardware egghead and Eagle Scout since 1999 but has been building computers and programming for much longer. An enthusiast to say the least, his hobbies also include photography, video games, and reading. See his proficiencies on Smarterer.
5 Comments
  • July 27, 2011 at 9:17 am

    Nifty. I was actually just looking for a way to make the correct thumbnail appear when you share a link on fb, but this gives me another idea… oh, dear… distractions, distractions.

  • October 2, 2010 at 3:26 pm

    Thanks for the reply Jason. I found out that actually the trick works, but only for the upcoming posts you will write. The rule doesn't seem to apply to the posts you wrote before. Any way to correct that ? Thanks !

    • October 3, 2010 at 10:54 am

      Yes it looks like a problem in the Facebook cache of the old post. I am going to ask on the FB developer forums if there is a way to refresh the old post images cache on facebook. I can't find anything about cache control. IT APPEARS to be all automated…

  • October 1, 2010 at 10:17 am

    Hey jason, I did exactly what you said on my blog and nothing changed in my FB recommendation box. Thumbnails are still wrong. And apparently it's the same for your blog. Do you think I did something wrong or has facebook just changed / blocked this function ? Thanks anyway 🙂

You must log in to post a comment