Integrate Facebook, Blogger and Google+ Comments Altogether in Blogger

This tutorial first appeared on James Simpson's blog where the script writer combined Blogger comments, Facebook comments and Twitter tweet box. But it's the beginning of many bloggers through Google's Blogger when Google didn't release today's most popular Google+ comments so James had to work on Facebook comments, Blogger comments and third most popular threading platform Twitter. But now as the Google+ is becoming most popular as the commenting system when over 90 million active Google account holders can leave comments on blog posts, Google communities, hangouts and everywhere across Google reign. So people is trying to combine both Google+ Facebook and Blogger comments altogether on blogger blogs.


Anyway here is a good news is that I successfully stand out to make the work possible by combining Facebook, Blogger and Google+ commenting system on blogger blogs. But this time i had to depend on James's script and I added and modified some codes there. Now the widget is fully compatible with blogger custom and official template. You may want to check out a demo below

Facebook Comments Series
The tutorial i've divided into two parts

Part 1: Creating Facebook Application ID
Part 2: Integrating Facebook, Blogger and Google+ Comments Together

So it's better to start from the beginning if you dnn't have any Facebook application ID yet. Steps are easily presented so that you can do work successfully.

Step #1: Create a Facebook Application

1. Login to your Facebook Developers Account
2. Choose path Apps > Create a New App

Create a New App

3. Now provide a Display Name, Namespace, Category and hit Create App

Create App

4. Now enter Captcha > Submit
5. You're now on your App Dashboard
6. Copy your App ID and Save on a text file because we will need it later to install facebook comments

Copy App ID

6. Now click on Add Platform (right below your app name)

Add Platform

7. Choose Website
8. Now add your Site URL [Blog or site URL where you want to install Facebook Comments]

Set your website with facebook app

9. You're almost done to create Facebook App for running FB Comments

Step #2: Integration of Facebook, Blogger and Google+ Comments

In this part you will learn how to integrate these 3 commenting systems on your blogger blog. Let's begin

1. Go to Blogger > Login your account
2. Navigate to Template section
3. Backup Your Template [In case you may restore your old template design]
4. Now click on Edit HTML

5. First of all search for <head 
6. Now copy and paste the following code right after <head tag
<meta content='YOUR FB APP ID' property='fb:admins'/>
<meta content='YOUR FB APP ID' property='fb:app_id'/>

<script src='http://code.jquery.com/jquery-latest.pack.js'/>
<script language='JavaScript'>
//<![CDATA[
var jsCommentPages = function(){
    var $activePage,
        $activeTab,
        init = function(){   
            $(".comments-tab").each(function(){
                var $tab = $(this);
                $tab.click(selectPage)
                    .addClass("js-inactive-tab");
                switch ($tab.attr("id")){
                    case "blogger-comments":
                        $tab.prepend("<img

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIY0H8JWd9YABA1H-KiSEmK9l2erDamzgK9SXceMJd-nRI2jOtQYnktHqAhDjdekYOFBJ5iojR4kRPSmHDdgwOYZsWYHMrwgzilizzV4sulZwrvd-DnMqRVtsnyE02hBVlyXo15kJZeYkF/s1600/blogger.png'/>");
                        break;
                    case "google-comments":
                        $tab.prepend("<img

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsyPPmGt53XNCG0WxXjqaPaPXoVsKOllNa3yRZUcTCMVe6QtF3wcE0EGrd0jpHKx-nkU0CwBXLAkkJKFOK45AvVKsYE8uLNwft5s1hENG3xP-Y5A34CvvQ8bmedcsr_ay5DwBhL6lCEkoz/s1600/google+.png'/>");
                        break;
                    case "fb-comments":
                        $tab.prepend("<img

src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ_XDy2qn_1mD5TfeGdTIEkDDIIaSqf2fx_v5VWKW_uEVfvI1LBllznm3jwfdaqCT5qbgyW8QMBXlSY84Cla4W5nAbsxi113sDDXUxy6gxXTbrnZ5D7v5352pKR7wYdvgGTQrr2FXH1SFH/s1600/facebook.png'/>");
                        break;
                }
                $tab = null;
            });
                       
            getTweetCounts();
           
            var $default = $(".js-default-tab:first"),
                strDefault = "#blogger-comments";
            if($default.length > 0){
                strDefault = "#" + $default.attr("id");
            }
            //Set default tab and page Active
            $activeTab = $(strDefault);
            $activeTab.removeClass("js-inactive-tab");
           
            $activePage = $(strDefault + "-page");           
            $activePage.show();
        },
        getTweetCounts = function(){
              $(".js-page-tweet-count").each(
                function(){
                    var $count = $(this);
                    $.getJSON("",
                  {url: $count.attr("href")},
                 function(json){$count.text(json.count);$count = null;});                          
                }
            );          
          },
        selectPage = function() {
            //Set old tab inactive, then set clicked tab active
              $activeTab.addClass("js-inactive-tab");
            $activeTab = $(this);
              $activeTab.removeClass("js-inactive-tab");
           
            //hide active page, then switch to page associated to clicked tab
              $activePage.hide();
              $activePage = $("#" + $activeTab.attr("id") + "-page");
              $activePage.show();
        };
    $("head").append("");
      $("document").ready(init);
}();
//]]>
</script>
Note: Please change YOUR FB APP ID with your App ID you coped from Facebook Developers Page

7. Again search for </b:skin
8. Now copy and paste following CSS styling right before </b:skin tag
/***Comments Tab Styles***/
.comments-page {
    display: none;
    background-color: #FFF;
    width: 580px;
    padding: 15px;
    border-left: 1px solid #DDD;
    margin-left: 1px;
    border-right: 1px solid #DDD;
    border-bottom: 1px solid #DDD;
}
#blogger-comments-page {
  padding: 0px 0px;
}
.comment-form {
  margin: 10px;
}
.comments-tab {
 color: #ffffff;
 float: left;
 padding: 5px;
 margin-right: 7px;
 cursor: pointer;
 font-weight: bold;
 background-color: #f2f2f2;
 border-radius: 5px 5px 0px 0px;
 -moz-border-radius: 5px 5px 0px 0px;
 -webkit-border-radius: 5px 5px 0px 0px;
 position: relative;
 z-index: 10;
 box-shadow: 0px -1px 2px #666;
 -moz-box-shadow: 0px -1px 2px #666;
 -webkit-box-shadow: 0px -1px 2px #666;
 background-image: linear-gradient(#ffffff,#F2F2F2);
 background-image: -moz-linear-gradient(#ffffff,#F2F2F2);
 background-image: -webkit-linear-gradient(#ffffff,#F2F2F2);
}
.comments-tab img { height: 14px;  width: auto;  margin: 0px 3px;}

#blogger-comments,
#blogger-comments.js-inactive-tab:hover {
 background-color: #dd7700;
 background-image: linear-gradient(#E80, #C60);
 background-image: -moz-linear-gradient(#E80, #C60);
 background-image: -webkit-linear-gradient(#E80, #C60);
}
#blogger-comments.js-inactive-tab {
 background-color: #cc6600;
 background-image: linear-gradient(#cc6600, #aa4400);
 background-image: -moz-linear-gradient(#cc6600, #aa4400);
 background-image: -webkit-linear-gradient(#cc6600, #aa4400);
}
#google-comments.js-inactive-tab {
    background-image: linear-gradient(#b21100, #980e00);
   background-image: -moz-linear-gradient(#b21100, #980e00);
   background-image: -webkit-linear-gradient(#b21100, #980e00);
    background-color: #be2400;
}
#google-comments, #google-comments.js-inactive-tab:hover {
    background-color: #b21000;
    background-image: linear-gradient(#e84313, #b21000);
   background-image: -moz-linear-gradient(#e84313, #b21000);
   background-image: -webkit-linear-gradient(#e84313, #b21000);
}
#fb-comments,
#fb-comments.js-inactive-tab:hover {
 background-color: #3B5998;
 background-image: linear-gradient(#6B89D8, #3B5998);
 background-image: -moz-linear-gradient(#6B89D8, #3B5998);
 background-image: -webkit-linear-gradient(#6B89D8, #3B5998);
}
#fb-comments.js-inactive-tab {
 background-color: #1B3968;
 background-image: linear-gradient(#3B5998, #1B3968);
 background-image: -moz-linear-gradient(#3B5998, #1B3968);
 background-image: -webkit-linear-gradient(#3B5998, #1B3968);
}
.js-inactive-tab {
 background-color: #e2e2e2;
 background-image: linear-gradient(#F4F4F4,#DDD);
 background-image: -moz-linear-gradient(#F4F4F4,#DDD);
 background-image: -webkit-linear-gradient(#F4F4F4,#DDD);
}
9. Again search for <body
10. Now copy following Facebook JavaScript SDK and add right after <body tag
    <div id="fb-root"></div>
    <script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'YOUR FB APP ID',
          status     : true,
          xfbml      : true
        });
      };

      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/en_US/all.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
    </script>
Note: Please change YOUR FB APP ID with your App ID you coped from Facebook Developers Page

11. Now the final part of integration. Search for following code
<div class='comments' id='comments'>
Note: This code might be appearing double on your template if it's custom designed. So for your better understanding please search for this line <b:includable id='threaded_comments' var='post'> 
Right below this line your should find the code we mentioned above

12. Now copy following code and paste right after <div class='comments' id='comments'>
<div class='comments-tab' id='blogger-comments' title='Comments from Blogger'>
<data:post.numComments/> Comments
</div>

<div class='comments-tab' id='google-comments' title='Comments with Twitter'>
<data:post.numComments/> Comments
</div>

<div class='comments-tab' id='fb-comments' title='Comments made Facebook'>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>

<div class='clear'/>
</div>

<div class='comments-page' id='google-comments-page'>
<div id='gcomments'/>
<script src='http://apis.google.com/js/plusone.js'/>
<script>
gapi.comments.render('gcomments', {
    href: window.location,
    width: '550',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
</script>
</div>

<div class='comments-page' id='fb-comments-page'>
<fb:comments colorscheme='light' expr:href='data:post.url' numposts='5' width='570'/>
</div>

<div class='comments comments-page' id='blogger-comments-page'>
13. Now make following customization
  1. To change the width of comment box simple change 580px; 
  2. Change the padding of the comment box by changing 15px;
  3. Change the background color of comment box by changing #FFF;
  4. Change the border color of the comment box by changing #DDD;
  5. Change the each tab icon size from 14px; to any value
  6. Change Google+ comments width by changing value 550
  7. Change Facebook comments width by changing value 570 
  8. To change the comments limit for Facebook comments simply change the value 5 that is for five comments to show as default
  9. Obviously change YOUR FB APP ID with your early created FB App ID for your blog other than our entire work will be undone.
14. To change Blogger, Google+ and Facebook tabs icon simply change
Red colored url for Blogger
Purple colored url for Google+
Blue colored url for Facebook
15. Finally save your template and you're successfully done!

Checking Widget and Leave Feedback

I tried heart and soul to make the tutorial helpful so that even newbie can understand the concept and easily make the possibilities of work 100%. I installed the widget on my demo blog with a Custom Template but if you use blogger official template the installation procedure is the same just take actions each step carefully.

If you find any error in installation or even working performance of the widget please don't forget to ask me. I will make the problem solved as you call me for. Peace and blessings pals :)

6 comments

  1. Hello Dear,
    This code works pretty good. But there has a little problem.
    When in a post has no comments, I have possibility to comment only with blogger.
    When I leave a comment with blogger then the tabs for FB and G+ appears.
    I want to see the three tabs, and when there have no comment.

    Could you help me please!

    ReplyDelete
    Replies
    1. Please forgive me it's too late to respond you...,

      Anyway if you still suck don't get worried, just tell me your site URL or you can send me your main template i will manually fix trouble and securely handle you out the template [mail me at info@thewildblogger.com]

      I have served some persons like this way

      Delete
  2. There is a problem my brother added please help
    Example1

    ReplyDelete
  3. yea me too having similar problem amhed. Pls kindly help

    ReplyDelete
  4. To all please listen to me:

    First of all you have to install Google+ comments using this tutorial

    Then follow above steps and you will get the solution. I have manually fixed this problem for one person and you can do so.

    ReplyDelete

About

The Wild Blogger is a technology blog which covers all popular and trending news of the web, tech tutorials, blog, blogging tips and tutorials, seo tips, social media marketing, content marketing and tools. Read More...

Browse by Topics

SEO Social Media Make Money

Blogger Tricks Tutorials

Blogging Tips Photoshop