mediasalt

As you may recall, I wrote a post a few weeks ago waxing poetic about Facebook’s Graph API and their awesome new Social Plugins. After clearing my plate of a few larger projects, I set aside some time last week to see how hard it would be to integrate their new commenting system with the news, event and message pages on longhollow.com; turns out it wasn’t too bad, and they actually give you a surprising amount of control over the look and feel. Here’s how to pull it off for your ministry…

Step One: Create a New Facebook Application

Visit facebook.com/developers and click “Set Up New Application” in the top right corner of the page. Don’t be too freaked out by the intense geekiness of this part of the process, as you’re really just naming an application, uploading a few logos to use with it, and writing down a unique key to use with your new commenting system.

When you’re done here, be sure to copy and paste your Application ID, which you can find on the screen below:

Step Two: Update Your HTML Template

Before you add the Comments Box to your site, you’ll need to update the HTML templates where you’re adding Facebook Comments with Facebook’s JavaScript SDK. Again, this isn’t nearly as scary as it sounds.

Add the following line of code inside your page’s opening HTML tag:

xmlns:fb="http://www.facebook.com/2008/fbml"

Add their JavaScript SDK just after your opening BODY tag, and be sure to paste your Application ID in the appropriate location:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YourAppIDHere',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true // parse XFBML
});
};
(function() {
var e = document.createElement('script');
e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
e.async = true;
document.getElementById('fb-root').appendChild(e);
}());
</script>


Finally, add a few META tags to the HEAD of your page if you want to list stuff like your site’s name and an image to use when people “Like” and share your content:

<meta property="og:site_name" content="Your Site Name Here" />
<meta property="og:image" content="http://www.yoursite.com/path/to/image.jpg" />

Step 3: Customize and Embed the Comments Plugin

Still with me? Good… It’s pretty much smooth sailing from here on out. Now that you’ve created your application and prepped your page for the comments plugin, all you have to do is visit the Comments Plugin Page to generate your code. It will look something like this:

<fb:comments xid="1234" width="450" simple="0" css="http://www.yoursite.com/stylesheets/facebook_comments.css?1234"></fb:comments>

A few important notes here:

• The “xid” field is the unique id that’s attached to your string of comments. Change this and your comments are gone. If you’re placing comments on a page that’s generated dynamically, I’d try to generate some sort of unique alphanumeric key automatically.
• Remember that customization I mentioned earlier? This is accomplished by specifying your own style sheet in the fb:comments tag. The only catch here is that Facebook will automatically cache your style sheet, so you’ll need to append a variable to the URL every time you make a change to get Facebook to load the changes (hence the “?1234″ in my example above).
• If you’re building this on a testing server before you make it live on your site, don’t freak out if you don’t see the “Like” button directly above the comments. For some reason this wouldn’t show up for me until I rolled the plugin out to the live site (I’m guessing because Facebook couldn’t see my testing server in order to “Like” the page).

That’s all there is to it! We’ve had the plugin up and running on our site for about a week now (click here for an example), and we’re absolutely loving it. Most of our audience is already logged in to their Facebook account when they visit our site, so commenting and “liking” their favorite content is almost an afterthought. Even better, whenever they interact with our site, this activity is automatically published on their wall (pushing more folks back to our content). It’s a win for everybody.

Do you have this up and running on any of your online properties? Take a minute to show off your sites in the comments below.