Google Gadget Tutorial > Lesson Four

This is the fourth in a series of articles which will be put together as a guide to creating Google gadgets. To see a full index of all gadget lessons, please see the Google Gadget Tutorial.

How to make a Google gadget display on iGoogle?

Okay, we now have a file (tiger.xml) but how do we get it to “work” on iGoogle?

1) We must know where our file is residing on the internet.

Let’s pull up tiger.xml on the Google gadget editor…

When you click on the file name, a new window will open with the contents of that file. Near the top of your browser you will find the address of this file. This is the place your gadget code resides…

Make sure to highlight and copy that address!

Now that we know where our file resides, we can add it to iGoogle, here is how.

2) Add a gadget to iGoogle from a file

Go to iGoogle and look on the right hand side of the screen. You will see a link that says “add stuff”.

Click that link and you will be taken to the Google gadget directory. On the left hand side of the page near the bottom is a link that says “Add feed or gadget”…

Whe you click the link “Add feed or gadget” a window will display where you can put the address (url) of your file…

Put the address you copied from the first step in the box and click add.

Once you do, you will see an alert from Google asking you if you really want to add this. Click “ok” to that message and then you gadget will be installed. When you do this, you won’t see you page change very much and you will have to return to iGoogle to see your gadget…

When you do that you will see your gadget live on iGoogle! (usually on the top left hand side) Let’s see what our tiger looks like…

This tiger is the result of the code you manipulated in lesson three when you changed the “ModPrefs” line.

Here are the things you changed…

These are the visual changes you made to the example gadget:

You changed the title from “hello world example” to “tiger”. You also changed the height of the gadget by making it taller.

Overview:

You have now, from start to finish. created a Google gadget and made it display on iGoogle. Congrats!

You now know of most of the basic steps and concepts that are important to be able to create gadgets, and to begin understanding the documentation provided by Google.

Google gadget documentation

The best place to get information about Google is from Google itself.

Google provides documentation to help developers understand how gadgets work. Much of it is technical, but once you know the things we have already learned it becomes a bit more understandable. Here is an index of helpful parts of the Google help documents.

Getting Started – this page is a quick overview of some of the main features of a Google gadget, and it also has a larger version of the Google gadget editor that we have been using.

Writing Your Own Gadgets – this page starts to get into the creation of gadgets in detail offering examples and explanations about the main parts of the Google gadget code.

In our next lessons we will pick up the pace a little, and it will be helpful if you have read those pages over.

Go To Next Lesson

Related posts:
How to Make Google Gadgets – Lesson Five
How To Make Google Gadgets – Lesson Three
How To Make Google Gadgets – Lesson One