Creating your first iGoogle gadget

ADD THE GADGET TO YOUR IGOOGLE PAGE

DOWNLOAD THE SOURCE CODE

iGoogle is the first web page millions see every day. It is a customisable portal to many online services, like email, news, chat and more. The iGoogle page is made up of gadgets, and you can made these gadgets yourself using the Google Gadgets API.

This tutorial will step you through the process of creating a Google Gadget that displays an RSS feed. Yahoo Pipes is used to get an RSS feed into a JSON format that is usable from JavaScript. You can see the pipes here.

A gadget is actually an XML file. To begin create the basic shell of the XML file using the code below.

<?xml version="1.0" encoding="UTF-8" ?>

<Module>

</Module>

The Module element forms the root of the gadget XML file, and its children elements define the gadgets functionality.

First up we need to define the module preferences. These preferences are specified as attributes of the ModulePrefs element.

<ModulePrefs

title="Tutorial News"

directory_title="Web and multimedia tutorial feed"

title_url="http://www.brighthub.com/hubfolio/matthew-casperson/blog/archive/2009/08/23/tutorial-index.aspx"

author_location="Australia"

author_affiliation="Hubfolio"

author="Matthew Casperson"

author_email="matthewcasperson@gmail.com"

description="Get the latest web and multimedia tutorials from Hubfolio."

screenshot="http://farm3.static.flickr.com/2748/4043736673_e9c864a917.jpg"

thumbnail="http://farm3.static.flickr.com/2447/4044482834_4b4345f30d.jpg"

scrolling="true"/>

title defines the title that will appear over the gadget in the iGoogle page.

directory_title defines the title that will appear in the directory, should you gadget be accepted for inclusion in Googles gadget repository.

title_url specifies the URL that the title of the gadget will link to.

author_location defines the location of the developer.

author is the name of the developer.

author_email is the email address of the developer.

description is used to provide a brief overview of what the gadget does.

screenshot is a URL to an image of the gadget. This image should be 280 pixels wide, and a natural height.

thumbnail is a URL to a smaller image of the gadget. This image should be 120x60 pixels.

scrolling is set to true to enable scrollbars inside the gadget.

There are more module preferences available, and you can see the list here. The ones shown above are the minimum required for the gadget to function correctly and include the preferences suggested by Google on their submission page.