Adding the Facebook Like Button to WordPress Posts

Today Facebook announced a slew of new social plugins that anyone can add to their web pages to make them more social. Among these new plugins is a new button to “Like” anything on the web, so lets take a look at adding the Facebook Like Button to WordPress posts.

There are 2 main versions of the Like button

The basic Like button is available via a simple iframe you can drop into your page easily. A fuller-featured Like button is available via the XFBML tag and requires you use the JavaScript SDK. The XFBML version allows users to add a comment to their like as it is posted back to Facebook.

The Facebook Like Button comes with a handy generator with several options for outputting the proper code to add the Like Button to any web page. This is fine and dandy for some sites/pages and only needs a little tweeking to add the button to your WordPress posts.

The Basic WordPress Code
The only thing needed to add the Facebook Like button to your WordPress posts is to include the proper code for your permalinks. Basically you add the WordPress the_permalink() code to the href= to get the following:

<iframe src="http://www.facebook.com/widgets/like.php?href=<?php the_permalink() ?>"
scrolling="no" frameborder="0" style="border:none; width:450px; height:80px"></iframe>

The above adds a 450px wide by 80px high box on your site that is ready to display thumbnails of every friend that has also liked the site/page. If you noticed in the Facebook Like Button generator there are several options for turning off thumbnails, changing font and even using a button count counter. You can append any of these settings after the URL in order to change the look of your button.

Editing the Facebook Like Button
Let’s add the following to change the options to the Facebook button, here we are changing to the count view, hiding thumbnails as well as changing the width and height. We will add the following the code above, after the permalink and before closing out the double quotes.

Add this to the above basic code:

%2F&layout=button_count&show-faces=false&width=100&action=like&colorscheme=light

End up with a new style button:

<iframe src="http://www.facebook.com/widgets/like.php?href=<?php the_permalink() ?>%2F&layout=button_count&show-faces=false&width=100&action=like&colorscheme=light"
scrolling="no" frameborder="0" style="border:none; width:100px; height:20px"></iframe>

This is the simple version, for a detailed button that integrates deep with Facebooks new social graph you will need to use the Javascript SDK version of the Like Button.

You can see an example of the iframe Facebook Like button below, if you are signed into Facebook and are reading this feel free to test it out!