skip to main | skip to sidebar

Google+ Activity Widget - jQuery Plugin
As Google+ API was just released a couple days ago, it is time to have a posts widget for it. So, this widget was created to display your Google+ profile and slides down your recent posts with any attached images.

 Update Nov 8, 2011 :   You can use the widget to display the posts of your Google+ Brand Page too, check Demo 1.

Widget Setup

<!-- Include javascript and CSS once -->
<link href="http://googleplus-activity-widget.googlecode.com/svn/v1/light.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script src="http://googleplus-activity-widget.googlecode.com/files/jquery.googleplus-activity-1.0.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
jQuery.fn.googlePlusActivity.defaults.api_key = 'YOUR_KEY';
//]]>
</script>

<!-- Insert widget placeholder -->
<div class="google-plus-activity" data-options="{ user: '118211149935481259253' }">
   <a class="gpaw-info" href="http://www.moretechtips.net" target="_blank">Google+ Activity Widget</a>
</div>
 

1. Include CSS file. Or use that file as a starting point to customize widget styles as you like.
Previous code uses the light color scheme CSS, you can use the dark one by using this URL instead
"http://googleplus-activity-widget.googlecode.com/svn/v1/dark.css"

2. Include jQuery library; if you already have it on the page, then you don't need to include it again!
Plugin was tested with jQuery v1.2.6, v1.3.2, v1.4.2, v1.6.2

3. Include this jQuery plugin.

4. Use your API key, It is recommended to use your own key to avoid being blocked by Google+ API due to rate limits.
Just set your API key right after including the javascript files as in the above code.

* Get your free Google+ API key
- Go to https://code.google.com/apis/console#access.
- Login and click "Create Project".
- Under service list, click "off" button next to "Google+ API" to turn it on.
- Accept the agreement.
- From the left menu, Go to "API Access" and copy your API key.
5. Insert placeholder div as in the above code in your page where the widget should appear.
Note that, you need to set the class name of div tag as "google-plus-activity" to have the widget loaded automatically.
Set widget options as a list of comma-delimited values and surrounded by braces. "user" option is mandatory, to set your Google+ profile ID or Google+ Page ID.

Other Ways To Set Options

a. Place options in HTML comment. [ Demo 2 ]
<div class="google-plus-activity">
   <!-- { user: '118211149935481259253', show_image:0 } -->
   <a class="gpaw-info" href="http://www.moretechtips.net" target="_blank">Google+ Activity Widget</a>
</div>

Note that "show_image" is set to 0 to disable attached images from showing.
b. Or Load widget by a jQuery plugin call and pass options array as the first parameter. [ Demo 3 ]
<script type="text/javascript">
//<![CDATA[
   jQuery(document).ready(function($) {
      $('#gpaw').googlePlusActivity({
         api_key : 'YOUR_KEY'
         ,user:'118211149935481259253'
         ,image_width:75
         ,image_height:75
         ,body_height:350
      });
   });
//]]>
</script>

<!-- Insert widget placeholder -->
<div id="gpaw">
   <a class="gpaw-info" href="http://www.moretechtips.net" target="_blank">Google+ Activity Widget</a>
</div>

Note that, options in previous code change the dimensions of attached images and the height of posts wrapper.

Features:
  1. It comes with many options for customizing appearance and performance.
  2. Slides down your public posts on Google+ and any attached images. You can also disable animation and display a fixed list instead.
  3. It can also be used with Google+ Brand Pages.
  4. By default, It displays your profile image and link to your Google+ profile. However, you can disable that.
  5. Widget comes with 2 CSS files, a light color scheme and a dark one too. Moreover, you can create your custom styles starting from those CSS files.
  6. Widget uses partial responses of Google+ API to speedup the loading time.
  7. You can customize the widget by placing options in a HTML5 data attribute or HTML comment so it would not break HTML validation of your page.
  8. Since this is a Javascript-only solution, you can add this widget anywhere you can embed Javascript like Google Blogger, Wordpress, ...
  9. Use a typical jQuery plugin call or auto-load any number of div elements with "google-plus-activity" class.

17 comments

  1. Beben Koben // September 21, 2011 at 12:26:00 AM GMT+10  

    long time no see for update...
    and this is out...hohoho
    awesome master, thank you vary much \m/

  2. Mike // September 21, 2011 at 9:57:00 AM GMT+10  

    Thanks @Beben :)

  3. Thilak // September 25, 2011 at 4:40:00 PM GMT+10  

    Thanks! I wasn't aware of Google+ API!

    This worth a bookmark! Great work Mike!

  4. Osvik // September 25, 2011 at 8:52:00 PM GMT+10  

    Do you know what would be awesome? To be able to mix different 5/6 users in a stream. Just like a pubic circle.

  5. Mike // October 1, 2011 at 8:05:00 PM GMT+10  

    @Thilak,
    thanks, Glad you like it.

    @Osvik,
    Sounds like a great idea :)

  6. Ramanan // October 12, 2011 at 10:05:00 PM GMT+11  

    Hai Mike.,

    Used Demo3 code for google+ development...It's working well, except
    when i click [add circle] button ,it's redirect to my google+ profile page, but posts and comments are didn't seen,instead of
    "
    ramanan hasn't shared anything with you.

    People are more likely to share with you if you add them to your circles"
    Help Me...
    thanks in advance
    Regards
    Ramanan.G

  7. Mike // October 13, 2011 at 7:36:00 AM GMT+11  

    @Ramanan,
    Can you send me a sample link..?

  8. Anonymous // October 17, 2011 at 2:32:00 PM GMT+11  

    Hi Mike! Great post!

    But, publications are not displayed in the widget. I have the same problem as Ramanan :/

    Can you tell me I'm wrong?

    Link: http://www.exelzeitgeister.com.ar/search/label/blog

    Thanks! -_-

  9. Mike // October 17, 2011 at 8:34:00 PM GMT+11  

    @Exel,
    you need to have public posts on your Google+ to appear on the widget.

  10. Anonymous // November 28, 2011 at 12:31:00 PM GMT+11  

    How does one display entire Google+ posts, they are currently displaying limited amount of text, this would be nice to be able to adjust as I would like the full post to be shown.

  11. Leslie Jones // November 30, 2011 at 9:09:00 AM GMT+11  

    Hi,

    I'm testing this for my own site as well. For this I have disabled the cycling of posts and I would like to display the Google+ posts descending in stead of the current ascending style.

    Is there an easy way to achieve this?

  12. Mike // November 30, 2011 at 9:16:00 AM GMT+11  

    Hi Leslie,
    unfortunately, there is no easy way..
    I will consider adding an option for that in next versions..

  13. Mike // December 1, 2011 at 9:19:00 PM GMT+11  

    @Ryan,
    The widget doesn't display the full content of post, but I will consider adding that option in next versions..

  14. Quyền // January 2, 2012 at 12:54:00 AM GMT+11  

    thnks pots full ><

  15. Unknown // January 13, 2012 at 7:05:00 AM GMT+11  

    Will it show youtube movies? i.s.o. images?

  16. Mike // January 13, 2012 at 8:00:00 AM GMT+11  

    @Esger,
    It will show video thumbnail if any..

  17. Unknown // April 6, 2013 at 11:47:00 AM GMT+11  

    Is it possible to sort the feed in descending order by date? I have rotate set to 0 and it is showing the oldest item first.

Post a Comment

Thank you for taking the time to comment..
* If you have a tech issue with one of my plugins, you may email me on mike[at]moretechtips.net
More Tech Tips! | Technology tips on web development

Mike

Mike MoreWeb developer, jQuery plugin author, social media fan and Technology Blogger.
My favorite topics are: jQuery , Javascript , ASP.Net , Twitter , Google..
<connect with="me"> </connect>

Subscribe by email

Enter your email address:

or via RSS