Twitter
April 24, 2010
13 Comments

Adding a Facebook like button to your WordPress blog

By

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.


Tech ,

  • Pingback: WordPress – Installation | Host Rage

  • Pingback: Howto: Hosting a Wordpress Blog | Host Rage

  • http://blog.calbucci.com/ Marcelo Calbucci

    Hey, the FBML integration is much cleaner. Take a look at the HTML on my blog: http://blog.calbucci.com.

    You need a script at the top and them a simple HTML extension tag.

  • http://blog.bottomlessinc.com PlF

    Here's the Facebook Like button plugin available from WordPress:
    http://wordpress.org/extend/plugins/like
    No coding necessary, you can customize the look and placement of the button in the settings interface

  • http://currentlyobsessed.com/ joe heitzeberg

    Nice! Thanks for the link

  • http://currentlyobsessed.com/ joe heitzeberg

    Good point

  • http://currentlyobsessed.com/ joe heitzeberg

    Ironically, this post is all over Twitter and TweetMeme and I am the only person so far to click the Like button.

  • Dan S

    I like you, Joe! (like = feel sorry for..?)

  • http://www.knowproapps.com Mike Cyger

    Thanks, Joe. I looked at some WP Plugins but your solution was much easier to implement.

    Also, be sure to check out facebook.com/insights. You can add a meta tag to your website and see some cool information about who's visiting your site and viewing your pages.

  • Ken

    Anybody knows how to style it to work on a black background? I can't see the count number on a black background since the number is already black

    thanks

  • http://billock.net BrentBillock

    I agree that it makes more sense to put the code where you need it rather than using a plug-in.

    Also, for anyone whose blog also has a Facebook Page, using the Like Box instead of the Button will consolidate your existing fans with new people who “Like” your blog.

    I did a little tutorial on putting either one in the sidebar.
    http://bit.ly/aqeGuk

  • Alpinegfx

    For those who want to use it on a black background, copy and paste this code. I made it so the iframe is hidden, until fully loaded.

    <iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(zen_href_link(zen_get_info_page((int)$_GET['products_id']),'cPath='.(int)$_GET['cPath'].'&products_id=' . (int)$_GET['products_id'])); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=dark” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; display:none; overflow:hidden; width:450px; height:40px” onload=”this.style.display = 'block';”></iframe>

  • Alpinegfx

    <iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(zen_href_link(zen_get_info_page((int)$_GET['products_id']),'cPath='.(int)$_GET['cPath'].'&products_id=' . (int)$_GET['products_id'])); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; display:none; overflow:hidden; width:450px; height:40px” onload=”this.style.display = 'block';”></iframe>

  • Alpinegfx

    For those who want to use it on a black background, copy and paste this code. I made it so the iframe is hidden, until fully loaded.

    <iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(zen_href_link(zen_get_info_page((int)$_GET['products_id']),'cPath='.(int)$_GET['cPath'].'&products_id=' . (int)$_GET['products_id'])); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=dark” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; display:none; overflow:hidden; width:450px; height:40px” onload=”this.style.display = 'block';”></iframe>

  • Alpinegfx

    <iframe src=”http://www.facebook.com/plugins/like.php?href=<?php echo urlencode(zen_href_link(zen_get_info_page((int)$_GET['products_id']),'cPath='.(int)$_GET['cPath'].'&products_id=' . (int)$_GET['products_id'])); ?>&layout=standard&show_faces=false&width=450&action=like&colorscheme=light” scrolling=”no” frameborder=”0″ allowTransparency=”true” style=”border:none; display:none; overflow:hidden; width:450px; height:40px” onload=”this.style.display = 'block';”></iframe>