Techie Zone

This tutorial will guide you on how to make your own Google Gadget for iGoogle Page. If you still not seen any Google Gadget on iGoogle you can see it online at iGoogle Page.

Software Requirements

• JavaScript
• Google API (Using JavaScript Functions Provided by Google)
• HTML

What are Google Gadgets?

Google Gadgets are basically web application that are hosted on google servers. These Web Applications can be any small web utilities to complex web application to fetch remote data from the server and show result.

How to Develop your own Google Gadget for iGoogle:

• Static HTML
  Static HTML refers to the showing HTML content which uses standard JavaScript Function to display data.
  Example:Showing Current Date and Time
• Remote connection
  Remote connection gives the flexibility to fetch data from remote servers and show that content on the Google Gadget. This uses Google APIs. For more information on fetching remote content check this link Remote Data Call. This remote data call functionality is similar to the AJAX call that we make in JavaScript.

NOTE:
You can also show remote data in the gadgets where you have to specify the remote URL in the gadget code. For more information on the remote URL visit Remote Content Type. I have not discussed the remote url implementation in this article.

Example:

http://hosting.gmodules.com/ig/gadgets/file/115444757/gadgetexample.xml

Where the filename is the Gadget Name.

Sample Google Gadget Code

< ?xml version="1.0" encoding="UTF-8" ?> 
   <module>
     <moduleprefs title="hello world example" /> 
	<content type="html">
	  < ![CDATA[ 
		Hello, world!
	  ]]>
        </content> 
   </module>

Referring to the above xml, the code(JavaScript, HTML) of the gadget will be also inside the CDATA section. content type=”html” refers to showing only html content(static or fetching content from remote server). For remote url will have to specify content type=”url”.

If you want to give the gadget title name, description you can provide that in the ModulePrefs tag. This tag also holds the data on the Widget Width and Height and other optional parameters.

Finally to publish the code for the Google Gadget you will have to enter the path of your temporary XML File in this URL: http://www.google.com/ig/adde?moduleurl=(temporary xml file path)

Custom Search

Popular Articles:

None Found