adf.ly - shorten links and earn money!

How To Integrate Facebook Comment Box in Blogger

Recently Facebook has launched many social plugins and web developers for bloggers. Their much improved Facebook comment box. Facebook comment box is one of the useful tool for bloggers to increase conversations. So, if you interested to integrate Facebook comment box on your blog and change blogger comment into Facebook comment box? This entry is just exact for you. Let's do it.

Note : Before make any changes, back up your template.

1. Visit Facebook Developer Page. Enter your blog name, URL and click on Create application.


2. After that, copy the APP ID.


3. Then, go to Edit Setting



4. If you using blogspot, follow below instruction,



5. But if you using other domain like .com, follow instruction below,


6. Save your App.


ADD FACEBOOK COMMENT BOX

1. Go To Blogger >> Design ->> Edit HTML

2. Check the "Expand Widget Templates" box


3. Search for <html and just after it add this code,

xmlns:fb='http://www.facebook.com/2008/fbml'

4. Now search (Ctrl+F) for,
<body>

5. Just after it, add the below code,
<div id='fb-root'/>
<script>
    window.fbAsyncInit = function() {
    FB.init({
      appId  : &#39;YOUR_APP_ID&#39;,
      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(&#39;script&#39;);
      e.src = document.location.protocol     &#39;//connect.facebook.net/en_US/all.js&#39;;
    e.async = true;
      document.getElementById(&#39;fb-root&#39;).appendChild(e);
    }());
</script>

6. Change YOUR_APP_ID with your App ID number.

7. And then, search (Ctrl+F) </head> and just above it paste the below code,
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='YOUR BLOG NAME' 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/YOUR _FACEBOOK_USERNAME' property='fb:admins'/>
<meta content='article' property='og:type'/>

Replace the red code with your details.

8. Now, search (Ctrl+F) for this ;
<b:includable id='comment-form' var='post'>

9. After it paste the code given below,
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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>
</b:if>

If you want to use the dark scheme replace light with dark

To change the comments box width, change this value width='520'

#UPDATE
10. Search (Ctrl+F) <fb:comments

11. Replace it with,
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> <fb:comments migrated='1'
12. Save your template.


HIDE BLOGGER COMMENT

Now you need to hide default blogger commenting system. So navigate to Settings > Comments and select hide and save settings.



DONE! See the result.

With this, your previous blogger comment will be hidden.


Do you like it? Recommend it!

6 comments:

  1. Replies
    1. Xpa, yang ni aku dah update baru. Selamat mencoba. Semoga berjaya! :)

      Delete
  2. @Alfian J. eh? failed? tgk demo tu..aku buat sma jak lgkh tu.

    Atau kamu pastekan saja kod tu di bawah <data: post.body/>

    Pasti boleh..:a

    ReplyDelete
  3. Sudah cuba ni Fian. Comment Box tu cuma ngam untuk HomePage ja. Kalau komen bagi setiap post, ada cara/tutorial yang lain. Aku cuba buat tapi masalah Notification pula. Maksudnya, Admin nda tau di mana yang kena komen terkini.. Malas aku, aku Pause ja uji kaji tu.. :l

    ReplyDelete

Drop your comment. Ask or suggestion.

Join us on Faceboook Page too.