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
Part1: Add Facebook Comments on Blogger Blogs Part2: Add Facebook and Blogger Comments Together Using Toggle Par3: Add Facebook, Blogger and Google+ Comments Together
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 Account2. Choose path Apps > Create a New App
3. Now provide a Display Name, Namespace, Category and hit 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
6. Now click on Add Platform (right below your app name)
7. Choose Website
8. Now add your Site URL [Blog or site URL where you want to install Facebook Comments]
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 begin1. 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'/>Note: Please change YOUR FB APP ID with your App ID you coped from Facebook Developers Page
<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>
7. Again search for </b:skin
8. Now copy and paste following CSS styling right before </b:skin tag
/***Comments Tab Styles***/9. Again search for <body
.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);
}
10. Now copy following Facebook JavaScript SDK and add right after <body tag
<div id="fb-root"></div>Note: Please change YOUR FB APP ID with your App ID you coped from Facebook Developers Page
<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>
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'>13. Now make following customization
<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'>
- To change the width of comment box simple change 580px;
- Change the padding of the comment box by changing 15px;
- Change the background color of comment box by changing #FFF;
- Change the border color of the comment box by changing #DDD;
- Change the each tab icon size from 14px; to any value
- Change Google+ comments width by changing value 550
- Change Facebook comments width by changing value 570
- To change the comments limit for Facebook comments simply change the value 5 that is for five comments to show as default
- Obviously change YOUR FB APP ID with your early created FB App ID for your blog other than our entire work will be undone.
Red colored url for Blogger15. Finally save your template and you're successfully done!
Purple colored url for Google+
Blue colored url for Facebook
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 :)
Hello Dear,
ReplyDeleteThis 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!
Please forgive me it's too late to respond you...,
DeleteAnyway 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
hi
ReplyDeleteThere is a problem my brother added please help
ReplyDeleteExample1
yea me too having similar problem amhed. Pls kindly help
ReplyDeleteTo all please listen to me:
ReplyDeleteFirst 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.