öffentlich
Redaktion Druckversion

Add-Buttons: Allgemeine Syntax

Add-Buttons: Allgemeine Syntax

Mister Wong ist ein bekannter deutschsprachiger Social-Bookmark-Dienst. Wie die Einbindung der Add-Buttons prinzipiell funktioniert und welche Optionen Sie haben, erfahren Sie nun am Beispiel der Buttons für Mister Wong. Gerüstet mit diesem Wissen können Sie auch den fertigen Code von anderen Buttons leicht an Ihre Bedürfnisse anpassen.

Möchten Sie einen Button zu Mister Wong hinzufügen, dann erstellen Sie einen Link, in den Sie den Button von Mister Wong einfügen:

<a href="http://www.mister-wong.de/add_url/?action=addurl& bm_url=http://www.example.com/&bm_description=Add_Buttons" title="Diese Seite zu Mister Wong hinzufügen"><img src="http://www.mister-wong.de/img/wong.gif" alt="Diese Seite zu Mister Wong hinzufügen" style="border: none" /></a>

Im Beispiel wird der Button - das Bild von Mister Wong - direkt verlinkt. Es steht innerhalb eines a-Elements.

Buttons lokal abspeichern

Wenn Sie mehrere Buttons einbinden, sollten Sie die Buttons vorher lokal auf Ihrem Webspace abspeichern und beim src-Attribut des img-Elements dorthin verweisen. Das spart Ladezeit.

Entscheidend ist die URL, die bei href angegeben ist.

http://www.mister-wong.de/add_url/?action=addurl& bm_url=http://www.example.com/&bm_description=Add_Buttons

Hinter der URL http://www.mister-wong.de/add-url/ werden nach einem Fragezeichen ? noch die notwendigen Parameter übergeben. Die einzelnen Parameter werden durch & aneinander gehängt.

  • action=addurl bedeutet, dass eine URL bei Mister Wong eingetragen wird.

  • Mit bm_url=http://www.example.com wird beispielsweise die URL http://www.example.com aufgenommen.

  • bm_description=Add_Buttons gibt den Titel der Webseite an, der dann schon voreingetragen ist.

  • Der Text, der beim Attribut title im Linkelement a steht, wird als Tooltipp angezeigt, wenn man mit der Maus über den Button fährt.

standardkonform

Bei der Übergabe per URL werden mehrere Parameter durch & getrennt aneinander gefügt. Wenn das Ganze standardkonform sein soll, damit ein Überprüfungsprogramm wie der Validator vom W3C nicht meckert, sollten Sie das &-Zeichen durch &amp; ersetzen.

Rahmen um Button entfernen

Verlinkte Bilder erhalten normalerweise einen blauen Rahmen. Diesen können Sie per HTML oder CSS abschalten. Für eine HTML-Lösung notieren Sie bei jedem Bild border="0". In CSS lautet die entsprechende Angabe wie im Beispiel:

<img src=" ... " .... style="border: none" />

Eleganter ist es, im Stylesheet den Rahmen für alle Bilder innerhalb von Links über folgende Regel zu entfernen:

a img { border: none; }

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen

Newsletter abonnieren