YiGG-Button auf einer webEdition-Seite einbinden

Bevor ich was technisches zum Y!GG-Button schreibe, möchte ich allen, die Y!GG bisher noch nicht kennen (was ich mir eigentlich nicht so recht vorstellen kann), kurz beschreiben, was Y!GG ist.

Bei Y!GG handelt es sich um eine Social Bookmark Plattform und kann als deutsche Antwort auf digg gesehen werden. Das ganze System dient zu Verbreitung und Bewertung von Nachrichten. Dabei gibt es keine konventionelle Redaktion, die die Nachrichten, Videos usw. aussucht, sondern hier hat der Benutzer die Fäden in der Hand - Web 2.0 eben. Um bei der Vielzahl der Einträge aus den verschiedensten Gebieten nicht die Übersicht zu verlieren. werden sie in bestimmte Kategorien eingeordnet und zusätzlich noch getaggt (Schlüsselwörter hinzufügen). Danach können andere Benutzer (ob bei Y!GG angemeldet oder nicht) mit ihrer Stimme für Einträge voten. Das bedeutet schlussendlich: Je mehr Punkte ein Eintrag hat, desto interessanter ist er.

Das als Versuch einer Beschreibung ... Y!GG ist natürlich noch viel umfangreicher und bietet noch jede Menge andere Funktionen. Am besten Sie lesen alles noch mal direkt auf der Y!GG-Webseite nach.

Nun aber zum technischen Part. Der Y!GG-Button.

Streng genommen ist dies kein rein webEdition-spezifischer Eintrag. Vom Grundgerüst her ist die Einbindung des Y!GG-Buttons immer gleich (oder sehr ähnlich) - egal welches System man verwendet. Weiter unten werde ich dann auf ein paar Besonderheiten und Möglichkeiten bezüglich webEdition eingehen.

Die allgemeine Syntax:

<script type="text/javascript">
    yigg_url = 'URL DES DOKUMENTS';
</script>
<script type="text/javascript" src="http://webtools.yigg.de/emb_ycount.js"></script>

Zunächst wird also eine JavaScript-Variable (yigg_url) definiert, deren Wert der URL zum aktuellen Dokument ist. Danach wird eine JavaScript-Datei eingebunden, welche einen IFrame erzeugt, der den interaktiven Y!GG-Button enthält.

Nun muss man also den Wert der JavaScript-Variablen "yigg_url" mit Inhalt füllen. Da der Y!GG-Button nur bei aktiviertem JavaScript erscheint, kann man dies auch bequem über JavaScript erledigen:

<script type="text/javascript">
  yigg_url = document.location.href;
</script>
<script type="text/javascript" src="http://webtools.yigg.de/emb_ycount.js"></script>

An dieser Stelle wäre man schon fertig. Der interaktive Y!GG-Button funktioniert nun schon.

Nun geht es an die Feinheiten. Es sollen folgende drei Funktionen noch zusätzlich hinzugefügt werden:

1. Der Y!GG-Button soll so eingebunden werden, dass der nachfolgende Text in umfließt.
2. Der Y!GG-Button soll nicht im Editmode von webEdition angezeigt werden.
3. Der webEdition-Redakteur soll festlegen können, ob der Y!GG-Button angezeigt werden soll oder nicht.

Wollen wir uns also ansehen, wie wird diese drei Aufgaben umsetzen können.

1. Der Y!GG-Button soll so eingebunden werden, dass der nachfolgende Text in umfließt

Um dies zu erreichen umschließt man den Y!GG-Button mit einem DIV-Kontainer, welchem man eine CSS-Klasse zuweißt. Somit kann man die Darstellung mittels CSS-Definitionen optimal steuern.

Die CSS-Definition:
(entweder in eine externe CSS-Datei oder in den Head-Bereich des Dokuments)

<style type="text/css" media="screen">
  .yiggbutton {
    float: left;
    padding: 0 5px 5px 0;
  }
</style>

Ergänzung des HTML-Quelltextes um den DIV-Kontainer:

<div class="yiggbutton">
  <script type="text/javascript">
    yigg_url = document.location.href;
  </script>
  <script type="text/javascript" src="http://webtools.yigg.de/emb_ycount.js"></script>
</div>

2. Der Y!GG-Button soll nicht im Editmode von webEdition angezeigt werden

Dies ist einfach. Man muss dazu den o.g. Quelltext nur mit dem we:ifNotEditmode-Tag umschließen:

<we:ifNotEditmode>
  <div class="yiggbutton">
    <script type="text/javascript">
      yigg_url = document.location.href;
    </script>
    <script type="text/javascript" src="http://webtools.yigg.de/emb_ycount.js"></script>
  </div>
</we:ifNotEditmode>

3. Der Redakteur soll festlegen können, ob der Y!GG-Button angezeigt werden soll oder nicht

Ebenso einfach - nur etwas mehr Schreibarbeit. Wir werden dazu dem Redakteur innerhalb des Editmodes eine Checkbox anbieten die er aktivieren muss, wenn der Y!GG-Button angezeigt werden soll. Danach kann man diese Checkbox abfragen (we:ifNotEmpty) und je nach Wert den Y!GG-Button anzeigen (Checkbox aktiviert) oder eben nicht (Checkbox nicht aktiviert). Der Quelltext dazu schaut dazu so aus:

<we:ifEditmode>
  <we:input type="checkbox" name="YiggButtonAnzeigen"/>
  Y!GG-Button anzeigen?
</we:ifEditmode>

<we:ifNotEditmode>
  <we:ifNotEmpty match="YiggButtonAnzeigen">
    <div class="yiggbutton">
      <script type="text/javascript">
        yigg_url = document.location.href;
      </script>
      <script type="text/javascript" src="http://webtools.yigg.de/emb_ycount.js"></script>
    </div>
  </we:ifNotEmpty>
</we:ifNotEditmode>

So. Y!GG-Button erfolgreich eingefügt und mittels CSS formatiert.
Mission accomplished!

P.S. Beiträge dieses Blogs dürfen bei Gefallen gern ge-YiGGed werden. :-)

Dirk Einecke
(living-e AG / Professional Services - webEdition)