Google+ comment is a cool new and improved commenting system for blogger, which allows you to create a strong bond with your readers. This new commenting system not only provides extra coverage but also brings additional engagement to any Blogger site. This system provides them the flexibility to share and discuss much more quickly. However, before anyone could leave a comment, they have to get themselves registered on Google plus. It would work for some users, but not everyone wants to put barriers around their site and content. Who does not like freedom? Same thing applies here too. You do not want to force your visitors to starting using platform because, you are endorsing them. Today in this article, we will show you How to create toggle Google+ and Blogger comments in bloggerWhat are the Disadvantages of Google+ Comments?
First and foremost to use this feature, it is must that a person should have an account on Google plus otherwise he cannot leave a reply. Now not every single person on this earth is using this platform so this probably would annoy your visitors.Secondly, this commenting system depends upon the URLs. Unlike Facebook Application ID, it does no stores anything in your API. You would lose your all previous comments if you change the URL of your article or think about re-branding your domain.
- Step#1: The first thing you need to do is to backup your template. After logging in, from the dashboard go to Template >> Edit HTML. Now enable the HTML Editor’s built-in search box and search for the following code. (Quick Tip: Click anywhere on the HTML editor and Press CTRL+F to enable the search box).
<b:includable id='threaded_comments' var='post'>
.
.
.
.
</b:includable>
- Step#2: After finding the code mentioned above, replace it entirely and accurately with the Following code. (Remember: Make sure that the tags are properly closed otherwise you would face errors).
<b:includable id='threaded_comments' var='post'>
<div id='com-header'>
<h6>Comment With:</h6> <img class='com-on' id='com-norm' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxfyzqGH7ULa_H0A7LBNKGZiJSTk4OTvCCRulOqh1zS3_seHCEOS65j1FanTjx9JO-pFyuRM6m8E4-Ccbw74FmBVxejNyTSG2WhkN6t-eI6Ju2ZAG29hlr731ldfTF7lEfPHndq0IMCGYJ/s50/blogger_on.png' title='view Blogger comments'/><h6>OR</h6> <image id='com-gplus' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgCRnIVPhK1smmCa35695r1OxIGsqUL1gELtoZEMYHwtVJQ-uEVPBYBVYZ3eOk2ynsKJzDcO4wGuplqLLkQ5pNt22amxUH-5h2Zdim7_jqUacf0LvUCVestSvOaU-EO-8ibHGewGHE4vuXo/s50/plus_off.png' title='view Google+ comments'/><h6>The Choice is Yours!</h6>
<div id='copyrigtsmbl'><a href='http://www.mybloggerlab.com/2013/04/ow-to-use-blogger-and-google-comments-together.html' id="mblrights">Get This Widget</a></div>
</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 src='https://mybloggerlab.googlecode.com/files/mblgbcom.js'/>
<style>
#gcontainer {
display:none;
}
#com-norm,#com-gplus {
cursor:pointer;
padding:0 5px;
float:left
}
#com-header {
border: 1px solid #d2d2d2;
padding: 10px;
float: left;
width: 580px;
margin-bottom: 20px;
background: #f5f5f5;
}
#com-header h6{
font-size: 20px;
text-transform: uppercase;
font-weight: bold;
float: left;
padding-top: 15px;
margin: 0px;
margin-right: 7px;
margin-left: 7px;
}
#copyrigtsmbl {
float: right;
margin-top: 20px;
border-top: 1px solid #d2d2d2;
margin-right: -10px;
padding-right: 10px;
padding-top: 5px;
padding-left: 10px;
border-left: 1px solid #d2d2d2;
padding-bottom: 5px;
margin-bottom: -10px;
font-size:11px;
background: #fff;
}
#copyrigtsmbl a {
text-decoration:none;
color:111!important;
}
</style>
</div>
</b:includable>
- Step#3: Now once again with the help of search box look for the following code.
<b:includable id='comment_picker' var='post'>
.
.
.
.
</b:includable>
- Step#4: After finding the code as prescribed above, replace it completely and properly with the Following code. (Remember: Try to close the tags properly, so the template does not catch any errors).
<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>
- Step#5: After applying the instructions as mentioned above press the “Save Template” button located at the top of your screen.
Note: If this tutorial worked for you (and it should work), please leave a comment below. Thanks.
