Skip to main content

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 🙂

Call

gapi.comments.render(
  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
return el.style[cssprop]
}
}
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’);
gapi.comments.render(
‘gpluscomments’,
{
href: gPlusComments.getAttribute(‘data-href’),
view_type: gPlusComments.getAttribute(‘data-viewtype’),
first_party_property: “BLOGGER”,
width: parseInt(_getComputedStyle(gPlusComments, “width”), 10)
}
);
}
};
script.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(script, s);
})();
</script>

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

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

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:

Balazs Nadasdi

Developer, Project Manager, Blogger, Dad... or sometihng like these