Improve the comment system using Facebook Comment on Blogger

If you want to replace new comment system with your basic Google comments system on Blogger. You can add Facebook comment on your Blogger. Facebook comment is a threaded comment system with analytic. It improves the reader’s social Network integration.

Why do you want to replace the Google Comment with Facebook comment?

Facebook comment is an advance system with threaded comment facility with respect to the general Google Comment system. It has also the spam filtering technology and advance hack proof system. This comment system has the social network integration that helps to make socialize your website among users.

This tutorial help you that how to add Facebook Comment on Blogger step by step.

Generate Facebook App ID:

1. Go to Facebook Developer page and click on Create a New App option.
2. Fill the App name as your website name and click on Create App option.

3. Now submit the Captcha for security check.
4. Now you go to a new page and copy the App ID.

Add the Facebook comment widget on Blogger:

1. On the Blogger Dashboard click on Template >> Clock on Edit HTML option.
2. Now find the <html and just after give a space and paste the below code


xmlns:og='http://ogp.me/ns#

3. Now find the <body> and just below paste the below code


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

4. Replace YOUR_APP_ID with Facebook App ID.
5. Now find the </Head> and just above it paste the below code


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

6. Replace YOUR_APP_ID with Facebook App ID.
7. Now find the <b:includable id='comment-form' var='post'> and just after it paste the below code


<b:if
cond='data:blog.pageType == "item"'>
    <div
    style='padding:20px 0px 5px 0px; margin:0px 0px 0px 0px;'>
        <script
        src='http://connect.facebook.net/en_US/all.js#xfbml=1'
        />
        <div>
            <fb:comments
            colorscheme='light'
            expr:href='data:post.url'
            expr:title='data:post.title'
            expr:xid='data:post.id'
            width='550'
            />
        </div>
                </div>
                </b:if>