This tutorial will take you through the steps of adding a facebook comment box to your Blogger blog.
The Facebook comments will take the place of Blogger comments.
This tutorial is intermediate to difficult. Please save your template before making any edits.

Step A
repcomment



1. Click on “Create New App” in the right hand corner of the developers page.

2. Fill in the popup form with your App Display Name, App Namespace & Agree to the terms & conditions then click “Continue”.

repcomment1
*Note: You may be asked to verfiy additional security at this point. Follow the prompts through the security process if asked.

3. Once through the security screen you’ll be given an App ID – copy and paste into notepad (you’ll soon need this number).

repcomment2

4. Type your domain into “App Domain”. This will be blogspot.com if your blog url has blogspot.com at the end. If you’ve purchased a custom domain type your domain in the space.

repcoment3

5. Under the title “Select how your app integrates with Facebook” click “Website” to open the form. Type your full url into this box.

repcoment4

6. Click “Save Changes”.

repcoment5
*Note: To moderate comment box goto https://developers.facebook.com/tools/comments.

Step B 

(Edit Blogger Template)

1. Goto your Blogger dashboard (the old interface) click design > edit html

2. Place the following code after the <head> tag in your template replacing YOUR_APPLICATION_ID with your App ID.

<meta property="fb:app_id" content="YOUR_APPLICATION_ID"/>


3. Find <html and change to this code
<html xmlns:fb="https://www.facebook.com/2008/fbml"

4. Tick the box to Expand Widget Templates.

5. Find the code <div class='post-footer-line post-footer-line-2'>
and paste the following code after.

<b:if cond='data:post.isFirstPost'>
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
</b:if>
<a expr:href='data:post.url + &quot;#fb-root&quot;'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>

6. Find the code <div class='post-footer-line post-footer-line-3'>
and paste this code after

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>(function(d){
var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id))
{return;}
js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
<div style='margin: 20px 0 0 0;'>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl'
expr:title='data:post.title' expr:xid='data:post.id' width='900'/>
</div>
</b:if>

*Note: You can change the width=’900′ to your size preference.

7. Save Template.

8. Goto the Blogger Settings tab > Comment Location : "Hide" & Save Setting.