Show Google+ comments only on Blogger posts with a certain label

Note: this post is no longer accurate, as Google+ is now defunct. 


Here is a simple piece of code that will let you add the Google+ comments box to only certain Blogger posts. This code relies on the post having a specific label.

For this example, I'm going to have all posts show the normal Blogger commenting box, but I want certain specific posts (those with a given label) to also show the G+ Comments box just above that. Basically like this image here.

Example: Display Blogger comments on all posts, add G+ comments to certain labeled posts

Here's a real life situation where this might come in handy. Let's say you have been using G+ comments on your blog, but you decide to switch back to the default Blogger commenting system, which in my opinion is a much better choice. But let's say certain posts had a lively G+ discussion that you'd like to keep around just for those posts, in addition to the normal Blogger commenting box on all posts. This will allow those old G+ comments to remain visible and active, but also keep the normal Blogger comments operational on all pages (including these).

To do this, first you should disable the G+ comments system on your blog, and return it to normal Blogger comments. Don't worry; none of the G+ comments will be deleted. G+ comments are associated with G+ and your post's URL only. Even if you remove G+ commenting, all G+ comments are still out there in G+ land.

Once you've got the normal Blogger commenting system working, add this code to your blog template.

Code for displaying G+ Comments box by post label 

<!--Start G+ comments by label-->
<b:loop values='data:post.labels' var='label'>
            <b:if cond='data:label.name == &quot;LABELGOESHERE&quot;'>
          <script src="https://apis.google.com/js/plusone.js"></script>
<div id="comments"></div>
<script>
//<![CDATA[
gapi.comments.render('comments', {
    href: window.location,
    width: '500',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
//]]>
</script>
  </b:if>
        </b:loop>
<!--End G+ comments by label-->


Just replace LABELGOESHERE with whatever label you want to activate the display of G+ comments.

Where to place the code

You can place the code anywhere in your blog template (by editing the template HTML). For example, just below "footer-line-2" would work. However, I recommend searching for this line in your template, and placing the code just below it:

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

The advantages of placing the code just below that line are

1. It will appear along with the normal Blogger comments, not in some weird place
2. This one code insertion will make the G+ comment box display on both desktop and mobile views of your template. No need to paste it in both sections!

Screenshots

Here is the desktop view. G+ comments appear just above normal Blogger comments. This box only appears because the post contains a label I assigned "gpluscomments".

Here how it looks on mobile views. Note that you can manually alter the width of the G+ comment box in the code above, but nicely, the box will automatically shrink if necessary on a mobile phone.

There you go. Just remember that your mobile template needs to be set to "Custom" for this to work (not "Default").

As an experiment, I've labeled this post with my trigger label ("gpluscomments") so, assuming I haven't removed the code from my template yet (which I may do eventually), you should see both comment boxes here.

A few other things

By the way, the default URL scheme for your blog's G+ comments is this:

https://apis.google.com/u/0/_/widget/render/comments?usegapi=1&href=http://YOURBLOG.blogspot.com/2016/08/POSTTITLE.html&first_party_property=BLOGGER

So you could also embed them in an iframe.

Also, the G+ portion of the code works just simply pasting it into the HTML editor of an individual blog post or page. So if you wanted to place a G+ comment box only on one or two specific pages, just add the code right into the post itself:

<script src="https://apis.google.com/js/plusone.js"></script>
<div id="comments"></div>
<script>
//<![CDATA[
gapi.comments.render('comments', {
    href: window.location,
    width: '500',
    first_party_property: 'BLOGGER',
    view_type: 'FILTERED_POSTMOD'
});
//]]>
</script>

Overall, after having used Google Plus comments for awhile now, I think they're pretty limiting and annoying. Blogger's original commenting system is more open (any Google, G+, Wordpress user can comment), it allows simple e-mail follow-ups, the "look" fits more with your blog, and comments are saved/backed-up in your own blog archive.

Finally, if you'd like to run both Blogger and G+ commenting systems side-by-side on every post, try this: Show/Hide Blogger and Google+ Comments System With Toggle | Helplogger

Happy blogging.