Menu
» » » How to add facebook comment tab to blogger blog

A+ A-
Facebook Comments plugin has rapidly replaced third part commenting system like disqus and others. They are now also being crawled and index by search robots. Our first tutorial on facebook comments box and Facebook comment count was widely appreciated by a large audience and helped most of you. Today we have something even more interesting. Thanks to James we learnt a new way of displaying facebook comments in blogger blogs. We will be using a different approach here and only using the javascript code and CSS code from james and keeping other settings entirely different. 

 In today's tutorial we will learn how to show both facebook and blogger comments inside tabs that can be easily switched and toggled. The comment count will appear inside the tabs with an icon thus letting the visitor a much clearer option of commenting. The tabs are clickable to behave like buttons.  The tabs act more like two separate pages that let the user decide which commenting system to choose. The tabs are created using normal JavaScript code used for toggle view. Its extremely easy to install if you follow this tutorial carefully. I am sure most of you were waiting for this therefore it would be fun sharing it today.

Create a Facebook App

In order to control and keep a backup of the comments made on your blog you will need to create a FB application. The steps of creating this app is very simple. Simply follow these easy steps:
Note: Follow my steps carefully in other  to get Facebook comment work on your blog.



  1. Go To Facebook Developers Page
  2. Sign-in and click on my-app then new app,select WWW(website) 
  3. Submit enter your App name , us your "Blog Title" 

 On the next screen select "no" when asked "if test version of another app"
and select category as "community...

 Next click create my App-Id... on the next screen skip Qiuck Start Taps, 
Now you will be landed just at the app dashboard, on the left list menus just after dashboard click settings ....
In APP DOMAIN, enter you blog or website address without "www" , If you use subdomains like "Blogspot.com"  enter it without your-site name...  In CONTACT EMAIL, Enter your email asddress 

 Now click on ADD PLATFORM bellow, At the pop up select Website and fill your details...

 Where is says mobile site, ENTER YOUR Blog URL (yoursite.com/) or (yoursite.blogspot.com/) etc

Where is says website , ENTER YOUR Blog URL (yoursite.com) or (yoursite.blogspot.com) etc. Then click save... After saving copy your APP-ID and save some where...


Creating Tabs For Facebook Comments in Blogger

For blogger comments to display next to tabbed facebook comments, your blogger comment form settings must be set to embedded below post. To show blogger comments below posts do this:
  1. Go To Blogger > Settings > Comments
  2. Set "Comment Form Placement"  to  Embedded below post
Now follow these easy steps one by one:
  1. Go To Blogger > Design > Edit HTML
  2. Backup your template
  3. Click the "Expand widget templates" box
  4. Search for <head>
  5. Just below it add the following code, 
 <meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta content='article' property='og:type'/>
<meta content='Blog LOGO Image Link' property='og:image'/>
<meta content='FACEBOOK APP ID' property='fb:app_id'/>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <script type='text/javascript'>
    function commentToggle(selectTab) {
      $(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;);
      $(selectTab).removeClass(&quot;inactive-select-tab&quot;);
      $(&quot;.comments-page&quot;).hide();
      $(selectTab + &quot;-page&quot;).show();
    }
    </script>

  • Replace Blog LOGO Image Link with the image link of your blog logo. Your logo size should be as small as 30px by 30px in size. If you don't want a logo to display whenever someone shares your comment on his wall then simply delete the yellow highlighted code.
  • Replace FACEBOOK APP ID  with the numeric facebook app Id that you were asked to note down. You can find your Facebook App ID in settings page of the app you created earlier. 
Next Search for <html and replace it with the following code,
<html xmlns:fb='http://www.facebook.com/2008/fbml'
 Note:give space at the end of the above code.

   7.  Now Search for ]]></b:skin>    and just above it paste the following CSS code,
/*--- Tabbed Facebook Comments By MBT ----*/ .comments-page {  background-color: #f2f2f2; width:450px;}
    #blogger-comments-page {  padding: 0px 5px;  display: none;}
    .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
    .comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;}
    .comments-tab:hover { background-color: #eeeeee;}
    .inactive-select-tab { background-color: #d1d1d1;}
  • To change the background colour of tabs content area simply edit #f2f2f2
  • To change the width of the comment box container change width:450px; 
  8.  Next search for this
<div class='comments' id='comments'>
After the first occurrence of the above available code paste this code:
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQdSuUWP2hqm-bKJgphk4UsyhoP2_1p3B-qc4p8HyjeFrW0XuUnlH8agQJOfRF3aY0RV3z3uZPnNAfzKjv_eYLZ4Kpj8A5vTHmLTGQfsGG-RvgRKZuWU3wYAHajm_CZw1iczUV-_9TrWc/s400/fbcomment.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments </div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&quot;#blogger-comments&quot;);' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments </div><div class='clear'/>
</div>

    <div class='comments-page' id='fb-comments-page'>
      <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <div id='fb-root'/>
       <fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by 
<b><a href='http://www.informusblog.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Tips</a></b>
</div>

</b:if>
     </div>


Note: If the above code gave errors then delete the red highlighted lines from the code above.
  • To change the width of the comment box size change the numeric value width='450' . Keep it equal to the width of the comment box container we set earlier in step#7.
  • To change the footer credits size (i.e. Facebook Comments by blogger Widgets), change this value width:440px
  • Keep a difference of 10 pixels between the comment box size and footer size. For example if you set comment box-size to width='450' then set footer-size to width:440px
  • To change the text inside tabs edit Comments for Facebook Tab   and  Comments for Blogger Tab
      9.   Save your template and you are All Done!


Posted by
Tags ,

Share to:

at 6:43 pm

Post a Comment Blogger

We LOVE Comments. Please Talk about this.

Subscribe to: Post Comments (Atom)
 
Top