Creating your first iGoogle Gadget

Recently at work, we’ve started diving into Google Gadgets.  They are quite fun and really extremely easy to build.  In this article, I’m going to get you started creating your very own Google Gadget.

Sit back and reserve a few minutes of your time and you will be well on your way in no time!

The first thing we need to do is open our favorite text editor.  Create a new file called google.xml.  Inside the file, place the following information to get started:

[code]<?xml version=”1.0″ encoding=”UTF-8″ ?>
<Module>
  <ModulePrefs title=”Hello, World!”
    height=”240″>
    <Require feature=”opensocial-0.8″/>
    <Require feature=”views” />
    <Require feature=”setprefs” />
  </ModulePrefs>
  <Content type=”html” view=”home”><![CDATA[ 

  ]]>
  </Content>
  <Content type=”html” view=”profile”><![CDATA[ 

  ]]>
  </Content>
  <Content type=”html” view=”canvas”><![CDATA[ 

  ]]>
  </Content>
</Module>
[/code]

The following code sets up our basic module.  We create a module, give it a title and a fixed height.  We require a couple of options to provide us with a few capabilities.  Finally we create three blank content areas: “home”, “profile”, and “canvas”.

The home content area gets displayed if our module was embeded on another webpage other than iGoogle.

The profile content gets displayed when viewing the module in iGoogle.  This is the small box that can be dragged and dropped to organize the various modules in your account.

The canvas content area gets displayed when the module is maximized.  When maximized, it takes up the full area inside of iGoogle, minus the left navigation.

To actually have content displayed now, we simply need to populate our different content areas.  Inside of the content areas you can include Javascript, CSS, and HTML.  The sky is the limit!  If you plan to create gadgets with dynamic data, Google offers AJAX helpers to load data in through AJAX.

Enjoy!