öffentlich
Redaktion Druckversion

Twitter, Facebook, Social Bookmarking: Add-Buttons und Social-Network-Anbindung für Ihre Website

Add-Buttons einbinden

Allgemeine Syntax

Möchten Sie einen Button zu Mister Wong hinzufügen, dann erstellen Sie einen Link, innerhalb dessen Sie den Button von Mister Wong als Bild 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://static.mister-wong.de/buttons/logo20.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.

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 ? 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

Downloads zu diesem Beitrag

Über die Autorin:

bild117864

Dr. Florence Maurice bietet Dienstleistungen im Webpublishing in Form von Fachtexten und Trainings (auch maßgeschneiderte Inhouse-Schulungen). Außerdem programmiert sie Webseiten. Ihre Themen: HTML, ...

Newsletter abonnieren