How to Add Facebook comments to a blogger ~ American News Blogger :)

Tuesday, May 13, 2014

How to Add Facebook comments to a blogger

12:10 AM    

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.

It Would be look like this
*Note: To moderate comment box goto https://developers.facebook.com/tools/comments.

    Step B

  • Edit Blogger Template
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.
<b:if cond='data:post.isFirstPost'>   
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[0].appendChild(js);
}(document));</script>
</b:if>
<a expr:href='data:post.url + &quot;#fb-root&quot;'><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
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='fb-root'/>
<script>(function(d){
 var js, id = &#39;facebook-jssdk&#39;; if (d.getElementById(id)) {return;}
 js = d.createElement(&#39;script&#39;); js.id = id; js.async = true;
 js.src = &quot;//connect.facebook.net/en_US/all.js#xfbml=1&quot;;
 d.getElementsByTagName(&#39;head&#39;)[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.