Adding a Facebook ‘Like’ Button To Thesis

by Michael Johnston

Yesterday Facebook gave site owners another way of leveraging social media by introducing the ‘Like’ or ‘Recommend’ button. They managed to do it in a way that makes integrating it into most sites a snap. Since I run the WordPress Thesis Theme on a bunch of sites, I set out to integrate the new feature into several of them.

Adding the Like button to Thesis turns out to be fairly straightforward, thanks to the Thesis Hooks system. The problem with the code Facebook provides, however, is that it is specific to a particular URL. Making it work with any blog page is the challenge. The code shown below does the trick.

This solution was created by Ruhani Rabin for generic WordPress installations. Putting the code in the correct place in Thesis was all that was required to enable it.

You’ll want to add the code shown below to your theme’s custom_functions.php file

Add this first bit to the top of the file, where you may already have other actions added:

add_action('thesis_hook_before_post','facebook_like_button');

Then, toward the bottom of the file, where your custom functions would go, add the following:

function facebook_like_button(){
global $post;
?>
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:60px"></iframe>
<?php
}

If you want the button to appear somewhere other than the top of the post, alter the add_action line accordingly, using one of the appropriate Thesis hooks.

UPDATE: For generic WordPress installations or for those not needing the fine grained control Thesis provides, this plugin is probably a quicker, simpler solution.

UPDATE 2: I’ve evaluated the performance of the Like button on three different sites and have concluded the buttons may be wrong for some sites.

  • http://ariwriter.com Ari Herzog

    Groovy, thanks for the nice code! Only suggestion is to tweak the above so the code is one box, to make it easier on others to copy and paste.

  • http://www.thewellrunsite.com Michael Johnston

    How right you are. Sorry about that. The problem is fixed. Thanks for pointing it out.

  • Todd

    I wrote a plugin that makes this much easier and offers a live preview in the wordpress settings while you play with the different options. http://bit.ly/awqa5C

  • http://www.thewellrunsite.com Michael Johnston

    Looks interesting. Does it work well with Thesis?

  • http://www.goodtrueandbeautiful.com Sharon

    Thanks! Just what I was looking for!

  • http://bit.ly/dDg0u5 Dean Peters

    Thanks for the article, especially adding to Thesis based themes.

    For everyone’s theme convenience, I have gone ahead and developed a plug-in that provides options to place the button at the top and/or bottom of the post: http://bit.ly/dDg0u5

  • http://easyfitnesswebsites.com/blog Tony M

    I did this and made the change for a single page view rather than global.

    function facebook_like_button(){
    if (is_single()){
    ?>
    <iframe src="http://www.facebook.com/plugins/like.php?href=ID)); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; overflow:hidden; width:450px; height:60px”>

  • http://easyfitnesswebsites.com Tony M

    Weird, I put the whole code in but it didnt take all of it. After the above enter this:

    <?php
    }}
    add_action('thesis_hook_before_post','facebook_like_button');

  • http://www.KellytheKitchenKop.com Kelly the Kitchen Kop

    Does anyone use Thesis Openhook? I tried adding the above to the “before post” box but it didn’t work.

    If I wanted to put it into my “before post” box for Thesis Openhook, can you give me the entire code that I’d need to put in there? Then do I check off “execute php on this hook”?

    Thanks for your help!
    Kelly

  • http://www.goodtrueandbeautiful.com Sharon

    Kelly – I use Open Hook, and placed it below my post and it worked perfectly (don’t check the PHP box).

    Haven’t tried it above, though it should work anywhere.

  • http://www.vevans.com Vevans

    I was looking for this code. Thank you :)

  • http://audioforbooks.com/ Pete

    Works great, I have alot of pages I would like to exempt the button on.

    Any suggestions how I can do this?

    Thanks

  • http://gabrielnovo.com Gabriel Novo

    Worked like a champ. Thanks for the easy to follow instructions.

    Those looking for the Thesis Hooks (without having to install another plugin), check out – http://thesishooks.com/

    It was very easy to follow even for a coding retard like me.

  • http://blog.bottomlessinc.com Bottomless

    Here’s the WordPress plugin:
    http://wordpress.org/extend/plugins/like

  • http://www.philrichards.biz/ Phil Richards

    Michael, I appreciated this, worked like a dream, Loading appears to be a little slow, any ideas why that would be ?

  • http://thewellrunsite.com Michael Johnston

    Slow loading is probably due to the time it takes for Facebook to process the request and display the results. Basically, adding the Like button creates an external dependency on Facebook; if the longer it takes them to process the request, the longer it will take for the page to fully load. No doubt their servers are getting hammered and I'm sure they'll scale it up to handle the load.

  • http://www.philrichards.biz/ Phil Richards

    Ok thanks Michael, I will keep my eyes on it !

  • http://www.photosbyrowell.com/blog Rowell

    Has anyone found a way to change the font colors?

  • http://www.slymarketing.com Jens P. Berget

    Thanks a lot. I have just added a Facebook like button to my blog, all because of your blog post :)

  • http://thewellrunsite.com/2010/05/01/is-facebooks-like-button-wrong-for-your-site/ Is Facebook’s Like Button Wrong For Your Site?

    [...] testing my own solution and several different WordPress plugins on this blog, I decided it was safe enough roll Like button support out to a few of the blogs I [...]

  • http://thewellrunsite.com Michael Johnston

    I've had some interesting experiences on sites where I've rolled out these buttons. My findings are here: http://thewellrunsite.com/2010/05/01/is-faceboo…

    I would be interested in hearing the results others have had.

  • scottsabins

    This worked really easily for me on http://www.collegegradcommunity.com. Thanks so much for the tip!

  • http://www.problogger.net/archives/2010/05/21/are-facebook-like-buttons-wrong-or-right-for-your-site/ Are Facebook Like Buttons Wrong or Right For Your Site?

    [...] began by testing my own integration as well as several different WordPress Like button plugins on my personal blog.  When I had become confident that the buttons wouldn’t cause any problems, [...]

  • http://www.addaz.co.cc/archives/322 AddaZ | Blog | Are Facebook Like Buttons Wrong or Right For Your Site?

    [...] began by testing my own integration as well as several different WordPress Like button plugins on my personal blog.  When I had become confident that the buttons wouldn’t cause any problems, [...]

  • http://www.coolsiteoftheday.com Mike Corso

    Michael,

    Just found your tip on adding facebook plugins to WordPress/Thesis sites…thank you!

    We're making a lot of changes to Cool Site of the Day these days so stick around and post your wisdom (I'll be adding a dedicated area to sharing tips soon).

    Anyway, I added the 'Like' Button but would like it to appear above my Adsense ad block. Any ideas?

    Thanks again,

    Mike Corso
    Cool Site of the Day
    On the Web Since 1994. Over 5,000 Sites Served!
    http://www.coolsiteoftheday.com

  • http://stewartwelch.com/blog Drew

    This code is awesome! Only problem for me is that I keep getting an error saying facebook cannot access my page. Any idea why this is?

  • http://thestartupist.com Ethan

    Thank you for taking the time to share this! I found it very useful!

  • http://www.coolsiteoftheday.com Mike

    BTW, got it working on http://www.coolsiteoftheday.com like a charm BUT when we tried on another WP blog it didn't work so well SO we used your suggestion ('Update': http://blog.gunnjerkens.com/2010/04/facebook-li…) and that worked (here: http://www.naturalgasforgeorgia.com)

    Thanks again,

    Mike Corso
    Cool Site of the Day

  • http://ustandout.com Diana Freedman

    This worked better than any plugin I could find! So simple!

    Thank you so much! :-) Do you happen to have a way to use the XFBML version of the Like button?

  • http://www.iqwirty.net Shannon Wagner

    Kelly – I couldn't quite get it to work before the post using Open Hook, but it worked fine for me in Thesis when I followed the instructions here exactly. I think I'm just using Open Hook wrong, or something like that.

    The custom file editor in Thesis made the modification very easy.

  • http://redbus2us.com/ Kumar

    Thanks, it was quick copy and paste…worked like charm !

  • Regennaw

    Hey..I tried it and it was so easy and worked like a charm..thanks much!!!

  • http://twitter.com/Mactosh_net Terje Müller Karlsen

    This worked like a charm for me. I`ll be watching out for the load time though. Thanks for sharing this trick!

  • http://www.chorecharts4kids.com Lee

    This works perfectly. Thanks! I was previously using the Like Plugin http://wordpress.org/extend/plugins/like
    is there any way to add the likes that I got using that plugin to this new system?
    I moved to a new host and all of my likes dissapeared…

  • http://www.magento-themes.jextn.com magento themes

    We need to know all these to keep ourselves updated.Thanks for giving your valuable time.Hope i can ask for suggestions in future regarding this.

  • http://www.mactonweb.com seo bangalore

     yes facebook is reall good and it is the best way to generate traffic to your site, thanks for sharing.

Previous post:

Next post: