iGoogle Gadget for your Blog

Add to Google
Since my wife uses her own computer and explores all the possibilities, I got a lot questions and found some interesting tools because of her. One of them is iGoogle. Experimenting with it makes every newbie happy and it is very easy to configure.

I came to the idea to offer the blog as a gadget for iGoogle. Everybody who likes to do the same can use this tutorial and doesn't have to work through the Documentation of Google.

It's easy to create a iGoogle Gadget. But you should have knowledge in HTML and CSS. Since WordPress offers a standard search, I created the gadget so you can search in iGoogle on your blog.
Now we have another source where user can search. You can create the gadgets on every page. In this case it's a search for a WordPress blog, but it works for every other search too, you just have to know the name of the search field.

Preparing iGoogle gadget

The Gadget is only a referral to a page, like a frame, which shows the website. Because of that, we have to create a page, which get referred via XML. In the XML file are all data included which Google needs.

For this purpose I created a folder, where the data for the gadget will be available - iGoogle. You create a static page with search in your folder.

<form id="search" action="http://wpengineer.com/" method="get">
<input id="s" name="s" type="text" value="search ..." />
<input id="submit" class="hide" type="submit" value="search" />
</form>

I equipped the search field with JavaScript, so the search field looks a little bit more attractive. The form gets the attribute action the address of the blog and the input-field must have the name s , since WordPress trigger the search because of this. Important is also the declaration of the attribute target="_top", otherwise the search would happen in the gadget window.

My index.php looks like this. Basically is a simple HTML page sufficient, your fantasies have no limits. But pay attention that your gadget could come off very small, depends on the resolution.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>WP Engineer · iGoogle Gadget</title>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="robots" content="ALL" />
	<meta name="description" content="Search at WP Engineer through iGoogle" />
	<meta name="author" content="Frank Bueltge" />
	<meta name="reply-to" content="frank@bueltge.de" />
	<link rel="shortcut icon" href="http://wpengineer.com/blog/favicon.ico" />
	<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
	<!--[if lt IE 8]><link rel="stylesheet" type="text/css" href="ie.css" media="screen"/><![endif]-->
</head>
<body>
	<div id="header">
		<h1><a href="http://wpengineer.com/" title="WP Engineer" target="_top">WP Engineer</a></h1>
		<form id="search" action="http://wpengineer.com/" target="_top" method="get">
			<p>
				<input name="s" id="s" value="search ..." onfocus="if(this.value=='search ...')this.value=''" onblur="if(this.value=='')this.value='search...'" type="text" />
				<input type="submit" id="submit" value="search" class="hide" />
			</p>
		</form>
	</div>
	<div id="footer">
		<p>© <a href="http://wpengineer.com/" title="WP Engineer" target="_top">WP Engineer</a> mit iGoogle™ Gadget <?php echo date('Y'); ?></p>
	</div>
</body>
</html>

Additional you create your CSS to design your search page as you want to. But don't forget the gadget could be very small!

Gadget XML Structure

You have to create a XML in your folder to give Google information.
Here is a following example, which you can adjust for your needs. Just upload and done.

<?xml version="1.0" encoding="UTF-8"?>
<Module>
<ModulePrefs
title="WP Engineer Search"
height="200"
width="400"
author="Frank Bueltge"
author_email="frank@bueltge.de"
description="WP Engineer Search"
thumbnail="http://wpengineer.com/igoogle/images/logo.gif"
screenshot="http://wpengineer.com/igoogle/images/screenshot.gif"
author_location="EN"
title_url="http://wpengineer.com/igoogle/"
/>
<Content type="url" href="http://wpengineer.com/blog/index.php"></Content>
</Module>

This structure creates the data to activate the gadget, you can see it in the screenshot below.

Add iGoogle Gadget

Publish gadget

There is a Service available to share it with other user. You just have to let it know your address. Just put the address to your XML into the Service.

Your gadget is done and you can let all your friends know. How that works is explained in Google right after your registration. You also could easily create simple gadgets for websites. You will find the links after your login or you just use the documentation of API.

Comments are closed.

One comment

  1. danyexel

    """nice article.., very informative,, thanks :)"""