Es gibt viele Beiträge zum Thema: „wie binde ich diese tollen, animierten Tag Clouds in meine eigene Webseite ein?“. Die Tag-Clouds sind einmal dazu erfunden worden in Umfangreichen Blog nach Stichworten zu suchen. Deshalb ist auch das bekannteste Widget dieser Art jenes von RoyTanck. Eine TagCloud für die Blog-Engine WordPress. Mittlerweile machen sie sich aber auch als hübsch animierte Webseitenmenüs breit. In meinem Blog verwende ich die Tags im ursprünglichen Sinne: der Suche nach Stichworten. Meine Suche im Internet zur cleveren Einbindung führte mich zur Seite von Dietmar Schönwandt. Dessen Konzept zur iWeb-Einbindung habe ich noch etwas verfeindert.
Zielvorgabe
Installation einer Stichwortsuche mittels Tag Clouds unter Verwendung von iWeb 09 auf einem MobileMe-Server.
Vorgehensweise
Die Tag Cloud auf meiner Startseite besteht im Wesentlichen aus vier Elementen
- Dem Java-Script swfobjects.js von Geoff Stearns, welches vornehmlich die Funktion hat, einen sog. Flashfilm mit seinen Parametern in die Webseite einzubinden.
- Dem Flashfilm tagcloud.swf aus dem WordPress-Archiv, der eigentlichen Animation
- Einer frei konfigurierbaren XML-Datei, ich nenne sie hier „tagcloud.xml“
- Einem iWeb HTML-Baustein
Die Elemente 1 und 2 lassen sich hier: http://wordpress.org/extend/plugins/wp-cumulus/ herunterladen. Ich empfehle einfach die Beispieldateien etwas zu studieren, um der weiteren Vorgehensweise zu folgen.
1. MobileMe-Server vorbereiten
iWeb hat die böse Eigenschaft bei Aktualisierungen ganze Unterverzeichnisse vom Server leer zu räumen. Daher empfehle ich eine zentrale Ablage für swfobjects.js und tagcloud.swf auf MobileMe zu schaffen.
Dazu habe ich ein Verzeichnis „objekte“ mit dem Finder angelegt. Der Ort:
- iDisk > Web > Sites > objekte.
Hier hin kopiere ich die beiden o.g. Files. Sollten mehrere Websites in iWeb in den Genuss der Tag Clouds kommen, empfiehlt es sich weitere Unterstrukturen zu schaffen. Ich habe in zwei Blogs Tag Clouds im Einsatz. Daher kreiere ich zwei Unterordner:
- iDisk > Web > Sites > objekte > blog_1
- iDisk > Web > Sites > objekte > blog_2
In diese werde ich später die Konfigurationsdateien im XML-Format einstellen. Der erste wichtige Schritt ist damit getan. Ich lege mir im Übrigen die gleiche Verzeichnisstruktur auf meinem lokalen Mac an, damit behalte ich Ordnung und habe die Dateien jederzeit verfügbar. Wenn ich in einigen Wochen irgendetwas an meiner Konfiguration ändern möchte, kann ich mich besser erinnern, wo auf der iDisk der ganze Kram hingehört. Hier werde ich mich nur auf einen Blog konzentrieren: blog_1.
2. Konfigurieren der XML-Datei
Ich erstelle nun mit dem Texteditor (ich nutze übrigens Smultron) eine XML-Datei mit dem folgenden Inhalt.
<tags>
<a href="URL" title="topics"
rel="tag" style="font-size: 14pt;"
color="0x0000aa" target="_top">Text für den Tag 1</a>
<a href="URL" title="topics"
rel="tag" style="font-size: 14pt;"
color="0x0000aa"
target="_top">Text für den Tag 2</a>
...
</tags>
URL gibt den Zielort an, wenn man auf den Tag klickt. Die anderen Werte konfigurieren die Schriftgröße (14pt), die Schriftfarbe (dunkelblau) und den Text des Tags.
Ich nenne meine Datei tagcloud.xml und speichere sie zunächst lokal im Ordner blog_1 ab.
Für die Eingabe der Adresse hat man nun etliche Möglichkeiten:
- URLs von Internetseiten. Dies ist aber langweilig, da man für jede hinzugefügte Seite einen neuen Link erstellen müsste. Außerdem wird diese Vorgehensweise dem „Tags“ = „Stichwort, Anhänger“ nicht gerecht, oder
- Ein Suchausdruck – hier wird es interessant.
MobilMe und iWeb bieten eine Suchfunktion für eigene Blogs. Diese kann man sich zu Nutze machen, um die TagCloud zu konfigurieren.
Dazu aktiviert man zuerst für die Übersichtsseite des Blogs das Suchfeld im Inspector von iWeb (siehe Bild). Auf der Seite erscheint nun das Suchfeld, welches mal frei platzieren kann (sie Folgebild). Nun muss die Seite kurz veröffentlicht werden, damit die Suchfunktion aktiviert wird.
iWeb Inspector
Wechselt man nach erfolgreicher Veröffentlichung in den Browser und lädt seinen geliebten Blog, erscheint das Suchfeld im Idealfall dort, wo man es platziert hat. Nun gibt man einen beliebigen Suchbegriff ein und bestätigt mit der Entertaste. Ich habe der Einfachheit halber den Begriff „Mac“ eingegeben. MobileMe antwortet mit den Suchergebnissen (Bild). Den Suchbegriff habe ich natürlich nicht eingegeben, um zu testen, ob MobileMe auch wirklich funktioniert – so viel Vertrauen habe ich dann doch in Apple.
Die Suche dient einzig der Ermittlung der magischen Adresse: bei der Suche laufen im Hintergrund Skripte und Funktionen von MobileMe ab, dessen Parameter ich erhaschen möchte. Apple ist so freundlich und zeigt mir den gesamten Inhalt in der Adressleiste an.
Suchergebnisse
Diesen kopiere ich mir heraus: http://www.d-dk.de/is/search.html?x=0&y=0&q=mac&lang=de& GUID=A…….etc.
Möchte ich in der TagCloud nun meine Seiten nach dem Begriff Mac suchen, füge ich exakt diese Adresse in mein XML-File ein. Nun kann ich dies so oft wiederholen und die Suchbegriffe ändern, wie ich mag. aus meiner tagcloud.xml wird dann sowas wie:
<tags>
<a href="http://www.DeineDomain.de/is/search.html?
x=0&y=0& q=mac&lang=de&GUID=A......etc&
path=Pfad_zu_den_Beiträgen& .....
target="_top">Mac</a>
<a href="http://www.DeineDomain.de/is/search.html?
x=0&y=0& q=iphone&lang=de&GUID=A.....etc&
path=Pfad_zu_den_Beiträgen& .....
target="_top">iPhone</a>
...
</tags>
Ich füge so lange Suchbegriffe hinzu bis mir keine mehr einfallen oder ich keine Lust mehr habe. Dann speichere die Datei ab und kopiere sie ins Verzeichnis objekte/blog_1 auf der iDisk.
Diese Vorgehensweise hat einen sehr praktischen Aspekt: jeder neue Blog-Eintrag, den ich hinzufüge, wird automatisch nach den definierten Suchbegriffen durchstöbert.
3. Einfügen der TagCloud in iWeb
Der letze Schritt ist das Einbinden in die Webseite selbst. Dazu wird der HTML-Baustein von iWeb verwendet (Bild 4). Diesen auf die Seite ziehen und den folgenden Code einbinden.
Bild 4: iWeb HTML-Baustein
Wichtig sind die jeweiligen Ablageorte der einzelnen Dateien. Mein Beispiel entspricht der o.g. Ordnerstruktur. Die TagCloud erhält in diesem Beispiel eine Größe von 230 x 120 punkten und besitzt einen transparenten Hintergund. Auch mit den anderen Parametern kann man experimentieren, bis einem das Ergebnis zusagt.
<script type="text/javascript"
src="http://www.meineDomain.de/objekte/swfobject.js">
</script>
<div id="flashcontent">This will be shown to users
with no Flash or Javascript.<
/div> <script type="text/javascript">
var so = new SWFObject("http://www.meineDomain.de/
objekte/tagcloud.swf",
"tagcloud", "230", "120", "7", "#ffffff");
so.addParam("wmode", "transparent");
so.addVariable("tcolor", "0x333333");
so.addVariable("tcolor2", "0x009900");
so.addVariable("hicolor", "0x000000");
so.addVariable("tspeed", "100");
so.addVariable("distr", "true");
so.addVariable("xmlpath", "http://www.meineDomain.de/
objekte/blog_1/tagcloud.xml");
so.write("flashcontent"); <
/script>
Nach dem Klicken von „Anwenden“ im HTML-Baustein-Dialog, sollte iWeb die Cloud bereits anzeigen. Voraussetzung ist natürlich, dass sich die Dateien in den richtigen Ordnern auf der iDisk befinden. Also:
- swfobjects.js in iDisk > web/sites/objekte
- tagcloud.swf in iDisk > web/sites/objekte
- tagcloud.xml in iDisk > web/sites/objekte/blog_1
4. Fertig
So weit sollte dies erstmal alles sein. Sollte ich noch was vergessen haben?
Viel Spaß beim Experimentieren.
