Installing the Facebook Like Button Part 2: Make the Button Work

In part 1 of our series on the Facebook Social Plugins, we showed you how to prep your site for all of the FB social plugins by installing the JavaScript SDK. From here on, using the Facebook Social Plugins on your blog is pretty easy. This tutorial will show you how to make the Like Button appear in a couple different places on your site.

For this tutorial, we’re assuming that you’re using version 2.9 or later of WordPress and version 1.7 or later of the Thesis Theme, and that you’ve gone through the steps in part one of this series.

We’ll also be editing the Thesis Custom_Functions.php file again. Check out part 1 of this series for more details on how to do that.

In both cases below, you can customize what the button looks like, and what it does, with the different parameters. For example, if you change Show Faces to false, visitors to your site won’t be able to see the profile pictures of their Facebook friends who have already clicked on the Like Button. This might be useful to keep your home page from getting too cluttered if you’re using the button with teasers. For more info about customizing this for your needs, check out Facebook’s documentation here.

Also, in each of the cases below, we’re combining the code that you can get from Facebook with some extra code to make it work with Thesis and WordPress. The code that Facebook gives you starts with <fb:like href , and ends with </fb:like>

Note that we’ve replaced the site url in the Facebook portion of the code with

<?php the_permalink(); ?>

This is necessary to make the button work with each post.

Add the Like Button to the Top of Posts

To add the Like Button to the top of each of your blog posts, copy and paste this code to the bottom of the Thesis Custom_Functions.php file.

/* BEGIN: Facebook Like Button Before Posts */

function add_fb_like_button () {
	?>
		<fb:like href="<?php the_permalink(); ?>" layout="standard" show_faces="true" width="450" action="like" colorscheme="light"></fb:like>
	<?php
}

add_action('thesis_hook_before_post', 'add_fb_like_button');
/* END: Facebook Like Button Before Posts */

Add The Like Button to Teasers

To add the Like Button to the bottom of each post teaser, on your site home page for example, copy and paste this code to the bottom of the Thesis Custom_Functions.php file.

/* BEGIN: Facebook Like Button On Teasers */
function add_fbteaser_like_button () {
	?>
		<fb:like href="<?php the_permalink(); ?>" layout="standard" show_faces="false" width="100" action="like" colorscheme="light"></fb:like>
	<?php
}

add_action('thesis_hook_after_teaser', 'add_fbteaser_like_button');
/* END: Facebook Like ButtonOn Teasers */

In part 3 of our Social Plugins series, we’ll show you how to install a Facebook Comment Box to your blog posts.

Related Article:
Facebook Social Plugins Pt 1: JavaScript SDK

Photo Courtesy of joeltelling

Tagged as: blog, blogging, Facebook, Fan Page, how to, howto, like button, tips, tutorial, wordpress