Building Gadgets for Google Sites

posted Nov 7, 2008, 7:08 PM by Brian Johnson   [ updated Jan 27, 2010, 8:04 PM by Brian Johnson ]


Tweet This Tweet This

About Gadgets

What is a Custom Gadget?

Google offers a programming interface for building custom gadgets that can be embedded and used in your website.  Gadgets are commonly used to provide content to your iGoogle home page, and Google Sites uses them to include content (code) that is otherwise prohibited.

When using gadgets with Google Sites, one of the things that needs to be considered is where the gadget will be hosted.  There are essentially two options:
  1. Create the gadget in the editor of your choice, save is as an XML file and host it as an attachment somewhere on your site, or with another online hosting service.
  2. RECOMMENDED  Build, host and manage the gadget using the Google Gadget Editor (GGE). 

How to Build Your Gadget

As noted above, the recommended way to go about building, hosting and managing your gadget is through the Google Gadget Editor, or GGE.  The GGE is a Google-provided and hosted utility that lets you edit gadget specs and Preview your changes, as well save, host, and publish your gadgets.


When you first log into the GGE, you will be presented with the traditional Hello, World! example.  Using this example, the process for creating your gadget is quite simple, and can be completed in just two simple steps:
  1. Paste in your custom code
  2. Save and name the gadget

Adding Your Custom Code

  1. Place your cursor just after "Hello, world!" on line 5
  2. Press the <Enter> key on your keyboard to add a line break
  3. Paste in your code
  4. Delete "Hello, world!" from line 5.  (The GGE will not let you delete this text before adding your custom code)
If you would like to see how your new gadget looks, or verify that it works as intended, you should now be able to give it a quick test by clicking on the Preview tab at the top of the editor.

Saving Your Gadget

After you've created your gadget, you will need to save it for use on your website.  To do this, I recommend using the Save As option because it allows you to easily change the name to something appropriate for your needs. 


Once saved, click on the gadget name in the upper-right corner of the editor to view the resulting XML and to copy the URL from your browser's address bar.  The resulting URL should resemble the Hello, world! example you see below:

 

Using Your Gadget with Google Sites

Once you've created your gadget, the next step is to embed it into your Google Sites website.  This is a fairly straightforward process that can be accomplished by following the steps below:
  1. Log into your Google Site
  2. Navigate to the page on which you would like to display the gadget
  3. Click the Edit Page button
  4. Select Insert >> More Gadgets...
  5. Select Add Gadget by URL
  6. Paste or type the gadget URL (ie// http://www.google.com/ig/modules/hello.xml)
  7. Click Add
  8. Specify the dimensions and any other properties of your gadget
  9. Click OK
There you have it.  The gadget created above should now be added to your site.  You'll need to save the page to view it.

Other Resources


Have a question, but don't know where to start?  Check out the Google Sites FAQ!