About facebook comment box :
comment box like this,
Dark scheme
Create facebook application Id
1] Go To Facebook Developers Page
2] Login your facebook account and click create new app
3] Fill app name and name space and continue
4] After Add your app domain and category.
5] Type your website URL to below place within http://
6] Copy your app Id
Adding comment box to blogger :
Follow me,
1)Go To Blogger >> Design >> Edit HTML
2)Download your template
3)Click the "Expand Widget" box
4)Search <html and just after it give a space and
add this code,(use ctrl + F to search easy)
xmlns:fb='http://www.facebook.com/2008/fbml'
5)Search next <body> and Just after it paste code
given below
<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>
Replace YOUR_APP_ID with your facebook application ID
made before
6)Next search </head>and just after paste following
code
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Comment' 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/onlinesect' property='fb:admins'/>
<meta content='article' property='og:type'/>
* Replace Comment with your blog title/Name.
* Replace BLOG-LOGO-IMAGE-LINK with the image link
of your like.Logo will look good it is in gif format
and having 40px by 40px size.
* Replace YOUR_APP_ID with your FB Application ID made
before
* Replace http://www.facebook.com/onlinesect with your
FB user profile link
7)Now search for <b:includable id='comment-form' var='post'> and just
after it paste 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>
* If you want to use the dark scheme then simply
replace light with dark
* To change the Comments box size,change this value
width='520'
* To change the footer credits size,change this value
width:510px
* Keep a difference of 10 pixels between the box size
and footer size.
For example if you set box size to width='700'
then set footer-size to width:690px
8)Save your template
Source page -