Add facebook comment box plugin to blogger

It is a awesome plugin for blogger.Because the like and share plugins were the most inspired one,while the facebook released the comment box plugin.It is very useful for making good conversation and get more traffic to blogger.Facebook sharing is the best way to get more traffics.this comment box posts the each comments to users wall.It allows users to comment on your post by logging into facebook,AOL and hotmail ID.The simple steps for getting this plugin as follows. . .

HOW TO ADD COMMENT BOX TO BLOGGER

Create facebook application

Go to Facebook Developer Page for create new application for your blog
Create your apps as follow

Now you will be get in to your setting page.now copy your application ID as shown below

Then make changes on your page as like follow

Go to blogger Dashborad
Click DropDownMenu and select template
Now take backup of your template before making changes on your blogger
Now click edit HTML and proceed and Expand Widget templates
Press Ctrl+F and search the code shown below

<html

Now replace it with code shown below

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

Now find the code shown below

</body>

Now paste the below JAVASCRIPT SDK code to just above/before it.

<div id='fb-root'/>
<script>
//<![CDATA[
(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=YOUR_APP_ID ";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
//]]>
</script>

Replace YOUR_APP-ID with your appID,It's highlighted in above code.

Now Find the code shown below using Control+F

</head>

Now Paste the below Facebook Open graph tags to just above/before it

<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Blogger Whist' property='og:site_name'/>
<meta content='YOUR_BLOG_LOGO_IMAGE_URL' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/bloggerwhist' property='fb:admins'/>
<meta content='article' property='og:type'/>

Replace Blogger Whist with your blog name
Replace YOUR_BLOG_LOGO_IMAGE_URL with your blog logo url
Replace YOUR_APP_ID with APP ID as shown above
Replace http://www.facebook.com/bloggerwhist with your facebook page url
Now Find the code shown below

<data:post.body/>

Now Paste the Code Shown Below just above/before it.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='padding:10px 0px 5px 0px; margin: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='97%'/></div>
</div></b:if>