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.

Demo 1 | Demo 2 | Demo 3

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.

Project | Plugin Options | Download plugin JS| Demo 1 | Demo 2 | Demo 3

Tags: Google Plus , javascript , jQuery , jQuery Plugin , Social Media