Adding the Facebook “Like” Button to your WordPress Posts
Facebook has been releasing some pretty cool new features lately. I’m sure that by now you’ve seen their “Like” button pop up on some of your day-to-day websites. If you have a website or blog of your own, perhaps you’re interested in adding this button to your own site to help boost traffic.
Facebook Developers have a simple Like Button widget that helps make this possible with little effort.
But how about WordPress posts? If you’re developing or customizing WordPress themes on your own, you probably know by now that posts require a special universal code to pick up the URL.
The widget spits out a pretty basic iframe code (this is the most basic layout with no options):
<iframe src="http://www.facebook.com/plugins/like.php?href=URL" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe>
Which looks like this:
In the above code, I generated code with “URL” in the generator’s box labeled URL to Like. To make this compatible with WordPress, I’ll replace the URL with the following code after I already generated it:
<?php echo rawurlencode(get_permalink()); ?>
Your code will look something like this (again, stripped of all options):
<iframe src="http://www.facebook.com/plugins/like.php?href=<?php echo rawurlencode(get_permalink()); ?>" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px;" allowTransparency="true"></iframe>
Note that if you insert the WordPress code into the generator, the characters will not convert over, this is why I changed it after the fact.
After you’ve generated and customized your code, insert the iframe within the have_posts() loop in your theme’s single.php file and you’re good to go.