Den Twick.it Tool Tipp kennt ihr, oder? Er lässt sich kinderleicht in eure Webseite einbauen und ermöglicht es euren Besuchern, beliebige Begriffe zu markieren, um so Begriffe nachzuschlagen.

Bisher war die Sprechblase, die den markierten Begriff erklärte, in feinstem Twick.it-Grün gehalten. Nun könnt ihr die Farbe selbst anpassen. Wie das aussehen kann, zeigt Sean schon mal auf seiner Reime-Seite Reimix.

Warum nicht mal orange?

Wenn ihr das WordPress-Plugin verwendet, dann geht im Backend zunächst auf den Menüpunkt „Plugins“. Dort könnt ihr das WordPress-Plugin auf Version 1.5.1 aktualisieren oder ganz neu installieren. Danach findet ihr Twick.it unter dem Menüpunkt „Einstellungen“. Genau hier könnt ihr dann die Farbe des Tool Tipps einstellen.

Oder per JavaScript

Alle, die kein WordPress verwenden und den Tool Tip als JavaScript-Einzeiler einbauen, kommen ähnlich leicht zur eigenen Farbe. Sucht die Zeile

http://twick.it/interfaces/js/popup/twickit.js

und hängt den Parameter ?color= hinten dran. Die Farbe wird als sechsstelliger Hexadezimal-Code (ohne vorangestellte Raute) angegeben. Einen roter Tool Tip erhaltet ihr also beispielsweise mit

http://twick.it/interfaces/js/popup/twickit.js?color=FF0000

Wer sich bei der Farbauswahl unsicher ist, kann ja unter http://de.selfhtml.org/helferlein/farben.htm ein wenig rumspielen.

Mehr Infos

Eine etwas ausführlichere Installationsanleitung gibt es im Artikel "So baue ich den Tool Tipp auf meiner eigenen Seite ein".

Mit der Twick.it-Suche ermöglicht ihr es den Besuchern eurer Webseite, Erklärungen direkt bei euch nachzuschlagen. Wie das aussehen kann, zeigt das Siegener Marienkrankenhaus (unteres Suchfeld) oder die MedienFabrik (rechte Spalte). Auf beiden Seiten bekommt ihr die Ergebnis-Twicks schon während der Eingabe präsentiert.

So kann es aussehen.

Für den Einbau ist nur folgender Code an der Stelle einzubauen, an dem die Suche erscheinen soll:

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

Das war's.  Wer mehr möchte, kann das Suchfeld noch per CSS formatieren:

input#twickit_search_include_searchterm

Let's go. Twickonize the web!

P.S.: Vielleicht interessiert dich auch der Twick.it-Tooltipp, mit dem Nutzer ganz nach dem Motto "Markieren geht über Studieren" beliebige Begriffe durch Markierung erklärt bekommen. Mehr Infos dazu findest du hier (siehe Abschnitt "Twick.it Tool Tip als JavaScript-Einzeiler").

P.P.S.: Noch viele weitere Goodies gibt es unter http://spielwiese.twick.it.

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:

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!

Wer war Paracelsus? Wofür steht HTML eigentlich? Woher kommt die Abkürzung App? Viele Blogger und Redakteure verwenden Fachbegriffe und Abkürzungen oder zitieren Namen, mit denen ihre Leser nichts anfangen können. Im besten Fall setzen sie einen Link auf eine externe Website mit weiterführenden Informationen. Das hat den Nachteil, dass einige Leser nicht zur eigenen Website zurückkehren. Darum haben wir Twick.it Tool Tip entwickelt. Ein Plugin, mit dem jeder Webmaster Erklärungen als Tool-Tip auf seiner Website anzeigen lassen kann. Besser noch: Mit der Alt-Taste kann jeder Leser selber entscheiden, welche Worte er erklärt habe möchte. So liefert TTT eine Antwort auf alle Fragen.

Passiver und aktiver Nutzen

Wie gesagt: TTT funktioniert in beide Richtungen. Der Autor eines Artikels kann potentiell erklärungsbedürftige Begriffe festlegen. Darüber hinaus hat der Leser zusätzlich die Möglichkeit, die Bedeutung beliebiger Wörter aufzurufen. Und so funktioniert’s:

1. Der AUTOR zeichnet kennzeichnet Wörter oder Listen mit dem Befehl [ twickit ] aus (ACHTING, bitte ohne die hier abgedruckten Leerzeichen!!!). TTT sucht nach der zurzeit besten Erklärung in der Twick.it Datenbank und setzt einen Link. Sobald ein Leser die Maus über den Link bewegt, wird der Twick als Tool Tip eingeblendet. Wenn der Leser auf den Link klickt, wird automatisch die entsprechende Twick.it-Themenseite aufgerufen.
2. 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.

Worte erklären, die noch nicht erklärt wurden

Webmaster können beliebige Begriffe auf Verdacht mit dem Link-Befehl markieren. Sobald jemand einen passenden Twick schreibt, wird das Wort zu einem Link umgewandelt.

Ganze Seiten erklären lassen

Es gibt auch den [ twickitall ]-Befehl, um ganze Seiten auszuzeichnen. Sinn macht das aber nur bei Aufzählungen, da sich sonst mit der zunehmenden Anzahl der Twicks die ganze Website in einen unübersichtlichen Link-Friedhof verwandelt. Zu viel Information stört ja ebenfalls den Lesefluss. Wenn du als Webmaster deinen Nutzern vertraust, ist die [ twickitall ]-Funktion sowieso überflüssig, denn…

Markieren geht über studieren

Jeder Webmaster kennt das Problem: Erstens kann er nicht in die Köpfe seiner Nutzer schauen und zweitens ist „jeder Jeck anders“, wie der Kölner sagt. Nehmen wir folgenden einfachen Satz: „John Lennon war das Mastermind der Beatles.“ Woher soll ich wissen, ob oder über welchen Bestandteil dieses Satzes meine Leser weiterführende Infos benötigen. Vielleicht haben sie noch nie etwas von John Lennon gehört. Vielleicht wollen sie spontan wissen, was der Vorname John bedeutet. Vielleicht interessiert sie, welche Musiker noch zu der Band The Beatles gehört hat oder sie können mit dem englischen Wort Mastermind nichts anfangen. Egal, welche Frage mein Leser hat: Mit der Markup-Funktion TTT kommt die Antwort zu ihm auf den Bildschirm – ohne dass er das gerade geöffnete Browser-Fenster verlassen muss.

Jedes Wort im Web erklären

Das Twick.it Tool Tip funktioniert in jeder Sprache, in jedem Browser und in jeder Programmiersprache. Rein theoretisch können wir also jedes Wort im Web erklären. Immer vorausgesetzt, dass erstens viele Leute Twick.it mit sinnvollen Inhalten befüllen und zweitens viele Webmaster die Erklärungen für ihre eigenen Internetauftritte nutzen. Wir hoffen, dass so eine Win-Win-Situation entsteht: Je besser die Twicks formuliert werden, umso größer ist der Nutzen der externen Applikation. Und je mehr Applikationen im Einsatz sind, desto größer wird der Wettkampf, die beste Erklärung zu formulieren.

Jetzt WordPress Plug-in testen

Für die Beta-Phase hat Markus erstmal ein Plugin für die beliebte Blogger-Software WordPress entwickelt. Hier könnt ihr das Plug-in runterladen. Die Installation dauert nur wenige Sekunden – auch die Konfiguration ist spielend einfach.

An dieser Stelle möchten wir alle Blogger und Webentwickler auffordern: Gebt uns Feedback! Funktioniert alles einwandfrei? Braucht ihr zusätzliche Funktionen oder Konfigurationseinstellungen? Und an alle Fans von Joomla und Typo3: Baut euch doch euer Twick.it Tool Tip Plug-in selber. Ist ganz einfach und die vielen Downloads können eurer Reputation sicher nicht schaden.

Hier erklärt Markus technische Details zur Installation des Twick.it Tool Tips.

Auch als Plugin für Google Chrome erhältlich

Für den Browser Google Chrome hat der Twick.it-User Tschuikow eine Erweiterung geschrieben, die den Tooltip wie von Zauberhand auf jede Seite einbettet. Das finden wir so gut, dass wir dieser Anwendung einen eigenen Artikel widmen: Tschuikow programmiert Twick.it-Extension für Google Chrome