Facebook Social Plugins Pt. 4: The Like Box

In the previous 3 parts of our series on the Facebook (FB) social plugins, we’ve shown you

• How to prep your Thesis themed WordPress site so that you can use all of the social plugins

 

• How to install the Like Button

on your blog
 

• How to install Comment Boxes

In this last tutorial, we’ll show you how to install the Like Box, which is like a small window to your FB Page. It shows visitors to your blog a quick snapshot of the activity on your FB page, and which of their friends are already fans of it. The best part is that if they’re not already a fan of your FB page, they can become one by clicking on the Like button inside the Like Box.

This plugin gives you an easy way to integrate the content and audiences of your website and your FB world. Now your Facebook page has another avenue of gaining viral popularity as the popularity of your website goes up.

For this tutorial, we’ll show you two different ways to get plugin to show up on your site. We’re also 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 – How to prep your Thesis themed WordPress site so that you can use all of the social plugins.

Installing the Like Box as a Sidebar Widget

• Go to the Facebook Developer site for the Like Box.

 

• Customize by filling in the form and clicking on the Get Code button. The Facebook Page ID is the ID number for your FB Page.

  Width allows you to adjust the width of the box to match the width of the sidebar on your site. And Connections allows you to adjust how many of their Friends’ pictures a visitor will see at the bottom of the box.

  

 

• Copy the code that Facebook gives you. You can copy the iframe version or the FBML version; it doesn’t really matter. You’ll only need one of them though.

  

 

• Paste that code into your site the same way you would install a widget. Here’s a video tutorial to show you how.
   

Installing the Like Box with the Custom Functions.php File

If you want a little bit more control over where the Box appears, you can also insert it by editing your Thesis Custom_Functions.php file. Check out part 1 of this series for more details on how to do that.

To add the Like Box to the top of sidebar 2 of your site, copy and paste this code to your Thesis Custom_Functions.php file.

/* BEGIN: Facebook Like Box To Sidebars */
function add_fbpage_like_box () {
	?>
		<fb:like-box profile_id="YOUR Facebook Page ID" width="300" connections="15"></fb:like-box>
	<?php
}

add_action('thesis_hook_before_sidebar_2', 'add_fbpage_like_box');
/* END: Facebook Like Box To Sidebars */

Make sure you change the words YOUR Facebook Page ID with your actual page id. And don’t erase the quotation marks around the id number. It should look something like this:

“123456789″

For this example, we combined 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>

You can customize what it looks like, and what it does, with the different parameters. Just change the values for Width and Connections. For more info about customizing the button for your needs, check out Facebook’s documentation here.

That wraps up our four part series. What do you guys think? What are some ways you’re using social plugins on your site?

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