1. Mediaite
  2. Gossip Cop
  3. Geekosystem
  4. Styleite
  5. SportsGrid
  6. The Mary Sue
  7. The Jane Dough
Technobabble

How to Add Facebook’s New “Like” Button to Your Blog

by Scott Smitelli | 6:25 pm, April 21st, 2010

Hot on the heels of Facebook’s announcement that they were blessing the Internet with global “Like” buttons, a request came down from The Powers That Be to add the feature to posts here on Geekosystem. And with all due respect to Facebook, their documentation was terribly unhelpful. Here’s how we did it, and it should work on any halfway-customizable blog:

For those of you who are interested in the inner machinations of our site, we use WordPress for all our content generation and publishing. Every one of our pages is built dynamically from post content in a MySQL database. But if you look, Facebook’s Like button generator wants you to input the URL of the page you’ll be installing the button on. That’s fine and dandy if all you serve is static content, but our site has almost one thousand published stories… Only somebody whose time was worthless would manually go through and generate all those code snippets.

Besides, since our pages are dynamically generated, how would we go about putting this into all our old posts? Manually adding these code snippets to several hundred dynamically-generated pages isn’t just unreasonable, it’s practically insurmountable.

The Facebook documentation doesn’t really go into any detail about what the generated code means, so I took the default sample and hacked on it to figure out what each parameter affected and how to best customize it to our own particular needs.

If you look at the default code that the generator outputs, it looks like this:

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fdevelopers.facebook.com%2F&amp;layout=standard&amp;show-faces=true&amp;width=450&amp;action=like&amp;font=arial&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:px"></iframe>

So, in essence, the entire widget lives inside an iframe, whose content is generated entirely by Facebook’s servers. If you parse through and de-percent-encode the actual URL, you’ll find it makes an HTTP GET request to http://www.facebook.com/plugins/like.php with the following parameters:

href        = http://developers.facebook.com/
layout      = standard
show-faces  = true
width       = 450
action      = like
font        = arial
colorscheme = light

Look familiar? Those are all the same options that you can set with Facebook’s generator, albeit expressed much more densely. layout can be standard or button_count, show-faces is a boolean that corresponds to the “show faces” checkbox, etc. I thought there was a fun opportunity to play with the action parameter (the “verb to display” option — either ‘like’ or ‘recommend’)… I tried to change it to ‘embiggen‘, but Facebook defaulted it back to ‘like’. Killjoys…

The golden option is href. That’s the URL that Facebook uses to determine what exactly this user is actually liking. If we could just automatically set that to the URL of the currently-displaying page, all our troubles would be a thing of the past.

Oh, wait. We can.

… /like.php?href=<?php echo rawurlencode(get_permalink()); ?>&amp; …

That tiny piece of PHP/WordPress magic grabs the permalink URL of the current post, percent-encodes all the special characters, and dynamically inserts the result into the code that Facebook gave us. Using that technique in our global site template files, we were able to instantly add the Like button to every post on the site, as well as any future posts that we make, in one step.

This technique should work on practically every WordPress site out there, on both posts and pages. In fact, if your CMS has any equivalent function to get_permalink(), you could adapt it to work virtually anywhere.

So that’s how we did it. What about you?

Update: In a “eureka” moment, an even more universal method was discovered. This updated snippet will work inside any PHP script, WordPress or otherwise:

… <?php echo rawurlencode('http://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']); ?> …

(title image via Fast Company)

  • jayarr

    It’s even easier (and, let’s be honest, way more useful for your readers) to add the universal “Indifferent” button: http://www.esarcasm.com/12934/esarcasm-indifferent-button/

  • http://games.garyfarnam.org Gary Farnam

    Can you demo the “Eureka” php statement in the statement. I seem to be getting it wrong when I’m trying to do it in a php echo statement. Thanks for the info!

  • Yumeeemama

    ok, I have been raking my brain with research about how to add a like button for 2 days and can NOT figure out how to get the code integrated onto my facebook page. I could not add it as a gadget to my blog but was able to add one in the new posts section. WHat do I do with the code once I have it. BTW –the button in the post section works but its not next to my header where I want it.

  • http://www.facebook.com/kylespringer Kyle Springer

    I am having a problem where I add the like button in, and I want when people that like the post to be included in my main page http://www.facebook.com/supportnerds but it ends up creating a new page on FB for each post, how do I fix this?

  • Catalin

    I find the perfect way to do it just mix up the generator founded here ( http://www.scriptgenerator.net/77/Valid-W3C-facebook-like-button/ ) and replace the link your pice of code
    So my like button is still valid and uses dinamic links

  • Dale

    I believe this is functioning as intended. These new pages are only viewable by the admin (you), and it will allow you to see which users have actually clicked the thumbs up button.

  • http://twitter.com/anggiarlandi Anggi Arlandi

    Did’t get it to work first but then read a little more carefully and found out I had to remove the colored lines. Now it works like a charm! Thank you! Much appreciated! If you have the time, please drop by my blog:
    http://www.brainshutdown.com/

  • http://www.shoutpedia.com/ a_usman

    Thanks a lot, the second code worked like a charm. I am using YARPP plugin to generate related posts and the like button picked up the last post from related listings instead of original post. I tried many method but no success. No working without any problem.

  • http://www.facebook.com/profile.php?id=1611438892 Dan Hiorns

    You are seriously a life saver.

    Bookmarking this site.

  • Elaine

    Will this work in Blogger too? Thank you

  • http://www.facebook.com/DOCTOR.X992 Derar A. Twalbeh

    N!CE ……………… !!

  • http://www.spotview.it/soluzioni-web-complete/realizzazione-siti-internet.html realizzazione siti internet

    great post, very useful. thanks

  • http://www.praisetracks.com Simeon Amburgey

    Thanks for this.  I have been trying to figure this out most of the day and you helped put the pieces together.

Abrams Media Network click here for advertising opportunities

© 2012 Geekosystem, LLC | About Us | Advertise | Self-Serve Advertising | Newsletter | Jobs | Privacy | User Agreement | Disclaimer | Power Grid FAQ | Contact | Archives | RSS RSS
Dan Abrams, Founder | Power Grid by Sound Strategies | Hosting by Datagram