Installing The Facebook Like Button: Pt 1

Recently, you may have seen the Facebook Like button on many of the websites and blogs that you frequent. They are a great way for your content to reach more people in a viral way by giving people the opportunity to post it on Facebook. Links to your various blog posts, or website, can now be effortlessly shared by anyone, and viewed by everyone in the Facebook Newsfeed. Here’s a tutorial, part 1 of a 4 part series on the Facebook Social Plugins, to show you how to get the Like Button up and running on your blog.

When it comes to Facebook’s social plugins, you have two options: use the iframe version, or use the XFBML version.

Iframe Version

The Iframe version of the Like Button is very easy to implement on a blog. Getting it working isn’t all that different from installing a widget on your site. The downside is that the iframe version of the button is stripped down in terms of features. For example, when someone clicks on the iframe version of the Like Button, they can’t add a comment. Facbook will add a single line story to their newsfeed which is very easy to ignore.

XFBML version

The XFBML version of the button allows people to add a comment when they click on the button, and lets you specify a picture to be used in the resulting Newsfeed story.

There are tons of tutorials out there for the iframe versions of the like button. This tutorial will focus on the XFBML version of the button, which will give you more flexibility and make your blog easier to notice in the Newsfeed. For the most part, there is an advantage to using the the XFBML version of all of the Facebook social plugins, and in some cases, an iframe version isn’t even available.

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.

Step 1: Create a Facebook Application for Your Website or Blog

First, you need to create a Facebook Application for your blog. Don’t worry, you’re not creating the next version of Farmville. You’re only doing this so that you can get an App ID. You need this so that Facebook recognizes your blog whenever someone clicks on the Like Button. Think of this as registering your website as a legit online space with Facebook.

While logged in to Facebook, go to the Create an Application page.

• Enter your Site name. What you enter into this box will also be the name of the application. Just give it a short title so you know what it is. We used MediaforMinistry
• Enter the full URL to the website or Web page. We used http://www.mediaforministry.org
  NOTE: Make sure this URL exactly matches your site URL
• Select the appropriate locale
• Click through the various pages until you get to this page

The App ID is the one you need. Write this down, or copy and paste it into a blank document. You’ll need this number later. If you ever need to come back to it, you can always access your new application by going to the Developer Dashboard while you’re logged into Facebook.

You won’t be able to use this APP ID on more than one blog or website at a time because Facebook matches it to the URL you give them. If you’ve got multiple blogs, you’ll need to create multiple apps to get the unique ID’s.

Step 2: Install the Facebook JavaScript SDK

If you’re curious, you can read more about the JavaScript SDK here.

We’re about to edit your Thesis custom_functions.php file. You can edit this file from Thesis’s interface, or you can download it with an FTP client and edit it from your computer desktop with a plain text editor. Be sure not to use Microsoft Word to edit the .php file.

Also, now would be a good time to create a backup of your custom_functions.php file, just to be safe. You’ll need to use an FTP client to download your custom_functions.php file, and create the backup. The Thesis custom_functions.php file can be found in the Custom folder of your Thesis theme folder. Don’t confuse the custom_functions.php file with the functions.php file.

To edit the custom_functions.php file from within Thesis, first click on Custom File Editor from the Thesis options menu in the WordPress Admin Dashboard. It’s in the column on the left side of your WordPress dashboard.

On the next screen, select custom_functions.php from the pull down menu at the top of the screen, and click on the green button labeled Edit Selected File.

Copy and paste this code into the bottom of your custom_fuctions.php file and save your changes.

/* BEGIN: Facebook Javascript SDK Code */

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

add_action('thesis_hook_before_html','script_facebook');

add_filter('language_attributes', 'add_og_xml_ns');

function add_og_xml_ns($content) {
  return ' xmlns:og="http://opengraphprotocol.org/schema/" ' . $content;
}

add_filter('language_attributes', 'add_fb_xml_ns');

function add_fb_xml_ns($content) {
  return ' xmlns:fb="http://www.facebook.com/2008/fbml" ' . $content;
}

/* END: Facebook Javascript SDK Code */

This code has a few lines added to the bottom of it that you won’t find in the JavaScript SDK that Facebook provides. From our testing of the Like Button though, they’re needed to make Facebook’s social plugins work with WordPress and the Thesis Theme.

Notice the 4th line in the code where it says ‘your app id’
Replace the words your app id with the application id you got from the previous step. It should look something like this: ’123456787654321′

Make sure you Don’t erase the single quotation marks surrounding the app id

Step 3: Tell Facebook What Image To Use For Your Newsfeed Stories

When someone adds a comment after clicking on the like button, Facebook posts a full story in their newsfeed that includes an image from your site. If you don’t specify which image you want to use, Facebook will just pull an arbitrary one from your site.

• Find the Additional Scripts box located in the Thesis Site Options menu.
  
• Paste the code below into the Additional Scripts box, and save your changes. Make sure you replace the words Your Logo Image URL with the actual URL for the logo you want to use.

<meta property="og:image" content="http://Your Logo Image URL"/>

Now that you’ve got the JavaScript SDK installed on your site, you’re ready to make the Like Button appear. We’ll show you how to do that in part 2 of this series.

What do you think of the Like Button?

Photo Courtesy of joeltelling

Share


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