Add Facebook Comments Tab below Blog Posts � Facebook Comments for Blogger

by

In This 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.
This is extereme and Mash Widget for your blogger you can use both comment system default and facebook plus you can handle facebook commets because you will use official default freely facebook your own build apps that you can completely access because you will be have api and secret.
This Comments box has a lot of latest features.

  • Comments Counting show
  • Manage Facebook and Blogger Comments
  • Comment as multiple social network
  • Easy Widget and customizable
  • No Premium Script simple and freely
  • Only 5 Mints work no additional and JavaScript coded
facebook comments for blogger very important it�s increase pageviews, and traffic and social rank.

So Lets Start the Tutorial:
Requirements :
Facebook Application api key and secret key
Need to add code into your blog
Step 1 >> You need a Api and secret for handling facebook comments.

So you Got your Api key and secret
Step 2 >>

  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,
Before taking any step must Make Backup For Your Blog : How to Make Blogger Backup & Template Backup

<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.

Step 4
Search for <html and replace it with the following code,

<html xmlns:fb=’http://www.facebook.com/2008/fbml’ 

 
Note: Give a space at the end of the above code.

Now search for the ]]> and just above it paste this Css code 

/*— Tabbed Facebook Comments By MyTricksTime.com —-*/
.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=’http://2.bp.blogspot.com/-rae4j6NaLkY/T1JrjUEIkkI/AAAAAAAAGBc/PzwMIo1g1Is/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.mybloggertricks.com/’ style=’text-decoration:underline; color:#fff;’ target=’_blank’ title=’Blogger Widgets’>Blogger Widgets</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!
Visit your blog to see it working just fine. 🙂

Note: If you have activated blogger threaded comments then the Tabs will display only when at least one comment is posted in bloggerThat is all every thing is completed now you can refresh your blog :) note if you have custome designed theme before do anything think about it. and make backup.

You can Handle your comments by visiting Facebook/tools/Comments 
Thats it Hope you like it :)

Enjoy Guys! and don’t forget to post your comments. � MyTricksTime.com

Leave a Comment