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

Von: Dr. Florence Maurice
Stand: 16. September 2011
4
(2)
Beitrag bewerten
Anmelden um Kommentare zu schreiben

Add-Buttons einbinden

URL und Seitentitel per JavaScript auslesen

Die eigene URL bei jedem Button per Hand einzutragen ist mühsam. Komfortabler wird es durch den Einsatz von JavaScript. Dieses kann für Sie automatisch die URL und den Titel der Seite, auf der der Button steht, ermitteln.

<a href="http://www.mister-wong.de/add_url/" onclick="location.href='http://www.mister-wong.de/index.php?action=addurl&bm_url=' + encodeURIComponent(location.href) + '&bm_description='+encodeURIComponent(document.title); return false;" 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>

Hier ist schon mehr Code erforderlich:

  • onclick ist ein JavaScript-Eventhandler, der dafür sorgt, dass der Code hinter dem = bei Klick auf den Link ausgeführt wird. Hier soll die bei location.href angegebene Adresse aufgerufen werden.

  • Hinter bm_url steht nun nicht mehr direkt die URL, sondern diese wird dynamisch ermittelt über encodeURIComponent(location.href).

  • Das + dient in JavaScript dazu, Strings aneinander zu hängen.

  • encodeURIComponent ist eine JavaScript-Funktion, die sich darum kümmert, dass alle in der Adresse der aktuellen Webseite möglichen Sonderzeichen korrekt kodiert werden, location.href ermittelt die URL der aktuellen Webseite.

  • Genauso wird auch der Titel des Dokuments automatisch ermittelt. Der Titel steht in document.title und die Funktion encodeURIComponent sorgt auch hier für die richtige Kodierung von Leerzeichen und anderen Sonderzeichen.

Auch ohne JavaScript

Im Codeschnipsel wird per JavaScript automatisch die URL und der Titel der Seite ausgelesen. Falls jemand JavaScript deaktiviert hat, funktioniert der Link trotzdem: Er wird ebenfalls zur Webseite von Mister Wong weitergeleitet, aber URL und Seitentitel sind noch nicht eingetragen.

Dass der Link trotzdem funktioniert, liegt an zwei Dingen: Erstens ist die URL zum Eintragen des Links bei Mister Wong auch bei href angegeben. Zweitens steht am Ende der JavaScript-Anweisung bei onclick die Angabe return false. Das sorgt bei aktiviertem JavaScript dafür, dass die normale Funktion des Links außer Kraft gesetzt wird.

Sie sehen manchmal auch die andere Methode, dass die JavaScript-Funktionalität direkt im Link hinter href über <a href="javascript: ... "> aufgerufen wird. Wenn Sie das einsetzen und jemand hat JavaScript deaktiviert, funktioniert nicht einmal mehr der Link.

Dies ist eine Leseprobe

Möchten Sie den Beitrag komplett lesen? Dann werden Sie Probemitglied und testen Sie akademie.de 14 Tage kostenlos!

Auf Social Bookmarks: Add-Buttons einbinden erfahren Sie mehr über diesen Beitrag und die weiteren Leseproben.

Weitere Informationen finden Sie auf unserer Infoseite zur Mitgliedschaft und in unseren AGB.

Ich bin bereits Mitglied
Jetzt Probemitglied werden
Ich kann in den 14 Tagen Probezeit formlos z.B. per E-Mail stornieren. Wenn ich das nicht tue, entscheide ich mich für ein