iGoogle Gadget für dein Blog

Die Zeiten ändern sich.

Dieser Beitrag scheint älter als 15 Jahre zu sein – eine lange Zeit im Internet. Der Inhalt ist vielleicht veraltet.

Add to Google
Seit dem meine Frau mit eigenem Rechner unterwegs und das Internet und die damit verbundenen Möglichkeiten erkundet, kommen mir die unterschiedlichsten Fragen und Tools unter, so auch iGoogle. Das Experimentieren damit macht scheinbar den Laien glücklich und man hat eine angepasste Seite, die recht leicht zu konfigurieren ist.
In diesem Zusammenhang kam mir die Idee, doch mein Blog als Gadget für iGoogle anzubieten. Wer das auch möchte, der kann nun hier ein kleines Tutorial nutzen und muss sich nicht durch die Dokumentation von Google arbeiten.

iGoogle Gadget
Ein iGoogle Gadget lässt sich recht einfach erstellen. Kenntnisse in HTML und CSS sollten aber vorliegen, denn das Gadget verweist quasi nur auf eine Seite. Da WordPress im Standard eine Suche anbietet, habe ich das Gadget so gestaltet, dass man aus iGoogle dann auf meinem Blog suchen kann. Ähnliches hatte ich mal für die Suche in Firefox und Internet Explorer erklärt. Nun haben wir also eine weitere Quelle, aus der Nutzer suchen können. Die Gadgets kann man für jede Seite erstellen, die hier vorgestellte Suche greift auf einen WordPress-Blog, allerdings geht es auch mit jeder anderen Suche auf einer Website, wenn man den Namen des Suchfeldes kennt.

Vorbereitungen iGoogle Gadget

Wie schon erwähnt ist das Gadet nur ein Verweis auf eine Seite, sozusagen ein Frame, der die die Website zeigt. Daher muss eine Seite angelegt werden, auf die dann via einem XML verwiesen wird. Im der XML-Datei stehen dann die Daten, die Google benötigt.

Dazu habe ich einen eigenen Ordner angelegt, in dem die Daten für das Gadget für Google verfügbar sind – igoogle. In eurem Ordner erstellt ihr quasi eine statische Seite mit der Suche.


<form id="search" action="https://bueltge.de/" target="_top" method="get">
	<p>
		<input name="s" id="s" size="15" value="suche ..." onfocus="if(this.value=='suche ...')this.value=''" onblur="if(this.value=='')this.value='search...'" type="text" />
		<input type="submit" id="submit" value="Search" class="hide" />
	</p>
</form>

Die Suche habe ich mit JavaScript versehen, so wird das Suchfeld ein wenig attraktiver. Das Form bekommt zum Attribut action die Adresse des Blog und das input-Feld muss den Namen s haben, da darauf WordPress dann die Suche ansteuert. Wichtig ist noch die Angabe des Attributes target="_top", da sonst die Suche im Fenster des Gadget statt findet.

Damit sieht meine index.php nun wie folgt aus. Prinzipiell reicht natürlich eine einfache html-Seite, dabei sind eurer Fantasie kein Grenzen gesetzt. Beachtet aber, dass das Gadget je nach Auflösung sehr klein ausfallen kann.


<!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>bueltge.de [by:ltge.de] &middot; iGoogle Gadget</title>
	
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="robots" content="ALL" />
	<meta name="description" content="Suche auf bueltge.de through iGoogle" />
	<meta name="author" content="Frank Bueltge" />
	<meta name="reply-to" content="frank@bueltge.de" />
	
	<link rel="shortcut icon" href="../favicon.ico" />
	
	<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
</head>

<body>

	<div id="header">
		<h1><a href="https://bueltge.de/" title="bueltge.de [by:ltge.de]" target="_top">bueltge.de</a></h1>

		<form id="search" action="https://bueltge.de/" target="_top" method="get">
			<p>
				<input name="s" id="s" size="15" value="suche ..." onfocus="if(this.value=='suche ...')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>&copy; <a href="https://bueltge.de/" title="bueltge.de [by:ltge.de]" target="_top">bueltge.de [by:ltge.de]</a> mit iGoogle&trade; Gadget &lt;?php echo date('Y'); ?&gt;</p>
	</div>

</body>
</html>

Dazu gestaltet ihr eurer CSS und form die Such-Seite nach eurem Können und Geschmack, dabei nicht vergessen, ein Gadget kann sehr klein sein!

Gadget XML Struktur

Um nun Google vom Gadget zu überzeugen, muss ein XML in Verzeichnis abgelegt werden, welches näher Informationen für Google parat hält.
Dazu lege ich ein Beispiel ab, welches ihr nur anpassen müsst. Die Werte ändern und hoch laden, fertig.


<?xml version="1.0" encoding="UTF-8"?&gt;
<Module>
<ModulePrefs
title="bueltge.de [by:ltge.de] Search"
height="200"
width="400"
author="Frank Bueltge"
author_email="frank@bueltge.de"
description="bueltge.de [by:ltge.de] Search"
thumbnail="https://bueltge.de/igoogle/images/logo.gif"
screenshot="https://bueltge.de/igoogle/images/screenshot.jpg"
author_location="DE"
title_url="https://bueltge.de/igoogle/"
/>
<Content type="url" href="https://bueltge.de/igoogle/index.php"></Content>
</Module>

Aus dieser Strukur werden dann auch die Daten für das Aktivieren des Gadget erstellt, wie wie im folgenden Screenshot.
Add iGoogle Gadget

Gadget veröffentlichen

Um das Gadget nun anderen Nutzern bereit zu stellen, gibt es einen Service, dem lediglich die URL mitgeteilt werden muss. Bei diesem Service tragt ihr nun die Adresse zum XML ein.

Damit ist euer Gadget fertig und ihr könnt es allen Bekannten und Verwandten mitteilen, wie das geht erzählt euch Google gleich im Anschluss der Anmeldung. Ebenso können so einfache Gadgets für Webseiten erstellt werden, auch dazu sind die Links bei der Anmeldung zu finden, oder ihr nutze die Dokumentation der API.

iGoogle Gadget und das iPhone

Da man bekanntermaßen mit dem iPhone recht passabel im Web unterwegs sein kann, ist natürlich auch die Verwendung von iGoogle auf diesem Gerät denkbar. Dass das auch genutzt wird, oder zumindest zum Spielen anregt zeigt mir Howi, der mein Gadget nun auf seiner Seite hat und mich durchsucht.
mein iGoogle Gadget auf dem iPhone
Vielen Dank an Howi für den Screenshot!

Von Frank Bültge

bueltge.de [by:ltge.de] wird von Frank Bültge geführt, administriert und gestaltet. Alle Inhalte sind persönlich von mir ausgewählt und erstellt, nach bestem Gewissen und Können, was die Möglichkeit von Fehlern nicht ausschließt.