How to Code a Google Gadget - an Introduction

Member

By William Jordan
User-Submitted Article

Article Rating: (33 Ratings)

Code a Google Gadget

Google Gadgets are small objects that offer cool dynamic content that you can create and place on many web pages across the internet. In a nutshell, a Google Gadget is a small XML file that may contain XML, HTML, and JavaScript . Any web developer already familiar with HTML and JavaScript can create widgets based on standard web building blocks that can be used to drive internet traffic and ad revenue to their sites.

Difficulty: Moderate

Instructions

Things You'll Need:

Google account
iGoogle page (for testing)
Text editor such as NotePad
Internet access
Internet browser such as Internet Explorer or Firefox
Basic understanding of creating web content with XML, HTML, and JavaScript

Step 1

Determine the functionality of your Google Gadget. You can create the web content utilizing standard building blocks such as HTML, JavaScript, Flash, etc. Make sure you include your Google Adsense or other revenue links and code in the HTML.
Step 2

Hello World Google Gadget Example

Start with the Hello World Google Gadget (See Resources below for a link to the XML File). Replace the Hello, world! text in the CDATA section of the XML document with the HTML and JavaScript code created in Step 1.
Step 3

Google Gadget Editor

Login to your Google Account and navigate to the Google Gadget Editor (see Resources below for a clickable link). Paste your XML into the editor window and use the File > Save As menu to save your gadget.
Step 4

Add your gadget to you iGoogle page

To test your new creation use the Google Gadget Editor to put the new gadget on your iGoogle page. Use the File > Publish menu option. Select the Add to my iGoogle page option on the dialog that will appear after selecting the Publish menu item.
Step 5

Add your gadget to iGoogle Directory

Iterate through steps 3 and 4 until you are satisfied with the gadget functionality. Now you are ready to make it available to the world. Return to the Google Gadget Editor and use the File > Publish menu option again. This time select Publish to iGoogle Directory from the dialog. Read through the Terms and Conditions on the page that appears. If you agree, click send. After some processing time it should appear in the iGoogle Directory.