How To Integrate Facebook Comment Box in Blogger ~ HOW-TO HOUSE

	Share
Tweet

Recently Facebook has launched many social plugins and web developers for bloggers. Their much improved Facebook comment box. Facebook comment box is one of the useful tool for bloggers to increase conversations. So, if you interested to integrate Facebook comment box on your blog and change blogger comment into Facebook comment box? This entry is just exact for you. Let's do it.

Note : Before make any changes, back up your template.

1. Visit Facebook Developer Page. Enter your blog name, URL and click on Create application.

2. After that, copy the APP ID.

3. Then, go to Edit Setting

4. If you using blogspot, follow below instruction,

5. But if you using other domain like .com, follow instruction below,

6. Save your App.

ADD FACEBOOK COMMENT BOX

1. Go To Blogger >> Design ->> Edit HTML

2. Check the "Expand Widget Templates" box

3. Search for <html and just after it add this code,

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

4. Now search (Ctrl+F) for,

<body>

5. Just after it, add the below code,

<div id='fb-root'/>
<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>

6. Change YOUR_APP_ID with your App ID number.

7. And then, search (Ctrl+F) </head> and just above it paste the below code,

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='YOUR BLOG NAME' property='og:site_name'/>
<meta content='BLOG-LOGO-IMAGE-LINK' property='og:image'/>
<meta content='YOUR_APP_ID' property='fb:app_id'/>
<meta content='http://www.facebook.com/YOUR _FACEBOOK_USERNAME' property='fb:admins'/>
<meta content='article' property='og:type'/>

Replace the red code with your details.

8. Now, search (Ctrl+F) for this ;

<b:includable id='comment-form' var='post'>

9. After it paste the code given below,

<b:if cond='data:blog.pageType == "item"'>
<div style='padding:0px 0px 0px 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='520'/></div>
</div>
</b:if>

• If you want to use the dark scheme replace light with dark

• To change the comments box width, change this value width='520'

#UPDATE

10. Search (Ctrl+F) <fb:comments

11. Replace it with,

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <fb:comments migrated='1'

12. Save your template.

HIDE BLOGGER COMMENT

Now you need to hide default blogger commenting system. So navigate to Settings > Comments and select hide and save settings.