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.
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="http://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] · 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="http://bueltge.de/" title="bueltge.de [by:ltge.de]" target="_top">bueltge.de</a></h1>
<form id="search" action="http://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>© <a href="http://bueltge.de/" title="bueltge.de [by:ltge.de]" target="_top">bueltge.de [by:ltge.de]</a> mit iGoogle™ Gadget <?php echo date('Y'); ?></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"?>
<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="http://bueltge.de/igoogle/images/logo.gif"
screenshot="http://bueltge.de/igoogle/images/screenshot.jpg"
author_location="DE"
title_url="http://bueltge.de/igoogle/"
/>
<Content type="url" href="http://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.
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.
Vielen Dank an Howi für den Screenshot!
Sicher ganz lustig obwohl man so eine suche wohl auch nicht unbedingt braucht oder?
Das ist ja praktisch, vor allem bei solchen "Referenz- und Tutorialblogs" wie deinem.
Ich kann mir zwar nicht vorstellen, dass irgendwer meine Blogsuche auf seiner iGoogle-Seite haben will, aber ich danke dir vielmals fuer das Tutorial.
Nett und unnötig, genau das richtige für´s Web 2.0
Gut gesagt Basti.
Aber könnte man nicht auch einfach den letzen Beitrag anzeigen lassen, vielleicht interessanter als eine Suchleiste
Gruß
Man auch den Feed einbauen, im Prinzip kann man alles einbauen. Das ist lediglich ein Beispiel, wie einfach es Google dem Anwender doch macht. Man erstellt sich eine Seite, ein wenig XML und schon geht das. In der Hinsicht denkt Google schon für den Anwender.
super anleitung. danke
Ich bin totaler Fan von iGoogle und nutze neben dem Wettertool auch folgendes Gadget von Marktjagd. Ich mag dieses, da ich so keine Schnäppchen mehr verpasse. Es sind nette Spielereien und in diesem Zusammenhang lobe ich mir Web 2.0
Ich find obgenannte Anleitung sehr schön, auch wenn ich es für meinen eigenen Blog nicht verwenden werde, dafür schreibe ich da einfach zu wenig meiner Meinung nach...
Interessant, wir wollen auch ein eigenes Gadget/Widget basteln..
sind die Google Gadgets irgentwie auch in Vista Widget umwandelbar?
Coole Idee ich werde mich wohl nächte Woche an ein Widget für meinen Blog ransetzen. Ob es sinnvoll ist oder nicht, kann ja jeder iGoogle Benutzer selbst entscheiden.
iGoggle. Das sorgte mal bei einem Bekannten von mir, dass er nicht mehr mit Google suchen konnte. Wurde immer wieder auf iGoogle geleitet und das verkraftete die alte Maschine (Win98) mit altem Netscape Browser einfach nicht.
Grüße
Hallo, meine frage ist, wie es möglich ist einen RSS Feed ausgeben zu lassen? Es gibt zwar ein WP-Plugin welches jedoch bei mir WP.2.7.1 nicht funktioniert. Wie muss die XML Datei dazu aussehen?
Wäre echt nett wenn Du darauf mal eingehen würdest
Dazu müsste man mehr wissen: WordPress gibt im Standard schon diverse Feeds aus und eventuell willst du einen eigenen Feed erstellen, dann schau dir den Beitrag an.
Auf jeden Fall interessant, aber vielleicht ein wenig unnötig. Aber trotzdem danke !
LG
Der Artikel ist für den Einstieg sehr hilfreich! Ob man eine blogsuche in igoogle braucht ist was anderes. Danke!