How To Add Facebook Comment Box Plugin To Blogger?

In 2009 Facebook Developers introduced their best social plugin is “Facebook Comment Box”.This plugin can be embedded into any blog,websites and also in google blogger.In the starting of this plugin embedded in websites make some difficult work and sometimes it don’t work.Our senior blogger Max (founder of Allblogtools) made this easy to work perfect on any bloggers blogs.Using below option you can also save previous comments.

Part1

1.Login to your Facebook.
2.Then go to Developers Page
3.Select “Create App”

4.Now you will see pop-up window as below

5.In App Name-write your blog title
6.Leave App Namespace and Web Hosting
7.and click on continue.

8.Enter Captcha and click on Submit.
9.In the new window click on Edit App

10.Fill required fields as below image

11.Save changes.
12.Now copy the App Id code to notepad

Part2

1.Log in to blogger.
2.Template >> Edit Html
3.Tick at Expand Widgets.
4.Search for <html and just after it give a space and add this code,

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

5.Next Search For any of the codes

<body>

(or)


<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

6.Just after it paste 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>

7.Replace App Id with that you saved in Notepad.

8.Next search for </head> and just above it add below code

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Blogger Tricks' 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/bloggertricks' property='fb:admins'/>
<meta content='article' property='og:type'/>

9.Make these changes(customizations):

a.Replace Blogger Trickswith Title of your blog

b.BLOG-LOGO-IMAGE-LINK' with Your blog logo.

c.Replace 'YOUR_APP_ID with that code saved in notepad.

d.Change http://www.facebook.com/bloggertricks with facebook page id.

10Now,search for the code

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

11.Just 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 style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:510px;'>Facebook Blogger Plugin: Bloggerized by <b><a alt='blogger templates' href='http://www.allblogtools.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='blogger templates'>AllBlogTools.com</a></b> Enhanced by <b><a alt='blogger widgets' href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>MyBloggerTricks.com</a></b></div></div>
</b:if>

12.Save template and you are done.

Pages