The Official Google+ Stream Widget

Google+ streamThe 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

Post a Comment

Wow, looks great but not as good as Facebook's.

Rahul Roy said...

Google+ badge definitely looks better than Facebook crap. Remember this visitor must be logged into his Facebook account to see your updates while you can view content without having Google account and also I don't want to show my facebook feeds.

This make me have many new ideas. Thank you.

AzCii said...

Great stuff, but are there anyway to change the styling?