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

Add-Buttons einbinden: Mehr Optionen

∅ 3.4 / 3 Bewertungen

Mehr Optionen

Auf dieser Seite

Im neuen Tab/neuen Browserfenster

Soll die Webseite von Mister Wong nicht im selben Browserfenster geöffnet werden, so geht das selbstverständlich auch. Nur leider genügt es nicht, beim Link target="_blank" anzugeben, da die normale Funktion des Links über die JavaScript-Angabe return false außer Kraft gesetzt wird. Um die Webseite von Mister Wong in einem neuen Fenster zu öffnen, brauchen Sie zusätzlich die JavaScript-Funktion window.open.

<a href="http://www.mister-wong.de/add_url/" onclick="window.open('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" target="_blank"><img src="http://static.mister-wong.de/buttons/logo20.gif" alt="Diese Seite zu Mister Wong hinzufügen" style="border: none" /></a>

Damit erscheint die Webseite von Mister Wong je nach Browsereinstellungen in einem neuen Fenster oder einem neuen Tab/einer neuen Registerkarte.

Neues Fenster mit mehr Möglichkeiten

Möchten Sie mehr Parameter beim neuen Browserfenster festlegen - beispielsweise die Größe oder ob alle Bedienleisten erscheinen sollen, so geht das ebenfalls mit JavaScript. 

<a href="http://www.mister-wong.de/add_url/" onclick="window.open('http://www.mister-wong.de/index.php?action=addurl&bm_url='+encodeURIComponent(location.href)+'&bm_description='+encodeURIComponent(document.title), 'mister wong','toolbar=no,width=700,height=400'); return false;" title="Diese Seite zu Mister Wong hinzufügen" target="_blank"><img src="http://static.mister-wong.de/buttons/logo20.gif" alt="Diese Seite zu Mister Wong hinzufügen" style="border: none" /></a>

Wieder steht hinter onclick nicht mehr direkt location.href, sondern die JavaScript-Funktion window.open zum Öffnen eines neuen Fensters. Sie erwartet als ersten Parametern die URL wie eben. Als zweiten Parameter hinter dem Komma können Sie dem neuen Fenster einen Namen geben, was für die weitere Programmierung nützlich sein kann. Sie könnten ihn aber auch leer lassen, müssen dann aber zwei '' schreiben. Als letzter Parameter folgen nun die Eigenschaften des Fensters:

  • toolbar=no: Das neue Fenster soll keine Werkzeugleiste haben.

  • width=700,height=400: Die Breite des neuen Fensters ist 700, die Höhe 400 Pixel. Diese Werte können Sie nach Belieben anpassen.

Textlink anstelle von Bild

Nicht immer passen die bunten Buttons. Manchmal macht sich ein einfacher Textlink besser. Ersetzen Sie hierfür das img-Element einfach durch den gewünschten Text.

<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">Diese Seite zu Mister Wong hinzufügen</a>

Verschiedene Bilder

Die meisten Buttons gibt es bei den jeweiligen Diensten in vielen Variationen, in unterschiedlichen Größen und Farben. Sie können denjenigen auswählen, der am besten zu Ihrer Webseite passt. Fündig werden Sie auf den Webseiten der einzelnen Social Bookmark-Dienste oder sonstigen Dienstleister.

69135_mister_wong_versch_buttons-gif

Viele verschiedene Buttons für Mister Wong

Die gezeigten Buttons samt eines Codegenerators finden Sie unter http://www.mister-wong.de/stuff/buttons/.

HTML statt XHTML

In den bisherigen Code-Schnipseln ist durchgängig XHTML verwendet. Wenn Sie die Buttons auf einer Webseite einsetzen möchten, die in HTML geschrieben sind, müssen Sie nur den schließen Slash / beim img-Element entfernen.

Aus dem XHTML-Code:

<img src="http://www.mister-wong.de/img/wong.gif" alt="Diese Seite zu Mister Wong hinzufügen" style="border: none" />

wird dann der folgende HTML-Code:

<img src="http://www.mister-wong.de/img/wong.gif" alt="Diese Seite zu Mister Wong hinzufügen" style="border: none">

Das ist alles, am restlichen Code müssen Sie keine Änderung vornehmen.