Adding Facebook Comments to Blogger
This tutorial will take you through the steps of adding a facebook comment box to your Blogger blog.
The Facebook comments will take the place of Blogger comments.
This tutorial is intermediate to difficult. Please save your template before making any edits.
- Create an app on Facebook – http://developers.facebook.com/apps/
Step A
It Would be look like this
*Note: To moderate comment box goto https://developers.facebook.com/tools/comments.
- Edit Blogger Template
Step B
B1. Goto your Blogger dashboard (the old interface) click design > edit html
B2. Place the following code after the <head> tag in your template replacing YOUR_APPLICATION_ID with your App ID.
<meta property="fb:app_id" content="YOUR_APPLICATION_ID"/>
B3. Find <html and change to this code <html xmlns:fb="https://www.facebook.com/2008/fbml"
B4. Tick the box to Expand Widget Templates.
B5. Find the code <div class='post-footer-line post-footer-line-2'>
and paste the following code after.
and paste the following code after.
<b:if cond='data:post.isFirstPost'>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
</b:if>
<a expr:href='data:post.url + "#fb-root"'><fb:comments-count expr:href='data:post.canonicalUrl'/> comments</a>
B6. Find the code <div class='post-footer-line post-footer-line-3'>
and paste this code after
and paste this code after
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<script>(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));</script>
<div style='margin: 20px 0 0 0;'><fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='900'/></div>
</b:if>
*Note: You can change the width=’900′ to your size preference.
B7. Save Template.
B8. Goto the Blogger Settings tab > Comments then tick the “Hide Comments” & Save.
