Install GooglePlus Comments Widget on custom Blogger Templates

Google Plus comments on Blogger
Blogger recently implemented Google Plus comments on their Blogger platform, and we know that many bloggers like you have gone ahead and implemented this new functionality to your blogger blogs. But a lot of our readers have been asking us how to add Google Plus comments, or Google Plus comments API  to Blogger custom templates? This feature turns on and off smoothly for default templates. But most bloggers don't use default templates. For them, we have compiled this short tutorial on how to implement Google Plus commenting system on custom Blogger Templates.

Why enable Google Plus comments?

Google Plus comments are much more flexible, and allow you to keep track of your conversations better. They also help keep the discussions organized. Besides, readers can share their comments, or make comments on your Google Plus posts to make them appear on your blog. This expands your reach as your followers' extended circles can see your content too.

Although there's some controversy regarding the usefulness of this commenting system versus the harms (something we discussed at length in our last post), the choice is really yours. But if you do want to implement this feature on your custom Blogger templates, then here's how you can do that.

Google Plus comments

Enabling Google Plus comments

To start off, first log into your Blogger account, and click on the blog you want to add Google Plus comments to. Now, click on the Google+ option on the left sidebar. You must be the admin of a blog to be able to view this option.

Now, you need to upgrade our account, and integrate it with Google Plus if you haven't already done so. You will get a "Get Started" button if you haven't. Follow the simple instructions, and then move on to the next step.

Check the option that says Use Google+ Comments on this Blog - For default templates, this is pretty much all you need to do.

Enable Google Plus comments

For custom templates, here's what you need to do;
  • Click on the Template tab from the left sidebar, and then click on Edit HTML.
  • From the code editor, press Ctrl + F, and search for 'threaded_comments'
  • You should see the following lines of code
<b:if cond='data:blog.pageType == & quot;static_page&quot;'>
   <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
      <b:else/>
      <b:include data='post' name='comments'/>
   </b:if>

</b:if>
<b:if cond='data:blog.pageType == & quot;item&quot;'>
   <b:if cond='data:post.showThreadedComments'>
      <b:include data='post' name='threaded_comments'/>
      <b:else/>
      <b:include data='post' name='comments'/>
   </b:if>

</b:if>
  • Replace the code written in bold with the following line.
<b:include data='post' name='comment_picker'/>
Take care not to make a mistake while editing. And it would be a good idea to backup your template (Backup/Restore option at the top-right), just in case.

For comments to work on custom templates, you need to add the code as well as to enable it. You can see the demo of a custom template above for yourself. I hope this post answered all your questions. If not, please feel free to ask more questions in the comments below. Cheers :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

21 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. The google+ comments in blogger is a really great feature that i have incorporated as well. I believe its a grae feature that most audience would love. Thanks for the tutorial and for sharing...

    ReplyDelete
  2. @Qasim Why are you guys not implement Google + comments/ Facebook Comments/ Discuss
    on your blog.??

    ReplyDelete
  3. @Kunal Ganglani

    I like disqus and im using it on my site...

    ReplyDelete
  4. @Rajesh Nitturu

    First Format Your Template and search for
    <b:if cond='data:post.showThreadedComments'>

    and just below it past

    <div class='cmt_iframe_holder'
    expr:data-href='data:post.canonicalUrl'
    expr:data-viewtype='data:post.viewType'/>

    Note: If you find
    "<b:if cond='data:post.showThreadedComments'>"
    code more than once ,you need to add the above code Before all those codes.!

    ReplyDelete
  5. I am so thankful for your tutorials, they are great. Something isn't working right for me and I am not sure if I am doing something wrong. I added in the code above (because it's custom) but I keep getting this error message.

    Could not load template preview: Error parsing XML, line 500, column 75: Element type "div" must be followed by either attribute specifications, ">" or "/>"

    Hope you can help!! Thanks! ( http://soccermomjennileigh.blogspot.com/)

    ReplyDelete
  6. I can't find the code in my blog template, where should I add them?

    ReplyDelete
  7. This comment has been removed by the author.

    ReplyDelete
  8. I'm super excited that our Blogger team has launched this great new functionality, which brings comments on blogs to Google+ and relevant posts on Google+ to blogs! :)

    ReplyDelete
  9. well i must say you have an tremendous site. Thanks for the information, really it works alot.

    ReplyDelete
  10. Nice post bro well explanations. Thanks to MBT.

    ReplyDelete
  11. I am getting the same error as Jennifer Leigh while adding the code to my template. Please help....

    ReplyDelete
  12. everything is fine but it shows the count of comments but not showing comments.how to get rid of this.widget for blogger

    ReplyDelete
  13. Qasim brothe,.,I can't adding the code.

    Error parsing XML, line 1339, column 75: Element type "div" must be followed by either attribute specifications, ">" or "/>"

    ReplyDelete
  14. very nice post thanks for sharing i need this post bro thanks again you sharing this post :)

    ReplyDelete
  15. where is code written in bold ?

    ReplyDelete
  16. i want to install both comment box in single blog how can i do this any one can help?
    OA Free Tutorials

    ReplyDelete
  17. thanks it really helped me a lot

    ReplyDelete
  18. Already had comment picker on the blog template. Need to change Google Comment box to dark color scheme and unsure how to do this.

    ReplyDelete
  19. Important tricks to add google plus commenting system to blogger. It will help me to add this type of commenting system to blogger. Thanks for sharing with us.

    ReplyDelete