• Home
• About

Create Your Own Google Gadget

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.

You can write the code for google gadget in any text editor and save to google. But it is preferred to use Google Gadget Editor(GGE) which is an online editor provided by google and also allows you to save the Google Gadget Code on the google server. For more information on Google Gadget Editor please refer to Google Gadget Editor. Whenever you save an code inside the Google Gadget Editor an temporary XML file gets created.

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)

Bookmark It

Hide Sites

Custom Search

Posts

• Objects in Javascript
• PHP 5 Tutorial - Not Pure Object Oriented Programming Approach
• Common Tough Interview Questions
• PHP 5 Tutorial - __toString() Magic Method
• Modifying / Editing XML Document in JAVA

Did you enjoy this post? Why not leave a comment below and continue the conversation, or subscribe to my feed and get articles like this delivered automatically to your feed reader.