Thursday, May 10, 2012

You are here :» » » Facebook Comments for Blogger

Facebook Comments for Blogger

Thursday, May 10, 2012    4 comments

How to put Facebook comment box for Blogger blog. The goal is the blog will get more visitor and comments. Because most people prefer to comment on the blog on Facebook than we are, then we pinch the ball entering the Facebookers comments to our blog automatically. How to put Facebook comment box for Blogger blog. ? Just following this tutorial bellow.


1. Disable Default Comments
   The first thing you should do it to disable blogger default comments. because you
   don’t want to have 2 comments forms. go to your blogger account, navigate to
   settings >>post and comment>>hide comment and then save setting,
   look at the picture bellow :
square
2.  Generate your Facebook App ID.
     Go to Facebook Developers
square
Next step
square
Coppy your apps ID and save to notepad.
3.  Add Codes to Your Template
     You must add the following codes to your blogger template to ensure that the 
     comments box  will  work for your blog in the right way. and in this step we’ll 
     add the following codes,
     a.  xmlns attribute
     b.  Open Graph protocol tags
     c.  SDK script

Adding the xmlns attribute :

Please go to your blogger account again, and navigate to, layout >> edit html >> and check Expand Widget Templates then find the following code,(use ctrl+f) :
<html
You’ll find it on the top of your code. second or third line, and after it add the following code,
xmlns:fb='http://www.facebook.com/2008/fbml'
square
In my template the code is located in third line, but in other template ussualy located after <html  code , like this <html xmlns:fb='http://www.facebook.com/2008/fbml'  expr:dir='data:blog..............2005/gml/expr'>

Adding  Open Graph protocol tags  :
Search for code <b:skin>, and after it add the following code,
 <b:if cond='data:blog.pageType == "item"'><meta   expr:content='data:blog.pageTitle' property='og:title'/><meta   expr:content='data:blog.url' property='og:url'/><b:else/><meta   expr:content='data:blog.title' property='og:title'/><meta   expr:content='data:blog.homepageUrl' property='og:url'/></b:if><meta   content='Your Blog Name' property='og:site_name'/><meta   content='http://google.com/help/hc/images/logos/blogger_logo.gif'   property='og:image'/><meta content='Your Apps ID'   property='fb:app_id'/><meta content='Your Fb Admin Code'   property='fb:admins'/><meta content='article'   property='og:type'/>
Place this code above <b:skin>, and the code will look like this (look at the picture bellow) :
square
Please don’t forget to change Your Blog Name, Your Apps ID ( you got it in the previous step ), and Your Fb Admin ID. How to get your fb admin ID ? If you use Google Chrome, go to your Fb, push mouse right button, select view page source and you will get your fb ID, see the picture bellow :
square
Adding the SDK script Code :
Search for code <body and after it add the following code,
<div id="fb-root"></div> <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> 
 Look at the picture bellow :
square
Adding facebook comment box code
1.  Find this code: <div class='post-footer-line post-footer-line-3'> or (if not) find 
     this code: <p class ='post-footer-line post-footer-line-3 '>
2.  Add the following code under the code
    <div class='post-footer-line post-footer-line-3'>


<b:if cond='data:blog.pageType == &quot;item&quot;'><div class='fb-comments' data-num-posts='10' data-width='450' expr:data-href='data:post.url'/></b:if>


"10 are  the number of posts will be displayed, 450 is the width of the comment coloumn will be displayed . If this code didn't work, try this code bellow :


<b:if cond='data:blog.pageType == &quot;item&quot;'> <div id='fb-root'/>
<script src=' http://connect.facebook.net/en_US/all.js#appId=224056187697813&amp;xfbml=1'/>
<fb:comments expr:href='data:post.url' num_posts='10' width='450'/>
</b:if> 
The red number is your apps ID, put the code above this code :
</b:includable>
<b:includable id='status-message'>
Look at the picture bellow :
square
Save your templates and see the result.

Posted by: Denmas Tugino
Godheg Updated at: Thursday, May 10, 2012

avatar

About author If you are interested with this article, please leave a comment. Your comment will be helpful for improvement of this article in the future. Thank for your visit, hopefully you get what you need.

4 komentar:

  1. 前璡June 16, 2012 at 3:01 PM

    Hello, I can't save the changed xmlns attribute, blogger keeps staying that it has error. Any suggestion?

    ReplyDelete
  2. 前璡June 17, 2012 at 7:23 AM

    Thanks for leaving your comment in my blog. But the problem persist and I didn't change anything in the template. My work around is just to post the code, generated by the Facebook social plugin, one by one on each post. In this case, you may see that for post older than 2012, there are no comment box...

    ReplyDelete
  3. 前璡June 18, 2012 at 10:02 AM

    Thanks you! Although I can't use the code that you provided, error message: bX-2lxuel... But I was able to add fb='http://www.facebook.com/2008/fbml' after languageDirection and everything are working fine now. Thanks again for your help.

    ReplyDelete