Adding Google Gadget to your Blog

- Akshay Ranganath

As an experiment, I tried to add a Google Gadget to our MAGNET blog. Before starting on, let me just explain what is a Google Gadget and why I wanted it on the blog.

What is a Google Gadget?
As per the Google Gadgets page(1), 'Google Gadgets are mini-applications that work with the Google homepage, Google Desktop, or any page on the web. They can range from simple HTML to complex applications, and can be a calendar, a weather globe, a media player, or anything else you can dream up.'

There are two types of Gadgets, Universal and Desktop. In short, a Universal gadget is an application that can be embedded on any HTML page that I own and works only when I am online. For more details, refer to the Google Gadgets page (1).

Why Google Gadget?
Well, I thought since we are building a web site on the latest technological advances, it meant, we were trying to attract people who were interested in these technologies and many a times, would like to read more of the latest technology news. To handle it I could:
Update my blog time to time on the latest news OR
Directly feed the latest news feeds into the blog itself.

In the era of Web 2.0, the second case is what holds true. Sites like Digg.com, del.icio.us and the multitde of the social bookmaking sites do the same thing. The only difference is that in those sites, any user can add in any feeds. On our blog, it will be under our control, the guys who own the blog.

How do I add a Google Gadget - the short version
The process is quite simple. In short, this is what you need to do:

1. Log into Google Pages
2. Identify the gadget that you want
3. Take the code of the gadget
4. Paste that code on the blog template and voila! The gadget is on your page.

How do I add a Google Gadget - longer version

For those who have never used sites like Google Gadgets, etc, here is how you can proceed to add a gadget to the blog:

Log into the Google Gagdget home page at the URL http://google.com/ig.
You can use your Gmail account details itself.


Once logged in, copy paste this URL in the same browser: http://www.google.com/ig/directory?syn

This will a directory of gadgets that can be used for blogs.


In our case, I wanted a Technology related Gadget. So, I clicked on the Digg.com - Top in 24 hours link.



Then, customize the gadget for the height, width and color combination that you want. Once done, click on the Get Codeb button. This will display the script that needs to be inserted on your blog or any web page.

Copy the code displayed in the text box below. This is what will make the gadget appear on the web page or the blog.

Open the source code of the page/blog where you want the gadget to appear.

In case of a blog, open the template for the blog. Assuming you are using bloger.com, here is how to do it:

• Log into Blogger.com
• Click on the Layout tab of the blog
• Choose the Edit HTML option
• Now in this, paste the code copied above. Note that the placement of the code should be according to the place where you want the gadget to appear.

And behold - check the Digg.com gadget that appears on the left hand navigation of this site.

References:

• http://code.google.com/apis/gadgets/
• http://www.google.com/ig/directory?synd=open&cat=news