The Facebook comment form is one of the recent blogging resources facebook has developed for bloggers, and it helps the bloggers in getting most comments and more social media exposure. 
This Facebook comment plugin looks simple, cool and it allows users to comment on your blog by logging into Facebook, thus giving more traffic and exposure since there comments with links to your blog would be posted on their walls.
Simply follow this guide to add this to your blog.
1. Login to facebook, then go to Facebook developers page to create a new app.
2. Now create a new app with your blog details as Your Blog Name for App Name and Your Blog Title for AppNameSpace, then click on continue.
3. Now after it’s been created, note down your APP ID.
4. Now go to your blogger dashboard –> template –> Edit Html (Tick expand widget template option).
5. search(Ctrl+F) for <html and replace it with the following code.
<html xmlns:fb='http://www.facebook.com/2008/fbml'
6. Find For <body> tag and add the following code just after it.
<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. Now search for </head> and add these open graph meta tags just above it.
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='Oscar Mini' property='og:site_name'/>
<meta content='YOUR_BLOG_LOGO_IMAGE_LINK' property='og:image'/>
<meta content='YOUR_APP_ID ' property='fb:app_id'/>
<meta content='http://www.facebook.com/oscarmini' property='fb:admins'/>
<meta content='article' property='og:type'/>
Note::
- Replace Oscar Mini with your blog name.
- Replace YOUR_BLOG_LOGO_IMAGE_LINK with your blog logo image url.
- Replace YOUR_APP_ID with your app id.
- Replace http://www.facebook.com/oscarmini with your Facebook page url.
8. Now search for <data:post.body/>, then directly below it, copy and paste the code below
<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 style='color:#fff; background-color:#bbb;border: solid 1px #ddd; font-size:10px; padding:3px; width:550px;'><a href='http://oscarmini.com/how-to-add-facebook-comments-box-form-to-blogger-blogs' target='_blank'><b>Wanna get this to your blog? Clik Here</b></a></div></div>
</b:if>
If your template has more than one <data:post.body/>, paste the above code below each seperately, save and view your blog till you get the one that works for you
9. Save your Template and View your Blog.
10. And you are done.
You’ve successfully added a facebook comment box plugin to your blogger blog with my 10 steps. SImply hit the share buttons to show your appreciation
2 Comments
Hey, great post and it really helped me get the facebook comments working on my blog. I wanted to get some SEO out of it but the iframe issues (search engines won’t crawl iframes) made this impossible and, of course, the only way I could find to pull the text of the comments was through php scripts (which blogger doesn’t support). Soooo, i wrote a php script and threw it on my server and then called it as an object on my blogger template and viola! – it worked.
In kind, I thought I’d share it with you and maybe add a little value to your already great post. Just paste this code in your blogger template above or below the commenting code and it should be good to go. If you want to view the results temporarily change the opening div tag to just <div> and refresh the page(s) to see how Facebook feeds the text. Hope this helps some of you!
One more note, the php script grabs the referring URL(of wherever you’ve put the html script) so it should work for any and all posts/pages dynamically (including canonical URLs) – I thought that was a nice touch 😉
<!– BEGIN Graph API comment pull and text insertion in an invisible div for SEO purposes –>
<div class='separator' style='clear: both; display: none; text-align: center;'><object data='http://sukithookahs.com/get_comment_text.php' height='60px' type='text/html' width='450px'>
</object></div>
<!– END Graph API comment pull and text insertion in an invisible div for SEO purposes –>
A final note, I AM NOT a programmer so this isn’t the prettiest thing in the world, but it works great…
That was Awesome. Thanks for finding time to share your findings with us. You Rock Dude.