How to Add the Facebook Like Button to Your WordPress Blog

Facebook has recently made significant steps to socialize the entire web. Some of their new developer tools allow your readers to “like” your posts without having to sign in to your site using Facebook Connect. Rather, as long as they are signed in to Facebook, they can “like” a post and that action will show up in their Activity Stream.

When I read about this news at TechCrunch, I searched for information on how to integrate the button into WordPress blogs. Facebook has a form you can fill out to output code to put into your blog. However, this form only allows a static URL. If you want a button for each individual page on your blog, you have to do a little bit of hacking.

I did a little bit of google searching, but the solutions I found (Geekosystem and Ruhani Rabin) did not work on my blogs. (They resulted in errors.)

The following code works for me:

<iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink(); ?>&width=450&action=like&colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:450px; height:70px"></iframe>

The key difference is that instead of the other URLs I used <?php the_permalink(); ?> which is WordPress’ default code for creating dynamic permalinks.

To implement this into your blog, just open the single.php file (or index.php if there is none) and paste this code after or before something that looks like <?php the_content();?>. You will have to experiment to see what works well. The only other change I made to the code is add a numerical value for “height.” Otherwise, Facebook uses a fair amount of space, presumably to display all the faces of your friends who liked the same post.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>