Google+ Comments on your non-blogger site

Today +Google published a +Google+ based commenting system on +Blogger . This is what I expected so long. I hate when I need to read minified JavaScript but now I could get more stamina to this “awesome” digging. Finally I found the call with parameters 🙂


  target_id:string,             // id of the container
  Options:object {
    href:string                 // url of the page
    view_type:string            // moderated?
    first_party_property:string // BLOGGER
    width:integer               // wothout units (like px)

The first_party_property property needs to be BLOGGER because when I changed that I got a cool 400 Bad Request error from Google. I don’t know if there are any other options but the only one options for view_type that I know is FILTERED_POSTMOD.

Simple way

Of course you use plusone.js in async method. Just patch your script like this:

<script type="text/javascript">
    window.___gcfg = {lang: '{{ site.lang }}'};


(function() {
function _getComputedStyle(el, cssprop){
if (el.currentStyle) {
// for IE
return el.currentStyle[cssprop]
} else if (document.defaultView && document.defaultView.getComputedStyle) {
// Any other normal brwoser (like Chrome, Firefox)
return document.defaultView.getComputedStyle(el, “”)[cssprop]
} else {
// Try get inline style
var script = document.createElement(‘script’);
script.type = ‘text/javascript’;
script.async = true;
script.onload = function() {
if (gapi && gapi[‘comments’] && gapi.comments[‘render’]) {
var gPlusComments = document.getElementById(‘gpluscomments’);
href: gPlusComments.getAttribute(‘data-href’),
view_type: gPlusComments.getAttribute(‘data-viewtype’),
first_party_property: “BLOGGER”,
width: parseInt(_getComputedStyle(gPlusComments, “width”), 10)
script.src = ‘’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(script, s);

After that you can create a simple div with data- properties like this (for Octopress):

<div id="gpluscomments"
     data-href='{{ site.url }}{{ page.url }}'

So, we need to add a hrefview_typefirst_party_property and width. First and second come from the div, third is fix (BLOGGER and later site specific string like Google API Client ID)and we can calculate the fourth parameter.

I hope I could help you. Have you got any other solution? Please, share with me.

Related Posts: