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
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:
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>
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!
About Gabe Diaz
Gabe Diaz is web professional and consultant focusing on design and development, currently based out of South FL. When not geeking out on the internet you will find him spending time with his children. You can also find him on Google+: +Gabe Diaz, Twitter: @GabeDiaz and Facebook: GabeDiaz.