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

Demo

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.

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox