How To: Gadgets for Google Sites

What are Google Gadgets?
Google Gadgets are simple miniature HTML and JavaScript applications made by Googlers that offer cool and dynamic content which can be embedded in webpages and other applications. Google Gadgets are simple to build using built-in JavaScript libraries and Google's own Google Gadgets Editor, or GGE.

What's in a Gadget?
The gadgets API consists of a few simple building blocks: XML, HTML, and JavaScript. To get started, all you need is a basic understanding of HTML. We will teach you all you need to know about XML to write gadgets. Later, as you write more sophisticated gadgets, you will probably want to learn some JavaScript if you're not familiar with it already.

XML is a general purpose markup language. It describes structured data in a way that both humans and computers can read and write.

XML is the language you use to write gadget specifications. A gadget is simply an XML file, placed somewhere on the internet where Google can find it. The XML file that specifies a gadget contains instructions on how to process and render the gadget. The XML file can contain all of the data and code for the gadget, or it can have references (URLs) for where to find the rest of the elements.

HTML is the markup language used to format pages on the internet. The static content of a gadget is
typically written in HTML. HTML looks similar to XML, but it's used to format web documents rather than to describe structured data.

JavaScript is a scripting language you can use to add dynamic behavior to your gadgets.[1]

How to build your own gadget.
As noted above, the recommended way to go about building, hosting and managing your gadgets is through the Google Gadget Editor, or GGE. The GGE is a Google-provided and hosted utility that lets you create, edit 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:

  • Paste in your custom code
  • Save and name your gadget
Adding your custom code.

  • Place your cursor just after "Hello, world!" on line 5
  • Press the <Enter> key on your keyboard to add a line break
  • Paste in your code
  • 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.
It is recommended practice to use the "Save As" option as it allows you to easily change the name of your gadget to something a little more appropriate for your needs.

Please NOTE: Simply saving your gadget makes it only accessible to you. In order to make it accessible to the public you must "Publish" the gadget once you have saved it.


Once your gadget has been saved, click on the gadget name in the upper-right corner of the editor to view the resulting XML URL which you can then use in your webpages or applications.

1. ^ "Google Code - Gadgets API". code.google.com. Retrieved 17-12-2010.

No comments:

Post a Comment