Share Buttons ohne Plugins und JavaScript0


Über Share Buttons können Nutzer Inhalte bequem in sozialen Netzwerken teilen. Die Buttons lassen sich auch ohne Widgets, Plugins und JavaScript einbinden.
Honeyport | 2016 Share Buttons ohne Plugins und JavaScript

Ein Share Button, also eine Schaltfläche zum bequemen Teilen von Inhalten in sozialen Netzwerken wie Twitter und Facebeook, ist mittlerweile fester Bestandteil von Newsportalen und Blogs. Auch für meinen Blog habe ich nach einer einfachen Möglichkeit gesucht, diese Share Buttons zu integrieren. Für WordPress stehen gleich mehrere Plugins zur Verfügung, die einem durch verschiedene Einstellmöglichkeiten die absolute Kontrolle suggerieren – und natürlich gibt es auch Premium-Versionen, mit denen man in den Genuss des vollen Funktionsumfanges gelangt. Da ich die Anzahl an genutzten Plugins aus Performanz-Gründen möglichst gering halten möchte und bei Plugins, die wenig bewirken, aber doch sehr viele Einstellmöglichkeiten bieten, eher skeptisch bin, habe ich mich für ein alternatives Vorgehen entschieden. Mein Ziel war es, Share Buttons ohne Plugins und JavaScript in WordPress einzubinden.

Wie funktionieren Share Buttons und was bewirken sie eigentlich?

Grundsätzlich lassen sich zwei Arten von Buttons zum Teilen von Inhalten in sozialen Netzwerken unterscheiden: Zum einen existieren häufig offizielle „Widgets“, die gut dokumentiert sind und sich durch Copy & Paste leicht in die eigene Seite integrieren lassen. Diese Widgets zeigen oftmals auch die Anzahl der Nutzer an, die den Beitrag bereits geteilt haben. Die Informationen werden dafür bei jedem Seitenaufruf über AJAX abgefragt, nicht ohne dass dabei gleich ein paar Statistiken über den Nutzer an das jeweilige Netzwerk gesendet werden. Wer seine Leser diesem Tracking nicht aussetzen möchte, muss dafür sorgen, dass die Share Buttons erst mit einem Klick aktiviert werden – eine eher unpraktische Methode für den zweifelhaften Mehrwert eines Klickzählers.

Zum anderen gibt es aber auch die schlecht bis gar nicht dokumentierte Link-Lösung, bei der lediglich eine bestimmte URL mit entsprechenden Parametern versehen werden muss. Letztere ist aus meiner Sicht die bessere Variante, da man hier genau steuern kann, was wann geschehen soll und so seine Leser auch vor Tracking schützt.

Woher bekommt man die Links zum Teilen von Inhalten?

Alles, was man für die Buttons braucht, ist demnach der passende Link sowie je nach Gestaltungsvorstellung auch das jeweilige Logo der Netzwerke. Die Logos lassen sich einfach und retina-ready mit Hilfe von Font Awesome einbinden. Für die Links wird sich mit Sicherheit eine Library bei GitHub finden. Der Rest läuft über PHP und CSS.

Zu meiner Verwunderung konnte ich keine Library finden, die mir die entsprechenden  Links bereitstellt. Aus dem Grunde habe ich eine eigene erstellt. Es entstand die Bibliothek SocialShare.php, für die ich die Links von diversen Netzwerken recherchiert und über eine simple API zugänglich gemacht habe. Um Social Buttons in WordPress einzufügen, könnte man wie folgt vorgehen:


$shareUrls = new SocialShare(
     get_permalink(),
     get_the_title(),
     get_the_excerpt(),
     get_bloginfo( 'name' )
);

$links = $shareUrls->get(
    'facebook',
    'twitter',
    'google-plus',
    'whatsapp'
);

Zunächst übergibt man die Parameter für den Permalink, den Titel und der Zusammenfassung des Blog-Beitrags, den man teilen möchte, an die SocialShare-Klasse. Über die „get“-Methode erhält man ein Array mit den Links zu den gewünschten Netzwerken. Die Indexe des Arrays enthalten die Namen der Netzwerke, die praktischerweise mit den Bezeichnungen bei Font Awesome übereinstimmen. Eine Ausgabe mit Hilfe von PHP und Font Awesome könnte wie folgt aussehen:


echo '<ul class="share-buttons">';

foreach ( $links as $provider => $url ) {
    echo '<li>';
    echo '<a class="share-on-' . esc_attr( $provider ) . '" href="' . esc_url( $url, array( 'https', 'whatsapp' ) ) . '" target="_blank">';
    echo '<i class="fa fa-' . esc_attr( $provider ) . '"></i>';
    echo '</a>';
    echo '</li>';
}

echo '</ul>';

Die einzelnen Links müssen dann nur noch über CSS nach den eigenen Vorstellungen gestylt werden. Auf diese Weise erhält man ohne WordPress-Plugin schnell, einfach und performant alle Share Buttons zu den großen Netzwerken. Folgende Netzwerke unterstützt die Bibliothek aktuell:

  • twitter
  • facebook
  • google-plus
  • linkedin
  • y-combinator
  • instapaper
  • reddit
  • get-pocket
  • digg
  • stumbleupon
  • buffer
  • tumblr
  • vk
  • yummly
  • xing
  • delicious
  • whatsapp

Theme-Autoren können auf diese einfache Art die Share Buttons von Haus aus in ihr WordPress Theme integrieren und ihren Nutzern somit lästige Arbeit ersparen. Über die WordPress Theme Customization API ließe sich eine Einstellungsmöglichkeit für Position, Sichtbarkeit und Anzahl der Netzwerke realisieren.


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*

*