published on in HowTo JavaScript
tags: blogging google javascript

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 has 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.getComputedSty_e(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 have to add a href, view_type, first_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.