Recent site activity

How to build gadgets with canvas views for iGoogle

The upcoming release of iGoogle's new interface brings support for the canvas view — an expanded view of a single gadget inside of iGoogle.  The canvas view allows a gadget to display a much greater amount of content and opens up new avenues for user interaction and monetization.

As you may have read, iGoogle also plans on supporting OpenSocial. Currently, the iGoogle sandbox does allow developers to test social applications. However, OpenSocial support in the production version of iGoogle will not come until later this fall.

Developers interested in creating canvas views should therefore pay close attention to the following four topics:
  1. How to determine which API calls to use
  2. How to store user data
  3. How to ensure cross-browser compatibility
  4. How to test gadgets in production

 
   Note - please also read the following before beginning to design/code your gadget:

1) Determining which API calls to use

The production version of iGoogle supports the "legacy" or original version of the gadget specification with just a few additions.  For the most part, these are features named like _IG_functionName.  Exceptions include the new views functionality and classes like com.google.gadgets.analytics that aren't part of the core API.

Only the following sets of functions are supported in production. If a function does not appear on this list, you should not use it, or your gadget will not work in production.
2) How to store user data

Gadgets can store user data and user preferences via UserPrefs, and should not use OpenSocial app data requests. Further, preferences which are used to store user data should have the datatype attribute set to "hidden."  These preferences can be accessed programatically by creating a new _IG_Prefs object, and using the get and set methods.  For more details see the developer's guide section on saving state.


In order for a gadget to be well received by iGoogle's audience, it should support major browsers.  Pay particular attention to:
  1. IE 6/7/8
  2. Firefox 2/3
  3. Safari 2/3
Keep in mind that iGoogle renders gadgets in quirks mode so some CSS and HTML will behave improperly (in IE 6/7 in particular).  It may be necessary to provide workarounds via JavaScript or CSS for standard techniques that do not function properly in quirks mode.

Some of the top issues with quirks mode in IE are:
  • Discrepancies in the box model — particularly margins and padding, and centering
  • White space can have an effect on display of elements in a page
  • Lack of support for certain CSS properties (max-width, max-height, etc.) except in standards mode
For more specific inconsistencies, check out this page.

Details coming shortly…


For additional background information on developing gadgets for iGoogle, check out the following resources: