Der neue, verbesserte XING Share-Button – eine kleine Anleitung zur Einbindung in Ihren Blog oder Ihre Webseite

Von Victoria Schiffer, Software Engineer und Annika Tanudjaja, Junior Software Engineer

Haben Sie beim Surfen außerhalb von XING schon den neuen XING Share-Button entdeckt? Haben Sie ihn schon genutzt, um interessante Artikel, Videos oder andere Web-Inhalte in Form von Links mit Ihren XING-Kontakten zu teilen, oder die ausführlichen Statistiken zur Performance der geteilten Links (d.h. Anzahl der Empfehlungen, Kommentare, Klicks und mehr) anzuschauen? Und haben Sie auch schon überlegt, wie Sie diesen Button in Ihre eigene Webseite einbinden können? Es ist ganz einfach! Wir erklären Ihnen, wie es geht:

Assistent zum Bauen des Share-Buttons

Auf der Share-Button-Seite, die sie auch über die Fußzeile auf www.xing.com erreichen, können Sie aus fünf Varianten jene auswählen, die zu Ihrer Webseite am besten passt.

Schritt 1 – Wählen Sie ein attraktives Layout

Möchten Sie einen Share-Button mit dem neusten Stand der Technik in Ihre Seite einbauen? Oder bevorzugen Sie die einfache Variante für Webseiten mit wenig Platz? Ihnen steht eine breite Auswahl zur Verfügung.

Share-Button mit Zähler und erweiterter Statistik-Hovercard*

Der Share-Button in der Zähler-Variante (verfügbar in vertikal und horizontal) zeigt die Summe der Empfehlungen des jeweiligen Links auf XING an. Unsere neue Hovercard* zeigt erweiterte Statistiken, wie die als “interessant” markierten Links sowie die Summe der Klicks und Kommentare, die zu einem Link geschrieben wurden. Nutzer des Internet Explorers können die Hovercard* leider erst ab der Version 8 nutzen. Alle anderen IE-Nutzer sehen nur den Share-Button inklusive des Zählers.

Einfacher Share-Button

Für die einfache Variante unseres Share-Buttons bieten wir Ihnen drei Layouts in unterschiedlichen Größen an, um Ihnen eine bessere Auswahl zu ermöglichen.

Schritt 2 – Fügen Sie eine abweichende URL hinzu

In der Regel sollten Sie das Feld „Abweichende URL“ leer lassen. Nur wenn Sie möchten, dass eine andere Seite auf XING empfohlen wird als die, auf welcher der Share-Button eingebunden ist, sollten Sie die entsprechende URL in das Feld „Abweichende URL“ eingeben. Dies kann sinnvoll sein, wenn Sie zum Beispiel auf einer Übersichtsseite verschiedene Inhalte mit einem eigenen Button versehen wollen. Würden Sie in diesem Fall keine abweichende URL eintragen, so würden alle Share-Buttons die Übersichtsseite empfehlen und auch dessen Statistiken enthalten.

Wenn Sie dieses Feld hingegen leer lassen, wird genau die Seite empfohlen, auf der sich Ihr XING Share-Button befindet.

Was beim Eintragen einer „Abweichenden URL“ zu beachten ist

Wenn Sie sich für diese Option entscheiden, werden alle auf XING empfohlenen Inhalte Ihrer Webseite mit dieser URL verlinkt. Diese darf von Ihnen nicht URL-kodiert werden, da wir sie im Share-Button ebenfalls kodieren. Der Link würde also zweifach kodiert werden, was zu einem ungültigen Link führt, der nicht auf XING empfohlen werden kann.

Schritt 3 – Wählen Sie die Sprache für Ihren Share-Button

Der Share-Button ist sowohl in Deutsch als auch in Englisch verfügbar. Die Auswahl bestimmt die Sprache, in der die Tooltips und die Hovercard* angezeigt werden.

Schritt 4 – Die Vorschau Ihres Share-Buttons

In der Vorschau sehen Sie stets den Share-Button, wie er auf Ihrer Webseite erscheinen würde – mit all seinen Funktionen und den von Ihnen gewählten Einstellungen. Wenn Sie beispielsweise einen Share-Button mit Zähler auswählen und eine „Abweichende URL“ eingeben, zeigt Ihnen die Vorschau den Share-Button mit den tatsächlichen Zahlen der Empfehlungen und der erweiterten Statistik zur angegebenen URL an.

Schritt 5 – Kopieren Sie den Code in Ihre Webseite oder Ihren Blog

Der angezeigte Code muss von Ihnen nicht mehr verändert werden, wenn Sie den Share-Button nach Ihren Wünschen konfiguriert haben. Also kopieren Sie einfach den Code und fügen Sie ihn in den HTML-Quellcode Ihrer Webseite ein.

Was Sie beim Einfügen des Codes in Ihre Webseite beachten sollten

Sollten Sie eine Webdesign-Software verwenden, sogenannte WYSIWYG-Editoren oder auch ein Content-Management-System, beachten Sie, dass es zu fehlerhaftem Escaping des Codes kommen könnte. Wenn der Code in irgendeiner Art escaped wird, ist es möglich, dass der Share-Button nicht korrekt dargestellt wird oder nicht richtig funktioniert. Wenn Sie auf Probleme stoßen, überprüfen Sie bitte Ihren HTML-Quellcode. Die <script>-Tags sollten genau so aussehen wie die des Codes, den Sie auf der Share-Button-Seite im Abschnitt Code finden. Sie sollten auch nicht von Anführungszeichen eingeschlossen sein.

Schritt 6 – Informationen zu Ihren Datenschutzhinweisen hinzufügen

Wenn Sie eine Webseite aufrufen, die einen Share-Button beinhaltet,  speichern wir keine personenbezogenen Daten von Ihnen. Wir speichern insbesondere keine IP-Adressen. Es findet auch keine Auswertung Ihres Nutzerverhaltens über die Verwendung von Cookies im Zusammenhang mit dem XING Share-Button statt. Für die aktuellen Datenschutzinformationen zum XING Share-Button besuchen Sie die Seite https://www.xing.com/app/share?op=data_protection.

Informieren Sie die Besucher Ihrer Seite darüber

Womöglich möchten Sie Ihre Besucher über den sicheren und datenschutzfreundlichen Share-Button informieren. Hierzu fügen Sie Ihren Datenschutzhinweisen den Text hinzu, den Sie auf der Share-Button-Seite über den Link „Textvorlage XING-Datenschutz“ abrufen können.

Schritt 7 – Viel Spaß mit Ihrem frisch eingebundenen Share-Button

Wenn Sie sich für eine der Varianten mit Zähler entschieden haben, so stellen Sie Ihren Nutzern nun auch die Hovercard*-Statistiken bereit. Mit ihr bekommen sie einen Link zur detaillierten Statistikseite auf XING.

Link-Statistik

Hier können Sie die aktuellen Statistiken für Links einsehen, die auf XING empfohlen wurden. Wenn Sie die Seite über den Link auf der Hovercard* einer Ihrer Webseiten besuchen, sehen Sie detaillierte Statistiken für die Seite, von der Sie kommen. Zusätzlich können Sie Statistiken zu beliebigen Seiten abrufen, indem Sie die Adresse dieser Seite in das URL-Feld eingeben und danach „Suchen“.

Statistiken für Ihre auf XING empfohlenen Links

Für die Statistiken all Ihrer persönlichen Empfehlungen auf XING bieten wir Ihnen eine weitere Seite an. Diese zeigt die aktuellen Zahlen (u.a. der Empfehlungen, Kommentare und Klicks Ihrer Links sowie der als „interessant“ markierten Links) von Seiten an, die Sie mit Ihren Kontakten auf XING geteilt haben. Ihre persönlichen Statistiken erreichen Sie über die Link-Statistik-Seite.

Zusätzliche Informationen

Wir cachen die Zähler und detaillierten Statistiken für jede Seite. Momentan werden die Werte alle 5 Minuten aktualisiert. Wenn Sie einen Link empfehlen, werden die Caches für die jeweilige Webseite gelöscht und die Zahlen angepasst. Dagegen werden neue Kommentare, Klicks und neue „interessant“-Markierungen nach wie vor nur in einem Abstand von 5 Minuten aktualisiert.

Was denken Sie?

Wie finden Sie den neuen Share-Button? Was denken Sie über die zusätzlichen Link-Statistiken? Wie haben Sie die Einbindung des Share-Buttons in Ihre Webseite empfunden? Wir würden uns freuen, hierzu von Ihnen zu hören und daraus zu lernen.

Viel Spaß mit dem neuen XING Share-Button!

Troubleshooting

Wenn Sie zur Einbindung des Share-Buttons die oben angegebenen Schritte befolgt haben und dennoch Layout-Probleme mit dem Share-Button feststellen, haben wir vielleicht eine Lösung parat:

F: Wieso wird meine Hovercard* nicht vollständig angezeigt (z. B. an der rechten oder unteren Seite abgeschnitten)?

A: Das HTML-Element, welches den Share-Button beinhaltet, definiert möglicherweise eigene CSS-Styles. Diese könnten zu einer eingeschränkten Darstellung der Hovercard* führen. Probieren Sie eine der folgenden Lösungsmöglichkeiten:

1. Prüfen Sie das Element, das den XING Share-Button umschließt auf Style-Attribute, die das Layout des Buttons beeinträchtigen. (Entfernen Sie z. B. „overflow:hidden“ aus dem CSS dieses Elements.)
2. Umschließen Sie den Share-Button Code mit einem dedizierten <div> Element. Dieses Element können Sie nun beliebig ausrichten (z. B. „display:inline-block“, „float:right“).

F: Nachdem ich den XING Share-Button in meine Seite integriert habe, treten Fehler bei der Validierung der Seite auf (z. B. mit dem „W3C Validator“). Vorher war die Seite aber valide. Was ist passiert?

A: Der Code des XING Share-Button ist in HTML5 geschrieben. Möglicherweise spezifizieren Sie in Ihrem HTML-Code eine ältere HTML-Version. Bitte prüfen Sie daher das DOCTYPE-Tag Ihres HTML-Quelltextes darauf, ob eine bestimmte HTML-Version angegeben ist. In HTML5 sind keine weiteren Attribute im DOCTYPE-Tag enthalten. Ihr DOCTYPE-Tag sollte daher so aussehen: <!DOCTYPE html>

* Als Hovercard wird eine kleine “Karte” mit weiteren Informationen bezeichnet, die angezeigt wird, wenn Sie die Maus über den Zähler bewegen, ähnlich der Hovercard bei Profilinformationen auf der Plattform.

WordPress Integration

Sie können die XING Share Button Funktionalität auch in Ihren WordPress Blog integrieren. Hierzu gehen Sie im Admin-Bereich in die “Einstellungen” und dann auf “Sharing”. Dort klicken Sie im Bereich “Sharing Buttons” auf den Link “Neuen Dienst hinzufügen”. Im nun erscheinenden Formular tragen Sie bitte folgende Informationen ein

1. Service-Namen: XING
2. Sharing URL: https://www.xing-share.com/app/user?op=share;sc_p=xing-share;url=%post_full_url%
3. Icon-URL: https://www.xing.com/img/sections/share/share_button_16x16_v1.png

und klicken anschließend auf “Create Share Button”.

Als letzten Schritt ziehen Sie den WordPress Button für XING aus “Verfügbare Dienste” in den Bereich “Aktivierte Dienste”. Nun sehen Sie den finalen WordPress Button unter “Live-Vorschau”.

Ihre Änderung bestätigen Sie abschließend mit “Änderungen übernehmen”.