WordPress, the open source blogging platform and content management system, powers more than 25 million websites around the world, according to its June 2010 user data.
Some 11.4 million sites are hosted on WordPress.com, while another 13.8 million sites use the licensed version of the platform. Among the platform's millions of authors are many online retailers that produce a blog as a marketing tool or, thanks to plugins like Instinct's WP e-Commerce, actually use WordPress for their store.
Given the size of the WordPress user-base and the popularity of Facebook's Open Graph API, I thought it might be worthwhile to demonstrate how to quickly add a Facebook "Like" button to the WordPress Loop. So in this post, I will take you through that process in a step-by-step fashion.
No. 1: Update Your Template's Meta Data
The Facebook Open Graph API's social plugins, like the "Like" button, require some specific meta data. So I am going to need to add this to the header.php template in WordPress's backend.
The simplest way to access this file may be from the WordPress administration panel. Navigate to Appearance > Editor in the left-hand navigation and then to header.php on the right hand side of the page.
There are five specific lines of code that I need to add. Fortunately, WordPress, which is both robust and well documented, makes it easy to collect the required information from the platform database with a few simple PHP functions.
<meta property="og:title" content="<?php the_title(); ?>" /> <!—this code retrieves the post title--> <meta property="og:site_name" content="BLOG NAME GOES HERE"/><!—the blog name goes here--> <meta property="og:url" content="<?php the_permalink(); ?> " /><!—this code gets the post URL--> <meta property="og:type" content="blog" /><!—this tag tells Facebook that this is a blog post--> <meta property="fb:admins" content="1086042177, john.doe" /><!—this line is for the administrator's Facebook ids-->
No. 2: Reference the Facebook JavaScript Library
While Facebook offers a few ways to implement a "Like" button, it is best to use the company's proprietary XFBML approach. For this, I will need to include a couple of lines from JavaScript to the WordPress footer template. This code will reference a Facebook JavaScript library and initiate the current page's instance of the "Like" button.
Like the header.php template referenced above, the footer.php template can easily be accessed from the WordPress administration panel or, if you prefer, directly on your server's file management tools or via FTP. I placed the following scripts just after the closing <div id="wrapper"> tag.
<script src="http://connect.facebook.net/en_US/all.js"></script>
<script>
FB.init({
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
</script>
No. 3: Add the "Like" Button to the Loop
WordPress' Loop is a section of PHP code that dynamically generates blog posts from the platform database. It is generally placed in index.php, loop.php, single.php, or any other template that publishes post content.
For this example, I want the "Like" button to display when a visitor is looking at an individual blog post, so I add the following code to the end of the Loop in single.php.
<div class="facebook"> <fb:like href="<?php the_permalink(); ?>" width="660" font="arial"></fb:like> </div><!--end facebook-->
Summing Up
That's it, my WordPress blog now includes a Facebook "Like" button on each and every blog post.
Because both WordPress and the Facebook Open Graph API are easy to use, this implementation was a snap.
