© Don't Republish Any Article Of This Site √

17 May, 2013

Blogger and Google+ Comments Together With Toggle


SOCIALIZE IT →
Blogger and Google+ Comments
Google+ commenting system is a latest released commenting system for Blogger platform. But there are some disadvantages of using Google+ comments only. Keeping this thing in eye, our expert web developers got idea of using Blogger and Google+ together with toggle. So, they created this new commenting system and shared it among all the Bloggers. So, Today I'm going to share that new commenting system with my loyal readers. For enabling only Google+ Comments, You used to enable it from Google+ page but here, you don't need to enable from there because we're going to use the coding of it. Before we get into the tutorial, let me explain something about this.

Blogger & Google+ Comments With Toggle

So this is a great idea of using Google+ and Blogger Commenting system together on your blog. The main thing that your readers will not be focused on using any specific commenting system. They can using any one or both of these system with the toggle system. This new system shows the Blogger and G+ icon on the header of the comment form which will help your readers to choose any comment form. That comment header doesn't shows when your post have 0 comments, It means your post must contain about 1 or 2 comments to enable G+ form on that post. 

Why We Should Use Both Commenting Systems ?

I already told you that the main thing is that you can't force your readers to use choose only G+ comment form and in other G+ form will make your blog more and more engaged with Google which can bring benefit to your blog in SEO or ranking. So Google+ comment form is must and the reason of using Blogger comments is due to some disadvantages of G+ comments. 

Disadvantages Of Google+ Comments

  • Only Google+ Users Can Comment
  • It Doesn't Send Notifications Of Comments To Admin
  • URL Based Commenting System, If URL Changed = Comments Gone!

Enabling Both Systems

So, After this article, You may want to enable both system in your blog. You can enable it in your blog just follow the simple steps below.
  • Go To Blogger >> Template >> Backup Your Template
  • Click Edit HTML and Search For The Below Code
<b:includable id='threaded_comments' var='post'>
.
.
.
.
</b:includable>
  • Copy The Below Code & Replace It With Above Searched Code 
 <b:includable id='threaded_comments' var='post'>
<div id='comment-header'>
  <center> <img class='comment-on' id='comments-norm' src='https://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png' title='view Blogger comments'/><a href='http://www.mytechcafe.com/'><img src='http://2.bp.blogspot.com/-Ds_2aMPL-SU/UZWsS_WLwuI/AAAAAAAAGzA/yfbDA1Gss9A/s1600/blogger+or+googleplus.png'/></a><image id='comments-gplus' src='http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/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 + &quot;_backlinks-container&quot;'>
       <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(&#39;gcomments&#39;, {
    href: window.location,
    width: &#39;650&#39;,
    first_party_property: &#39;BLOGGER&#39;,
    view_type: &#39;FILTERED_POSTMOD&#39;
});
$(&#39;#comments-norm&#39;).click(function(){
// switch to normal comments displaying
$(&#39;#gcontainer&#39;).css(&#39;display&#39;,&#39;none&#39;);
$(&#39;#comments&#39;).css(&#39;display&#39;,&#39;block&#39;);
$(&#39;#comments-norm&#39;).addClass(&#39;comment-on&#39;);
$(&#39;#comments-gplus&#39;).removeClass(&#39;comment-on&#39;);
$(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png&#39;);
$(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png&#39;);
});
$(&#39;#comments-gplus&#39;).click(function(){
// switch to google plus comments displaying
$(&#39;#comments&#39;).css(&#39;display&#39;,&#39;none&#39;);
$(&#39;#gcontainer&#39;).css(&#39;display&#39;,&#39;block&#39;);
$(&#39;#comments-norm&#39;).removeClass(&#39;comment-on&#39;);
$(&#39;#comments-gplus&#39;).addClass(&#39;comment-on&#39;);
$(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png&#39;);
$(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png&#39;);
});
$(&#39;#comments-norm&#39;).hover(
// switch to normal comments displaying
function(){
if (!$(&#39;#comments-norm&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-nfrkoUYsV-E/UXVi6W7CI8I/AAAAAAAAILo/uCS3thePKXU/s50/blogger_on.png&#39;);}
}, function(){
if (!$(&#39;#comments-norm&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-norm&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-ZDxk9ANrLNE/UXVi6ulLzvI/AAAAAAAAILg/jiUy8rJS_Ok/s50/blogger_off.png&#39;);}
}
);
$(&#39;#comments-gplus&#39;).hover(
// switch to gplus comments displaying
function(){
if (!$(&#39;#comments-gplus&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh3.googleusercontent.com/-oNlD347wl3k/UXVi7AiBdHI/AAAAAAAAILc/NxAyb8fwEfI/s50/plus_on.png&#39;);}
}, function(){
if (!$(&#39;#comments-gplus&#39;).hasClass(&#39;comment-on&#39;)){ $(&#39;#comments-gplus&#39;).attr(&#39;src&#39;,&#39;http://lh6.googleusercontent.com/-wnTb7SHAGEE/UXVi6xoHXAI/AAAAAAAAILY/6vx5Em5w8MI/s50/plus_off.png&#39;);}
}
);
</script>
<style>
#comment-zone {
position: relative;
}
#gcontainer {
display: none;
}
#comments-norm, #comments-gplus {
cursor: pointer;
padding: 0px 5px;
}
</style>
</div>
</b:includable>
  • Replace 650 With The Width Of Google+ Form Without (px).
  • Once Again Search For The Below Code 
<b:includable id='comment_picker' var='post'>
.
.
.
.
</b:includable>
  • Replace Above Searched 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>
  • Now Click Save Template & You Have Done

Last Words

So, Friends It was our Blogger & Google+ Comments With Toggle. I hope you have installed it correctly and it will help you in engaging your blog with G+. The credits for this widget goes to David Kutcher who developed this widget. If you are facing any problem in installing this then leave a comment below. Don't forget to subscribe us and Take a lot of care of you are your family. 

3 comments:

  1. haha.. very nice and most simple tutorial !!!. I LOVE YOU BRO... haha... best tutorial !
    its works very fine !

    ReplyDelete

 

Recent Comments

Recent Comments Widget

Recent Posts

Copyright © 2012-2013. All Rights Reserved | My Tech Cafe | Designed By

Home | Contact Us | About Us | Privacy Policy |Top