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. 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-Ein-/Zweizeiler
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/html/js/scriptaculous/lib/prototype.js"></script>
<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.
Solltest du bereits das Prototype-Framework auf deiner Seite einsetzen, kannst du sogar auf die erste Zeile verzichten.
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.
Link zum Erstellen eines Twicks 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>
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
[...] Auf jeder Website, die das Twick.it Tool Tip nutzt, kann der LESER beliebige Wörter oder Sätze markieren, um sie erklären zu lassen. Dazu muss er nur die Alt-Taste drücken und die gewünschten Begriffe mit der Maus markieren. Technik-Freaks erhalten in einen separatem Artikel Hilfe. [...]
[...] Solltet ihr selber bloggen und das Twick.it-Plugin einbauen wollen: Denkt bitte dran – in der Enzyklopädie steht nur das drin, was auch mal jemand reingeschrieben hat. Also werdet aktiv und füllt sie mit euren eigenen Inhalten. Spaß macht's, ich verspreche es! Hier übrigens ein kleines Tutorial von Markus Möller dazu – Achtung, es folgt ein altmodischer Link, auf den man herkömmlich draufklicken muss – wie man das Plugin ins eigene Blog einbaut. [...]
[...] Mit dem WordPress-Plugin Twick.it Tool Tip kann „jeder Webmaster Erklärungen als Tool-Tip auf seiner Website anzeigen lassen. Besser noch: Dank Markup-Funktion mit der Alt-Taste kann jeder Leser selber entscheiden, welche Worte er erklärt habe möchte.“ Einfach ein beliebiges Wort markieren und dann mit gedrückter ALT-Taste darauf klicken; schon erscheint eine Erklärung (wenn vorhanden)! (Ist hier aktuell noch nicht aktiv.) Und als Lektüre empfehlenswert ist hierbei das „How-to“ von Markus Möller. [...]
Hab mal auf die schnelle eine Extension für den Chrome Browser geschrieben:
https://chrome.google.com/extensions/detail/ffnmaomnopfllokbmlahbinpinfndnjj
ich füge einfach, die beiden script-Dateien jeder Webseite hinzu:
var script = document.createElement("script");
script.setAttribute('type','text/javascript');
script.src="http://twick.it/html/js/scriptaculous/lib/prototype.js";
document.getElementsByTagName('head')[0].appendChild(script);
Leider funktioniert ist nicht immer!
mfg
Tschuikow
[...] es genau ist und wie ihr den Tool Tip auf eurer eigenen Seite einbauen könnt haben wir bereits erklärt. Nun hat sich der User Tschuikow daran gemacht, eine Erweiterung [...]
Hi Jungs!
Ich wollte das super Plugin beim eMag einbauen. Leider gibt es Probleme, wenn man die Dynamic Content Library verwendet. Ich denke das Problem ist das Zusammenspiel jQuery und Prototype 
Ich versuchs mal zu lösen 
Hinterlasse einen Kommentar
Suchen
Youser: @norro Keiner will einen weiteren Webkatalog. Dafür haben wir ja Nutzer,…
derlangemarkus: Hallo norro, hallo Lutz,
vielen Dank für euer Feedback.
@norro:
Keine…
lutz: Oh nein! Die Twick.it Erfinder bekommen $-Zeichen in den Augen, das finde…
norro: Euch verstaerkt an Unternehmen zu wenden, ist glaube ich keine gute Idee.…
