Use Google+ comments and blogger

I have just been through creating my second site.My first site was www.blogshear.com, which i unfortunnaly had to delete for unforseen reasons.And today when i checked back ,i found that Google+ comments system has been becoming prominent.So i thought of bringing both google+ comment system and bloggers default commenting system together.and just to let yu know-I DID IT ! Lol..Now i will be sharing how to add both blogger and google + commenting system to blogger..

Quick Notes.

Adding this codes with automatically enable the Google + commenting option.You do not need to enable it from the blogger dashboard .if you did then undo it..
The previous comment are not lost.
All the image shared are personally created by me you can change it according to your personal choices..
You at least require 1 comment for this to show up..

Adding G+ comments | Blogger comments

Find this code in your template

<b:includable id='threaded_comments' var='post'>
...............................................................................
...................................................
................................................................
</b:includable>

Now replace the entire code [ the whole code searched ] with the below code

<b:includable id='threaded_comments' var='post'>
<div id='comment-header'><center>
<img class='comment-on' id='comments-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVV3VA3v7LvsfN80YI3ptTmXSaFfbmIEdHgJoVA2PPw_WmUH5nvNqNzFJO7mS1pt7qs7BtGZ-o1d0s6ZZhZFnPFlvJ72Rg3y_LMbv9yXGhiPOIyhxeSu8jWrhBw5m-CudX4H4PsMf_9toq/s50/blogger_on.png' title='view Blogger comments'/><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRQWT32Y6fvbkRMc5F8krXX-22FIXEfl2m2IuDLOP7VTOle28Yrt6JioMO3pNITR1xN8kcM4xEXOM76wRe3XJ23PEVGE_paRuRS8iLYIshkCahcidCFxxbLrAqjUMsizydLCCCjXNN/h120/comment-bubbles-big.png' style=''/><image id='comments-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPCvXiugBWqAbiGKgny6m5G5irMgLSz2XKG3d6KK492iribs39c7u8CvMzdTfTTAT97ho_AoYSh_qSHnE_fFU2UhVYQdzdUgXVuR-H7urNoSEHsc-RMGSp9kXOyqrQTE6xu7MlMCL2UP_N/s50/plus_off.png' title='view Google+ comments'/></center>
</div>
<div id='comment-zone'>
<div class='comments' id='comments'>
<a name='comments'/>
<h4><data:post.commentLabelFull/>:</h4>
<div class='comments-content'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='threaded_comment_js'/>
</b:if>
<div id='comment-holder'>
<data:post.commentHtml/>
</div>
</div>
<p class='comment-footer'>
<b:if cond='data:post.allowNewComments'>
<b:include data='post' name='threaded-comment-form'/>
<b:else/>
<data:post.noNewCommentsText/>
</b:if>
</p>
<b:if cond='data:showCmtPopup'>
<div id='comment-popup'>
<iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'>
</iframe>
</div>
</b:if>
<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + "_backlinks-container"'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
<div id='gcontainer'><div id='gcomments'/></div>
<script src='http://apis.google.com/js/plusone.js'/>
<script>
gapi.comments.render('gcomments', {
href: window.location,
width: '750',
first_party_property: 'BLOGGER',
view_type: 'FILTERED_POSTMOD'
});
$('#comments-norm').click(function(){
// switch to normal comments displaying
$('#gcontainer').css('display','none');
$('#comments').css('display','block');
$('#comments-norm').addClass('comment-on');
$('#comments-gplus').removeClass('comment-on');
$('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVV3VA3v7LvsfN80YI3ptTmXSaFfbmIEdHgJoVA2PPw_WmUH5nvNqNzFJO7mS1pt7qs7BtGZ-o1d0s6ZZhZFnPFlvJ72Rg3y_LMbv9yXGhiPOIyhxeSu8jWrhBw5m-CudX4H4PsMf_9toq/s50/blogger_on.png');
$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPCvXiugBWqAbiGKgny6m5G5irMgLSz2XKG3d6KK492iribs39c7u8CvMzdTfTTAT97ho_AoYSh_qSHnE_fFU2UhVYQdzdUgXVuR-H7urNoSEHsc-RMGSp9kXOyqrQTE6xu7MlMCL2UP_N/s50/plus_off.png');
});
$('#comments-gplus').click(function(){
// switch to google plus comments displaying
$('#comments').css('display','none');
$('#gcontainer').css('display','block');
$('#comments-norm').removeClass('comment-on');
$('#comments-gplus').addClass('comment-on');
$('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP_Sy4V8G_6zOkReDv_3C4swacuMafsB5droYGHoq7L7aOLdkzMBZqqX55J5O7mgDRotY6E1H66PB9fvCvoX6qT3pCwl3cQMNfKSe7G77PzpY35ObVfcd-bNLv30Y8x9_QKj03VRW-ZDAU/s50/blogger_off.png');
$('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1SKYuV7RK6FE9CbcBf2u4glIti4e9Y6X2keTQDB3-z03_jfzsvp7v2qKS_P-sf8AfKrFYjHb9zuff4Z_6o3I6abxv9wajOVSYOTJoq-Hzov42umrxSTZeMjzh9KA4dHbKs8YYIHDMMh9A/s50/plus_on.png');
});
$('#comments-norm').hover(
// switch to normal comments displaying
function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVV3VA3v7LvsfN80YI3ptTmXSaFfbmIEdHgJoVA2PPw_WmUH5nvNqNzFJO7mS1pt7qs7BtGZ-o1d0s6ZZhZFnPFlvJ72Rg3y_LMbv9yXGhiPOIyhxeSu8jWrhBw5m-CudX4H4PsMf_9toq/s50/blogger_on.png');}
}, function(){
if (!$('#comments-norm').hasClass('comment-on')){ $('#comments-norm').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhP_Sy4V8G_6zOkReDv_3C4swacuMafsB5droYGHoq7L7aOLdkzMBZqqX55J5O7mgDRotY6E1H66PB9fvCvoX6qT3pCwl3cQMNfKSe7G77PzpY35ObVfcd-bNLv30Y8x9_QKj03VRW-ZDAU/s50/blogger_off.png');}
}
);
$('#comments-gplus').hover(
// switch to gplus comments displaying
function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1SKYuV7RK6FE9CbcBf2u4glIti4e9Y6X2keTQDB3-z03_jfzsvp7v2qKS_P-sf8AfKrFYjHb9zuff4Z_6o3I6abxv9wajOVSYOTJoq-Hzov42umrxSTZeMjzh9KA4dHbKs8YYIHDMMh9A/s50/plus_on.png');}
}, function(){
if (!$('#comments-gplus').hasClass('comment-on')){ $('#comments-gplus').attr('src','https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPCvXiugBWqAbiGKgny6m5G5irMgLSz2XKG3d6KK492iribs39c7u8CvMzdTfTTAT97ho_AoYSh_qSHnE_fFU2UhVYQdzdUgXVuR-H7urNoSEHsc-RMGSp9kXOyqrQTE6xu7MlMCL2UP_N/s50/plus_off.png');}
}
);
</script>
<style>
#comment-zone {
position: relative;
}
#gcontainer {
display: none;
}
#comments-norm, #comments-gplus {
cursor: pointer;
padding: 0px 5px;
}
</style>
</div>
</b:includable>

Now find the following code

<b:includable id='comment_picker' var='post'>
......................................
............................................................
.........................................
</b:includable>

Replace the whole code with the following code

<b:includable id='comment_picker' var='post'>
<b:if cond='data:post.forceIframeComments'>
<b:include data='post' name='iframe_comments'/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
<b:else/>
<b:if cond='data:post.commentSource == 1'>
<b:include data='post' name='iframe_comments'/>
<b:else/>
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='threaded_comments'/>
</b:if>
</b:if>
</b:if>
</b:includable>

If it doesn't work...

You may not have JQuery libraries installed in your template. To add them copy/paste the following code and add it into your Template right before </head>:

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'></script>

All done ready and set for action.With this we have learned how to add both the commenting system together...So enjoy G+ and Blogger together...

Tuesday, 27 August 2013