Sidebar
ein-/ausblenden

iGoogle Gadget für dein Blog

Plugin für WordPress SEO

Anzeige

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="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] &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="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>&copy; <a href="http://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="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.
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!

14 Kommentare und 1 Trackback zu „iGoogle Gadget für dein Blog“

  1. 1
    Kommentar von David Hellmann

    Sicher ganz lustig obwohl man so eine suche wohl auch nicht unbedingt braucht oder? :)

  2. 2
    Kommentar von Patrick

    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.

  3. 3
    Kommentar von Basti

    Nett und unnötig, genau das richtige für´s Web 2.0 :-P

  4. 4
    Kommentar von ocean90

    Gut gesagt Basti.

    Aber könnte man nicht auch einfach den letzen Beitrag anzeigen lassen, vielleicht interessanter als eine Suchleiste :-)

    Gruß

  5. 5
    Kommentar von Frank Bültge

    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.

  6. 6
    Pingback von assiprinz » Eigenes iGoogle-Gadget
  7. 7
    Kommentar von tefly

    super anleitung. danke

  8. 8
    Kommentar von Sofie

    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...

  9. 9
    Kommentar von gadgets-geek

    Interessant, wir wollen auch ein eigenes Gadget/Widget basteln..
    sind die Google Gadgets irgentwie auch in Vista Widget umwandelbar?

  10. 10
    Kommentar von Warteschlange

    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.

  11. 11
    Kommentar von Schnäppchen

    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

  12. 12
    Kommentar von René

    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 ;)

  13. 13
    Kommentar von Frank Bültge

    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.

  14. 14
    Kommentar von Christian

    Auf jeden Fall interessant, aber vielleicht ein wenig unnötig. Aber trotzdem danke !

    LG

  15. 15
    Kommentar von Boncho

    Der Artikel ist für den Einstieg sehr hilfreich! Ob man eine blogsuche in igoogle braucht ist was anderes. Danke!

Kommentar schreiben

Kommentarregeln: Bleib cool, kritisch ist in Ordnung, aber wenn du unhöflich bist, dann lösche ich deinen Kommentar. Bitte benutze deinen persönlichen Namen oder Initialen und nicht den Namen eines Unternehmens, dies würde als Spam gewertet und wird gelöscht. Der Zusammenhang zwischen Namen und URL sollte nicht offensichtlich auf Spam hindeuten! ♥ Ansonsten, vielen Dank für den Kommentar und viel Spaß mit meinem Blog.

E-Mail-Benachrichtigung bei weiteren Kommentaren.
Auch möglich: Abo ohne Kommentar.

Kommentar-Hilfe

händischer Spam:
Beachte die Kommentarregeln, jede Form von versuchtem Spam wird gelöscht. Warum und wieso steht in einem meiner Beiträge.

Bezug auf Textstellen:
Du kannst direkt bezug auf Textstellen im Beitrag nehmen. Dazu muss lediglich der Bereich im Artikel markiert werden; daraufhin erscheint ein Button, der den markierten Text in das Kommentarfeld übernimmt und als Zitat auszeichnet. Die Funktion ist nur bei aktivem JavaScript nutzbar.

xHTML:
Du kannst folgende Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <blockquote cite=""> <code> <pre> <em> <strong> <strike> <ul> <ul> <li>

Achte darauf, wenn du Code im Kommentar hinterlegen willst, dann muss der Code maskiert sein. Dann wird er nicht interpretiert. Der Code muss mit Hilfe von HTML-Entities dargestellt werden, d.h. dass man z.B. < als &lt; und > als &gt; einfügt.

E-Mail-Benachrichtigung bei neuen Kommentaren ?
Wenn der Haken in der Checkbox gesetzt ist, dann wirst du über neue Kommentare vie E-Mail informiert. Der Versand erfolgt nur, wenn du die URL in der Bestätigungs-E-Mail genutzt hast oder schon Abonnent hier im Blog bist.

Kommentar erscheint nicht:
Alle Kommentare werden manuell geprüft, freigegeben und nach Möglichkeit beantwortet. Bitte um etwas Geduld und Nachsicht.

Identifikationsbilder (Avatare):
Auf Gravatar.com kann man sich mit seiner E-Mail-Adresse registrieren und ein Bild hochladen, dann erscheint dieses Gravatar hier und in vielen weiteren Blogs.

Spamschutz:
Das Kommentarformular ist mit einem Spamschutz ausgerüstet. Solltest du diesen Artikel ohne JavaScript besuchen und kommentieren wollen, so muss du die Frage beantworten und das jeweilige Wort in das Textfeld eingeben.