Facebook launched their new Social plugins including the new “like” button, and in case you’re wondering how to add them to your WordPress blog, I found a great post by @ruhanirabin.  Here’s what I did to get it working on my blog.

First, I’m using the Evidens Theme theme, so these instructions might not work if you’re using other themes. Also, if your blog is hosted on WordPress.com, this won’t work because they don’t let you hack your themes.  I recommend installing WordPress on Dreamhost or another hosting provider.

single.php – this page renders individual blog post pages. Facebook offers some customization and I decided to add the compact version of the button on the top right next to my existing TweetMeme button, and the larger inline version that shows photos at the bottom of each post.

For the small button, I added this code just after the <div class="p-con"> line:
<!--Start Facebook-->
<div style="float: right; margin-left: 10px;">
<iframe width="85" height="61" src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=65&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:65px; height:61px"></iframe>
</div>
<!--End Facebook-->


This wraps the Facebook button in a div with float set to right so it renders next to the TweetMeme button and doesn’t get in the way of the post’s text. The param show_faces is set to false and layout is set to button_count.

For the large inline button at the bottom, I added the following code as the last thing inside the same p-con div:
<!--Start Facebook-->
<iframe width="465" height="61" src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=standard&amp;show_faces=true&amp;width=65&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:465px; height:61px"></iframe>
<!--End Facebook-->


This is pretty much the vanilla Facebook Like button with show_faces set to true and layout set to standard.

index.php – this page controls the front page of your blog. I wanted the small like button on the top of each post, so I added the following code after the <div class="p-con"> line:
<!--Start Facebook-->
<div style="float: right; margin-left: 10px;">
<iframe width="85" height="61" src="http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(get_permalink($post->ID)); ?>&amp;layout=button_count&amp;show_faces=false&amp;width=65&amp;action=like&amp;colorscheme=light" scrolling="no" frameborder="0" allowTransparency="true" style="border:none; overflow:hidden; width:65px; height:61px"></iframe>
</div>
<!--End Facebook-->


Again we have the div with float right and the param settings on the Facebook button.

Related posts:

1. How much traffic do you get from being on the front page of Hacker News?
2. Unexpected Startup Lesson #1: Quitting the day job
3. Unexpected Startup Lesson #3: Why You Can’t Read a VC