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

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?

(title image via Fast Company)

Have a tip we should know? tips@themarysue.com

Author

Close

Scott Smitelli