Software development

Social Media Buttons ohne Skript einbinden

Social Media Buttons ohne Skript einbinden

Unbemerkt beobachten sie uns: Sharing Buttons von Social-Media-Plattformen wie Twitter, Facebook, LinkedIn und vielen anderen. Unwissentlich lassen wir es zu. Eine beachtliche Anzahl von Websites verwendet vorgefertigte Skripte der jeweiligen Anbieter und nimmt damit seinen Besuchern die Entscheidung zur Preisgabe von Daten vorweg.

Doch es geht auch ohne Skripte. In diesem Beitrag erfahren Sie, wie man auf der eigenen Website Social-Media-Buttons über einfache Links (HTML <a> Element) implementieren kann. Die Vorteile liegen auf der Hand:

  • Kontrolle über den Quellcode und das generierte Modell (DOM) ihrer Site
  • Einhaltung von gesetzlichen oder Compliance-Vorschriften
  • weniger Komplexität, weniger Abhängigkeiten und kürzere Ladezeiten
  • mehr Einfluss auf die Gestaltung von Buttons etc. und damit Wahrung des Designs bzw. der Corporate Identity

TL;DR: Verwenden Sie eingebettete Links, um Ihre Inhalte weiterzugeben, fügen Sie Open-Graph-Tags ein, passen sie die Größe Ihrer Bilder an. Verwenden sie Vorschau-/Debugger-Programme.

Auch wenn die großen Social-Media-Anbieter es nicht groß anküdigen: Ein einfacher HTML-Link reicht aus, um den Besuchern das “Teilen” von Inhalten einer Website zu ermöglichen. Dies gilt für die meisten relevanten Social-Media-Plattformen.

Der folgende Link lädt den Besucher der eigenen Site zum “Teilen” auf Facebook ein:

<a
  class="fb-xfbml-parse-ignore"
  target="_blank"
  href="https://www.facebook.com/sharer/sharer.php?u=https://YOUR-SITE-HERE.com"
>
  Facebook
</a>

Obwohl bekannt geworden ist, dass weitere, detailliertere Parameter nicht mehr unterstützt werden, funktioniert (aktuell) die Übergabe von Zitaten über den quote-Parameter noch. Damit kann man entweder einen dynamisch markierten Text oder ein vordefiniertes Zitat übergeben. Da der User diesen Text vor dem Teilen nicht bearbeiten kann, ist diese Lösung jedoch nicht besonders benutzerfreundlich.

Eine weitere Parameteroption ist display=page oder display=popup (Voreinstellung), mit der Sie steuern können, wie Ihr Freigabedialog angezeigt wird. Meiner Meinung nach ist der Name jedoch irgendwie irreführend: Mit display=page wird der Teilende ein Pop-Up sehen, während bei display=popup der Dialog im Vollbildmodus anzeigt wird.

Überprüfen lassen sich diese Angaben mit folgenden Beispielen (ein Facebook-Account wird benötigt):

Es ist jedoch mögich, dass die oben genannten Parameter von Facebook nicht mehr lange unterstützt werden - verlassen Sie sich also nicht zu sehr auf sie. Der Titel, das Bild und die Beschreibung der geteilten Seite sollen sich jedoch problemlos stylen lassen. Im Schritt 3 wird darauf eingegangen.

Auch Twitter unterstützt das Teilen der aktuellen Seite bzw. einer beliebigen URL über HTML-Links:

<a
  class="twitter-share-button"
  target="_blank"
  href="https://twitter.com/intent/tweet?url=https://YOUR-SITE-HERE.com"
>
  Twitter
</a>

Twitter bietet in seiner Dokumentation weitere Optionen an, weist aber darauf hin, dass JavaScript zusätzlich geladen werden sollte. Das entsprechende Snippet wird jedoch nur zur Gestaltung der Buttons verwendet - der Link behält seine Funktionalität auch ohne ihn.

Sie können Ihren Tweet mit text, hashtags und via-Parametern anpassen. Übergeben sie Ihre Hashtags als Komma-getrennte Werte. Der Seitentitel (bzw. der definierte Text zum Teilen) steht immer an erster Stelle, gefolgt von URL, Hashtags und via-Info. Dies geschieht unabhängig von der Parameter-Reihenfolge im Link. Wenn sie daran etwas ändern oder Bilder hinzufügen möchten, lesen sie diesen Artikel.

Beispiele:

Natürlich können auch im Business-Netzwerk LinkedIn Inhalte via Links geteilt werden:

<a
  target="_blank"
  href="https://www.linkedin.com/shareArticle?mini=true&url=https://YOUR-SITE-HERE.com"
>
  LinkedIn
</a>

Früher war es möglich, Titel, Zusammenfassung und Quelle als benutzerdefinierte Parameter zu übergeben, aber dies scheint nicht mehr unterstützt zu werden. Stattdessen werden die Informationen aus den Open-Graph-Tags in der Freigabevorschau angezeigt.

Beispiel (LinkedIn Account benötigt):

Inhalte mit Xing teilen geschieht nach einem ähnlichen Muster:

<a
  target="_blank"
  href="https://www.xing.com/spi/shares/new?url=https://YOUR-SITE-HERE.com"
>
  Xing
</a>

Xing bietet einen Parameter follow_url an. Dabei handelt es sich um die URL einer XING-Nachrichtenseite (sollte mit “https://www.xing.com/news/..." beginnen) für den auf der Ergebnisseite angezeigten Follow-Button. Leider kann kein Text an die URL angehängt werden.

Beispiele (Xing-Account wird benötigt):

Schritt 2: Bereitstellen von Open Graph Meta-Informationen

Die Frage mag aufkommen, wie man ohne Parameter für Titel, Beschreibung usw. dennoch sinnvolle Werte für das Teilen von Inhalten zur Verfügung stellen kann. Die Lösung liegt in der Bereitstellung entsprechender Meta-Informationen auf der geteilten Seite selbst. Dabei bietet sich die Verwendung von Tags nach dem Open Graph-Schema an, denn Open Graph (kurz: OG) wird von nahezu allen Social-Media-Anbietern (und Suchmaschinen) unterstützt.

<meta property="og:url" content="http://www.nytimes.com/2015/02/19..." />
<meta property="og:Typ" inhalt="artikel" />
<meta property="og:title" content="Wenn große Geister nicht gleich denken" />
<meta property="og:Beschreibung" content="Wie stark beeinflusst Kultur ..." />
<meta property="og:image" Inhalt="http://static01.nyt.com/images/...jpg" />

Diese Meta-Informationen gehören in den nicht-sichtbaren Kopfbereich der zu teilenden Seite, also in das HTML-<head>-Element. Neben den Standard-Eigenschaften wie og:title unterstützt Facebook zusätzlich den “fb:app_id"-Tag, wenn sie Facebook Insights verwenden und Analysen für den Verkehr zu Ihrer Website von Facebook aus einsehen möchten. Xing hingegen wertet die Eigenschaft og:site_name zusätzlich aus.

Twitter verwendet zusätzlich plattformspezifische Elemente, die durch OG-Tags ergänzt werden können:

<meta name="twitter:card" content="Zusammenfassung" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />

Schritt 3: Bilder, Bilder, Bilder

Sobald Texte und Meta-Informationen gepflegt sind, ist es an der Zeit, sich um aussagekräftige Bilder zu kümmern. Die Angabe einer korrekten Bild-URL ist natürlich Pflicht, aber darüber hinaus gibt es noch weitere Aspekte zu beachten.

Facebook hat seine Anforderungen auf einer entsprechenden Seite aufgeführt. Sie betreffen die Mindestauflösung, die maximale Größe, das Dateiformat und das optimale Seitenverhältnis. Andere Anbieter haben vergleichbare Vorgaben.

Bei LinkedIn sind zum Beispiel folgende Kriterien zu berücksichtigen:

  • maximale Dateigröße: 5 MB
  • minimale Auflösung: 1200 (B) x 627 (H) Pixel
  • empfohlenes Verhältnis: 1,91:1.

Wenn sie keinen automatischen (und oft unvorteilhaften) Zuschnitt ihrer freigegebenen Bildern haben möchten, sollten sie die Größe entsprechend anpassen.

FacebookTwitterLinkedIn
Abmessungenmin. 200x200 pxmin. 300x157 px, max. 4096x4096pxmin. 1200x627 px
Dateigrößemax. 8 MBmax. 5MBmax. 5MB
empf. Bildverhältnis1,91:12:11,91:1

Zusammenfassend kann man sagen: JPEG und PNG wird von allen Social-Media-Plattformen akzeptiert. Twitter unterstützt darüber hinaus noch WEBP und GIF. Vektor-Grafiken (SVG) sollte man hingegen lieber nicht verwenden.

Vorschau & Debuggen

Sie haben alle Schritte befolgt und es funktioniert immer noch nicht wie gewünscht? Um mit dem Offensichtlichen anzufangen: Der “localhost”-Link ihrer Test-Umgebung ist nicht “teilbar”. Auch die Freigabe-Vorschau Ihres kennwortgeschützten Entwicklungsservers wird nicht korrekt angezeigt. Zwar gibt es Lösungen für dieses Problem, aber sie sind recht kompliziert.

Ein weiterer Grund könnte die fehlerhafte HTML-Struktur sein oder sogar das Fehlen des <head>-Elements - dort suchen die sozialen Plattformen nach Open Graph-Einträgen.

Xing hat freundlicherweise eine Liste von typischen Ursachen zusammengestellt. Demnach scheitert das Teilen, wenn …

  • beim Aufruf der Website kein Status 200 (HTTP OK) empfangen wird
  • die freizugebende URL nicht richtig (URL-)kodiert ist
  • beim Aufruf der Website die maximale Anzahl von Weiterleitungen (20) überschritten wird
  • die Website mehr als 15 Sekunden für eine Antwort benötigt und damit in einen Timeout läuft
  • beim Aufruf der Webseite mehr als die unterstützen 20 MB übertragen werden

Der Sharing Debugger von Facebook ist ebenfalls eine große Hilfe. Er ermöglicht es im Vorfeld die Informationen zu sehen, welche beim Teilen verwendet werden. Damit können sie nachvollziehen, was noch fehlt. Einen Blick wert ist auch Open Graph Check, welcher die Open Graph-Tags auf Korrektheit prüft. Da OG-Tags von allen Plattformen verwendet werden, hilft Ihnen der Debugger auch bei Twitter, LinkedIn und Xing.

Fazit

Das Teilen von Inhalten ist ohne JavaScript und nur durch die Verwendung “klassischer” Links möglich. Damit lässt sich in der Regel eine einfache und Datenschutz-freundliche Social-Media-Sharing-Lösung für die eigene Website realisieren. Als Folge erhalten die jeweiligen Plattformen dadurch weniger Informationen über Besucher als es ihnen lieb wäre. Das mag ein Grund sein, weshalb diese Option zunehmend aus den Entwickler-Dokumentationen der Anbieter verschwindet. Lassen sie uns also dieses “geheime Wissen” behalten und teilen, solange es funktioniert.

Referenzen


Dieser Beitrag erschien zunächst in englischer Sprache auf Medium.
Das Aufmacher-Bild zum Artikel stammt von NordWood Themes auf Unsplash.