09 Jun 2012
The Official Google+ Stream Widget

The much awaited Google+ Stream Widget for Blogger and other platforms is on the way. It has not been made public yet but there is a working Demo present in one of the Blogger employee's blog which I stumbled upon by chance. Its not ready for a public release yet as the profile thumbnails of users are not working correctly . This widget uses the Blogger API for its implementation but this can be easily integrated into any other platform with a simple Iframe.

Here is a YouTube Video with the Demo

The Code

<script type="text/javascript">
        if (!window.gadgets || !gadgets.rpc) {
          document.write('<script type="text/javascript"'  
                  'src="//www-blogger-opensocial.googleusercontent.com/gadgets/js/rpc.js?container\x3dblogger\x26nocache\x3d0\x26debug\x3d0\x26c\x3d1\x26v\x3dea8289bd3846c57bd64db8aa8a3f2928\x26sv\x3d9">'  
                  '</scr'   'ipt>');
        }
      </script>
<script type="text/javascript">
    
    function registerGetBlogUrls() {
      gadgets.rpc.register('getBlogUrls', function() {
        var holder = {};
        
          
          
          
            holder.postFeed = "http://www.blogger.com/feeds/2295610366269213074/posts/default";
          
          
          
            holder.commentFeed = "http://www.blogger.com/feeds/2295610366269213074/comments/default";
          
          holder.currentBlogUrl = "http://www.stylifyyourblog.com/";
          holder.currentBlogId = "2295610366269213074";
        
        return holder;
      });
    }
  </script>
<script type="text/javascript">
  if (!window.registeredCommonBloggerCallbacks) {
    window.registeredCommonBloggerCallbacks = true;

    gadgets.rpc.register('resize_iframe', function(height) {
      var el = document.getElementById(this['f']);
      if (el) {
        el.style.height = height   'px';
      }
    });

    
    gadgets.rpc.register('set_pref', function() {});

    registerGetBlogUrls();
  }
  </script>
<iframe src="//www-blogger-opensocial.googleusercontent.com/gadgets/ifr?url=http://gadgets-dev.appspot.com/static/googleplus/googleplus.xml&amp;container=blogger&amp;view=default&amp;lang=en&amp;country=ALL&amp;sanitize=0&amp;v=4a1aace2d5086225&amp;libs=core:setprefs&amp;parent=http://www.stylifyyourblog.com/&amp;up_userid=107070768564947881700&amp;mid=1#up_userid=107070768564947881700&amp;st=e%3DAFlCd0VF42RtsdEa50ZMThptAqYoiY%252BtiUhop4spI1D7lHNmW54jZGVNkAqmkOmzdiOCjtvp%252FoBuUthqBTlKd%252BM%252BjJVjk%252FsVBV5OCbVMo5ms9ao7aBBuv1VXpj5o6FiltBEZpXpVdMLN%26c%3Dblogger&amp;rpctoken=3600249869607945918" frameborder="0" style="width: 100%; display: block" height="422" id="sidebar-gadget1" name="sidebar-gadget1"></iframe>
<script type="text/javascript">
        gadgets.rpc.setRelayUrl("sidebar-gadget1", '//www-blogger-opensocial.googleusercontent.com/gadgets/files/container/rpc_relay.html');
        gadgets.rpc.setAuthToken("sidebar-gadget1", "3600249869607945918");
      </script>
</div>

As you will observe in first few lines ,it is using the Blogger API for getting the Blog ID and URL . After that a iFrame is included ( Line 47 ) which is the Widget itself.

All Blogger API widgets use IFrames for implementation and this is no different.
After a bit of research I came to across a XML file which contained the information about the author of this widget inside Google.

You can check the XML file here http://gadgets-dev.appspot.com/static/googleplus/googleplus.xml

Implementing it

You can easily implement this using the following code in your websites ( its pretty long code ! ).

<iframe src="//www-blogger-opensocial.googleusercontent.com/gadgets/ifr?url=http://gadgets-dev.appspot.com/static/googleplus/googleplus.xml&amp;container=blogger&amp;view=default&amp;lang=en&amp;country=ALL&amp;sanitize=0&amp;v=4a1aace2d5086225&amp;libs=core:setprefs&amp;up_userid=107070768564947881700&amp;mid=1#up_userid=107070768564947881700&amp;st=e%3DAFlCd0VF42RtsdEa50ZMThptAqYoiY%252BtiUhop4spI1D7lHNmW54jZGVNkAqmkOmzdiOCjtvp%252FoBuUthqBTlKd%252BM%252BjJVjk%252FsVBV5OCbVMo5ms9ao7aBBuv1VXpj5o6FiltBEZpXpVdMLN%26c%3Dblogger&amp;rpctoken=3600249869607945918" frameborder="0" style="width: 100%; display: block" height="422" id="sidebar-gadget1" name="sidebar-gadget1"></iframe>

To display your Profile stream , just search for the word userid in the above code , it will look something like this

Just replace the highlighted number above with your Google+ Profile ID

Somethings to Remember

This widget has not been officially released and might experience some unexpected problems. Other than that feel free to ask any problems that you come across while implementing it in your blog/websites.

Til next time,
Prayag Verma at 11:58

scribble

09 Jun 2012 The Official Google+ Stream Widget

09 Jun 2012
The Official Google+ Stream Widget