A guide on how to easily make iGoogle gadgets

Gadgets for iGoogle and other homepage sites (start pages) are getting ever more popular. I seem to get a good deal of email asking about how can a beginner easily make these gadgets, so I decided to write this small article to describe the easiest and quickest way to get started making your own gadgets.

Before we begin making gadgets there are a few things that must be in place first.

• You must already know how to make basic HTML content.
• You must have access to a server in order to host your content.

Now, if you already understand these two areas then you are as good as done! So let's begin building our gadget:

Let's make some content

For this example we are going to make a simple IP display gadget. So, let's find some code to do this:

<script language="javascript">

var ip = '<!--#echo var="REMOTE_ADDR"-->'
document.write(ip);

</script>

Now, we enter this into an .shtml file. Note the S in shtml, this is necessary to process the SSI code that displays the IP address.

So we now have a file called ip.shtml on our computer with the above code in it. We need to upload this file to our web server. In my case the address of the file is:

http://www.tropicalpcsolutions.com/ip/ip.shtml

So, we now have our basic web content up and running. Now we need to make it into a gadget. For this you will need some XML code. The XML file is in a sense, the gadget. Another way to look at this is that the XML file is a portable container/wrapper for your html content.

XML code used in this example:

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

title="IP Example Gadget"
title_url="http://www.yoursite.com"
height="50"
width="200"
author="ME"
author_location="HERE"
author_email="nospam@nospam.org.com"
screenshot="screenshot.png"
thumbnail="screenshot.png"
description="Example IP display gadget"
category="tools" />

<UserPref
name="IP_DISPLAY"
default_value="0"
datatype="hidden"/>

<Content type="url" href="http://www.tropicalpcsolutions.com/ip/ip.shtml" />

</Module>

Notice this line:
<Content type="url" href="http://www.tropicalpcsolutions.com/ip/ip.shtml" />

This will have to point to YOUR content on YOUR server. You also will need to change the variables to say what you want them to say! For starters you can just take the code as is and change that one line to point to your content.

Now save this file as ip.xml and put on your server in the same directory as your ip.shtml file. My example xml file is located at:
http://www.tropicalpcsolutions.com/ip/ip.xml

Now, we go to Google GGE (Google Gadget Editor) and test our gadget. To load the gadget choose "Open from URL" on the drop down list to the left.



Once we have loaded the xml file we click the preview tab and test our gadget/content:



Once we have determined that all is working we then go here and submit the gadget. Once the gadget is submitted you will be given a link and embed codes that allow you to offer the gadget to others. Example:

<a href="http://www.google.com/ig/adde?synd=open&source=ggyp&moduleurl=http://www.tropicalpcsolutions.com/ip/ip.xml" target=_blank>Add to iGoogle</a>

The above code would create the below link:
Add to iGoogle

Once the link is clicked the gadget will be loaded into your homepage:



There, you have made your first iGoogle gadget. I hope this helps you guys out...For more info on this topic then sign up for our email newsletter and get a free eBook that goes into greater detail.