Markus Möller

Die Funktion des Twick.it Tool Tips hat Sean bereits beschrieben. Nun stellt sich die Frage: „Wie baue ich das Ding auf meiner eigenen Seite ein?“ Dieser Artikel beschreibt, wie man das passende WordPress-Plugin mit wenigen Klicks installiert und wie der Tool Tip auch auf anderen Seiten durch Einbau einer einzelnen Code-Zeile verwendet werden kann.

Twick.it Tool Tip als WordPress-Plugin

Zunächst einmal musst du dich in deinem Wordpress Backend anmelden. Um Plugins zu installieren, benötigst du Administrator-Rechte. Klicke dann links auf „Plugins“->“Installieren“.

Dann kannst du nach „Twick.it“ suchen.

Klicke auf „Jetzt installieren“ und folge den Installationsanweisungen.

Nach erfolgreicher Installation (nicht vergessen, das Plugin auch zu aktivieren!) findest du unter „Einstellungen“ den Menüpunkt „Twick.it Links“. Dort kannst du diverse Einstellungen vornehmen.

Im oberen Abschnitt findest du Einstellungen zu der Link-Funktion. Bei dieser Funktion kannst du als Redakteur Begriffe markieren, die erklärt werden sollen. Umrande die Begriffe dazu einfach mit einen [ twickit ] vor und einen [ /twickit ] nach dem zu erklärenden Begriff (Achtung! Das hier stehende Leerzeichen in den eckigen Klammern bitte nicht übernehmen). Sollte eine Erklärung bei Twick.it existieren, erscheint automatisch der beste Twick in deinem Blog.

Mit den Einstellungen „Default target in posts“ und „Default target in comments“ kannst du angeben, in welchem Fenster sich Links zu Twick.it öffnen sollen. Verwende hier „_blank“ für ein neues Fenster oder lasse das Feld frei, wenn du möchtest, dass Twick.it-Links im selben Fenster geöffnet werden.

Durch Aktivieren von „Allow Twick.it Links in comments“ können auch Besucher deines Blogs die [ twickit ]-Notation in ihren Kommentaren verwenden.

„Language code“ gibt die Sprache an, in der gesucht werden soll. Verwende hier „de“ für Deutsch und „en“ für Englisch.

Zu guter Letzt kann bei „Separator between Twicks“ das Trennsymbol angegeben werden, was bei Mehrdeutigkeiten verwendet wird.

Um den dynamischen Tool Tip zu aktivieren, bei dem der User durch Drücken der Alt-Taste selbst den zu erklärenden Begriff wählen kann, musst du nur noch einen Haken bei „Enable Twick.it-Marker-Popup“ setzen. Mit der Checkbox „Use custom style sheet“ kannst du dafür sorgen, dass du deine eigene Sprechblase mit CSS formatieren kannst. Dazu später mehr.

Link-Formatierung mit CSS

Profis können die Links zu Twick.it auch per CSS formatieren. Dazu wird jeder Twick.it-Link mit der Stylesheet-Klasse wp_twickit_link versehen. So können beispielsweise alle Twick.it-Links grün markiert werden:

a.wp_twickit_link, a:visited.wp_twickit_link, a:link.wp_twickit_link, a:active.wp_twickit_link, a:hover.wp_twickit_link { color:#6b8f00; }

Twick.it Tool Tip als JavaScript-Einzeiler

Auch wenn du kein WordPress einsetzt, kannst du den Twick.it Tool Tip ganz leicht verwenden. Alles, was du dazu tun musst, ist folgenden Code in deine Seite einzubauen:

<script type="text/javascript" src="http://twick.it/interfaces/js/popup/twickit.js"></script>

Als Position für den Code empfehlen wir die Zeile unmittelbar vor dem </head>-Tag.

Das war’s. Ab sofort können sich die Besucher deiner Seite Begriffe durch Drücken der Alt-Taste und markieren des Texts Begriffe erklären lassen.

Farbe einstellen

Die Farbe der Sprechblase lässt sich ebenfalls einstellen. Dazu dient der optionale Parameter color. Er erwartet die Farbe als Hexadezimalwert ohne vorangestellte Raute. Einen roten Tooltip gibt es beispielsweise mit dieser Zeile:

<script type="text/javascript" src="http://twick.it/interfaces/js/popup/twickit.js?color=FF0000"></script>

Link zum Erstellen eines Twicks oder zur Kartenansicht entfernen

Seit dem 11.07.2010 wird bei Themen, zu denen es noch keine Erklärungen gibt, ein Link angezeigt, mit dem man selbst einen Twick schreiben kann. Wenn du diesen Link nicht wünscht, kannst du das alte Verhalten leicht wieder herstellen. Füge dazu dem Aufruf des Skripts twickit.js noch den Parameter disableCreate=1 an. Das Skript muss in diesem Fall also so eingefügt werden:

<script type="text/javascript" src="http://twick.it/interfaces/js/popup/twickit.js?disableCreate=1"></script>

Auch die Anzeige der Weltkugel, mit der der Twick auf einer Karte angezeigt werden kann, kann unterdrückt werden. Dazu dient der Parameter disableGeo=1.

Tool Tip-Formatierung mit CSS

Auch das Popup kann mit CSS formatiert werden. Die folgende Skizze zeigt den Aufbau der Sprechblase:

Die Sprechblase besteht aus 4×3 Kacheln:

twicktip_tl(leer)	twicktip_tm(Sprechblasen-Ecke)	twicktip_tr(leer)
twicktip_ul(runde Ecke oben links)	twicktip_um(grüner Hintergrund)	twicktip_ur(runde Ecke oben rechts)
twicktip_ml(grüner Hintergrund)	twicktip_mm(grüner Hintergrund)	twicktip_mr(grüner Hintergrund)
twicktip_ll(runde Ecke unten links)	twicktip_lm(grüner Hintergrund)	twicktip_lr(runde Ecke unten rechts)

Die Grafik, die angezeigt wird, während die Twicks gesucht werden (), kann mit der ID "twicktip_wait" angesprochen werden.

CSS-Beispiel

Mit dem folgenden CSS-Code erstellt man beispielsweise ein rotes Kästchen mit schwarzem Rand:

<style type="text/css">

div#twicktip #twicktip_tl {background-image:none;}

div#twicktip #twicktip_tm {background-image:none;}

div#twicktip #twicktip_tr {background-image:none;}

div#twicktip #twicktip_ul {background-image:none; background-color: black;}

div#twicktip #twicktip_um {background-color:none; background-color: black;}

div#twicktip #twicktip_ur {background-image:none; background-color: black;}

div#twicktip #twicktip_ml {background-color:black;}

div#twicktip #twicktip_mm {background-color:red;}

div#twicktip #twicktip_mr {background-color:black;}

div#twicktip #twicktip_ll {background-image:none; background-color: black;}

div#twicktip #twicktip_lm {background-color:black;}

div#twicktip #twicktip_lr {background-image:none;}

div#twicktip_wait {background-image:url(http://twick.it/html/img/ajax-loader.gif); background-repeat:no-repeat;background-position: top left; width:16px; height:11px;}

</style>

Wichtig!

Wenn du deine eigene Formatierung einsetzen willst, dann musst du dafür sorgen, dass das Twick.it nicht sein eigenes CSS mitbringt. Dazu musst du der Datei twickit.js noch einen Parameter mitgeben. Binde die JavaScript-Date dann mit dem Parameter theme=custom ein:

http://twick.it/interfaces/js/popup/twickit.js?theme=custom

WordPress-User haben es da einfacher. Sie müssen bei den Plugin-Einstellungen nur ein Häkchen bei "Use custom style sheet" setzen.

Erweiterungen für Typo3, Drupal, Joomla, etc.

Selbstverständlich können mit der API noch weitere Erweiterungen geschrieben werden. Bist du Experte für ein bestimmtes Content Managment System oder Blog-Software und hast Interesse, ein Twick.it-Plugin zu entwickeln? Sprich uns an, wir helfen gerne!

Schlagwörter: JavaScript, Plugin, Tool Tip