öffentlich
Redaktion Druckversion

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

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.

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