Ähnliche Beiträge
- CSS1K
- Simple Media Queries Debugging
- WordPress Admin Style Guide
- WordPress Admin Bar nach unten verschieben
- HTML5 – Webseiten innovativ und zukunftssicher
- Simple Media Queries Tester
Journal
- Trend. Meiner.
- WordPress mehrsprachig nutzen – ein Lösungsvorschlag
- Besser die Wahrheit?
- Einschränken der Daten-typen im WordPress Upload
- Trenne Logik von der Ausgabe, mittels Hooks in WordPress
Projekte
Abonniere die neusten Artikel via Sidebar
ein-/ausblenden
iGoogle Gadget für dein Blog
Anzeige
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!
14 Kommentare und 1 Trackback zu „iGoogle Gadget für dein Blog“
Kommentar schreiben
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 < und > als > 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.
Das Weblog wird angetrieben von
13. September 2008 um 02:17
Sicher ganz lustig obwohl man so eine suche wohl auch nicht unbedingt braucht oder?
13. September 2008 um 07:25
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.
13. September 2008 um 14:49
Nett und unnötig, genau das richtige für´s Web 2.0
15. September 2008 um 16:59
Gut gesagt Basti.
Aber könnte man nicht auch einfach den letzen Beitrag anzeigen lassen, vielleicht interessanter als eine Suchleiste
Gruß
15. September 2008 um 20:27
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.
26. September 2008 um 12:07
29. September 2008 um 12:21
super anleitung. danke
24. November 2008 um 13:47
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...
5. Januar 2009 um 01:17
Interessant, wir wollen auch ein eigenes Gadget/Widget basteln..
sind die Google Gadgets irgentwie auch in Vista Widget umwandelbar?
10. Januar 2009 um 11:52
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.
14. Januar 2009 um 19:15
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
7. März 2009 um 17:16
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
8. März 2009 um 12:27
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.
26. März 2009 um 16:04
Auf jeden Fall interessant, aber vielleicht ein wenig unnötig. Aber trotzdem danke !
LG
7. Oktober 2010 um 19:52
Der Artikel ist für den Einstieg sehr hilfreich! Ob man eine blogsuche in igoogle braucht ist was anderes. Danke!