How to Add Facebook Comments to Blogger

I spent a lot of time searching for tutorials on how to integrate Facebook comments with my blog, all to no avail. The most recent one I could find was still too old. This tutorial takes you step-by-step through the process to enable Facebook comments on your blog.


WARNING: I highly recommend backing up your template before doing ANY of this! Blogger is super picky about editing its templates. One mistake and your comments -- or possibly your entire blog -- will be non-functioning!

1. Create a Facebook Application

The first thing you have to do is create an "Application" with Facebook. This is simpler than it sounds. Sign into Facebook and then go to http://developers.facebook.com/setup/.
Enter the name of your blog and its URL:

At the time of this writing this was often giving me an error, however the application would still be successfully created. Go to http://www.facebook.com/developers/#!/developers/apps.php
to see your application.

Note your application ID, you are going to need this!

2a. Add A Gadget

Next, log into your Blogger account and select "Design" for the blog you want to add comments to:

Next. Click "Add Gadget". Preferably as high on the page as you can. Technically this will work anywhere, but your comments will load faster the higher on the page it is.

In the window that pops opens select "HTML/JavaScript"

Leave the title BLANK! Paste the in the following code, but be sure to replace 'your app id' with your actual application ID from Facebook!

Code:

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: '145162752172189', 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);
FB.XFBML.parse();
}());

function FBComment()
{
document.getElementById('facebook-comments').style.display = "block";

document.getElementById('blogger-comments').style.display = "none";
}

function BloggerComment()
{
document.getElementById('facebook-comments').style.display = "none";

document.getElementById('blogger-comments').style.display = "block";
}

</script>

Save the gadget, and then save your template again to be sure.

2b. Add in the Comments Code

This is where it gets tricky, or annoying at any rate. Still under the "Edit Layout Page" select "Edit HTML"

On this page, click "Expand Widgets"

In the textbox with way too much in it, find the line that says "#comments .comment-author{" and above it add:

#blogger-comments {
 display: none;

}

Next, find the line that says "<b:includable id='comments' var='post'>>". BELOW IT ADD:

<div id='blogger-comments'>

<a href='javascript:FBComment()'>Comment With Facebook</a>

Then find the next line that says "</b:includable>". MAKE SURE IT IS THE NEXT
"</b:includable>" or your template will not work! ABOVE IT ADD:

</div> 

<div id='facebook-comments'>
<a href='javascript:BloggerComment()'>Comment With Blogger</a>
<fb:comments/></div>

Finally, hit "Save Template".

Now it should all be working!