jk0.org

Facebook's Like Button

July 04, 2010

Adding Facebook's Like button to your WordPress blog is as simple as adding a few lines of code to your theme. There are quite a few plugins available, but in my opinion, most of them are overkill.

You'll want to start off by setting up a new application on Facebook. This is where you'll acquire the Application ID used below. When you've completed this step, add the following snippet to your theme's footer and replace APP_ID with your new Application ID:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
    FB.init({appId: 'APP_ID', status: true, cookie: true, xfbml: true});
};
(function() {
    var e = document.createElement('script');
    e.type = 'text/javascript';
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
    document.getElementById('fb-root').appendChild(e);
}());
</script>

Now add the following PHP snippet to your post template. I prefer not to have the button show up on pages, so they've been excluded in this example:

<?php if(!is_page()) { ?>
<fb:like href="<?php the_permalink(); ?>" layout="button_count"></fb:like>
<?php } ?>

There are several different ways to customize this, so have a look at the official Like button documentation for more information.