Anleitung: Shariff Wrapper Plugin für WordPress → Datenschutz­konforme Share-Buttons

Shariff Wrapper Plugin: Warum du herkömmliche Share-Buttons überdenken solltest

Übliche Social-Media-Buttons, senden bei jedem Seitenaufruf die Daten deiner User*innen an Facebook & Co. Diese erhalten so einen detaillierten Einblick über das Surf-Verhalten dieser, sogenanntes User Tracking. Das wiederum ist nicht datenschutzkonform und du solltest deshalb unbedingt eine Lösung für deine Website haben, die sowohl dich als Website-Betreiber*in als auch die Daten deiner Website-Besucher*innen schützt.

Heute stelle ich dir ein kleines Plugin genau dafür vor und zeige dir Klick für Klick, wie du es installierst und an deine Bedürfnisse anpasst.

Let’s go!

21 Minuten durchschnittliche Lesezeit

Was ist das Shariff Wrapper Plugin?

Die „herkömmlichen“ Share-Buttons übermitteln automatisch Daten deiner Besucher*innen an die sozialen Netzwerke, sobald diese deine Website besuchen. Sie müssen dazu nicht auf einen Share-Button klicken und haben daher keine Wahl, ob ihre Daten genutzt werden dürfen.

Shariff bildet hier gewissermassen eine Mauer zwischen dem Browser deiner User*innen und den Servern der Social-Media-Plattformen. Durch das Shariff Wrapper Plugin fragt deine Website direkt die „Like“- und „Share“-Zahlen bei den Servern der sozialen Netzwerke ab und gibt diese dann an deine Website-Besucher*innen weiter. So bleiben deren Daten sicher und sie entscheiden selbst, ob und mit welchen Diensten sie deine Inhalte teilen wollen.

Erst wenn eine Person aktiv auf den Teilen-Button klickt, kann der jeweilige Inhalt auch geteilt werden und das Ganze, ohne dass dabei die Social-Media-Plattformen mehr Informationen erhalten, als nötig.

Anleitung: Shariff Wrapper Plugin installieren

1. Wir befinden uns in unserem WordPress-Dashboard, und zwar unter dem Punkt Plugins neues Plugin hinzufügen.
2. Wir tippen hier einmal Shariff ein und sehen dann auch schon unser Plugin hier, um das es geht

   Shariff Wrapper

   Download

   Shariff stellt Teilen-Buttons bereit, die die Privatsphäre der Besucher schützen und im Einklang mit der Datenschutzgrundverordnung (DSGVO) stehen.

   By Jan-Peter Lambeck & 3UU

   5,0 Bewertung bezogen auf 101 Bewertungen

   (101)

   Zuletzt aktualisisert: 6 Monaten ago

   40.000+ Active Installs

   Compatible with WordPress 4.9
3. Mit einem Klick auf jetzt installieren, installieren wir das Plugin. Und sobald es installiert ist, aktivieren wir es mit einem weiteren Klick.

4. Aktualisiere jetzt einmal die Seite
5. Und dann finden wir hier unter dem Punkt „Einstellungen“ den neuen Reiter mit „Shariff“
6. Mit einem Klick gelangen wir hier in die Einstellungen des Shariff Plugins

Basis-Einstellungen der Share Buttons

Je nachdem, wie deine Webseite konfiguriert ist, was für Plugins und welches Theme du nutzt, hast du hier weniger oder auch mehr Möglichkeiten zum Auswählen, als auf meinem Bild. Wir gehen jetzt erst einmal die ganzen Einstellungen von oben nach unten und dann von links nach rechts durch die wichtigsten Einstellungen durch.

Welche Social-Media-Plattformen und Dienste möchtest du aktivieren?

Überlege dir zuerst, welche Dienste du aktivieren möchtest. Überlege dir hier gut, wo sich deine Zielgruppe aufhält. Es ergibt keinen Sinn, wahllos alle Dienste zu aktivieren, Hauptsache sie sind verfügbar. Im Gegenteil: bei zu viel Optionen kann es deine Leserschaft sogar davon abhalten, deine Inhalte zu teilen.

Folgende Dienste in dieser Reihenfolge aktivieren

Sobald du dich entschieden hast, können wir hier nun auswählen, in welcher Reihenfolge wir die Dienste aktivieren und anordnen wollen. Stell dir dazu einfach die Share-Buttons auf deiner Website vor und in welcher Reihenfolge von links nach rechts oder alternativ von oben nach unten sie angeordnet werden sollen.

Dazu wählst du aus den unten zur Verfügung gestellten Diensten deine Netzwerke aus und kopierst oder tippst deren Namen in das entsprechende Feld. Trenne dabei die einzelnen Dienste durch das Pipe-Zeichen →  |

Du kannst, solltest du nicht wissen, wie du auf deiner Tastatur das Pipe-Zeichen erzeugst oder es nicht funktioniert (Windows: Alt Gr + < oder Mac: ⌥ + 7), auch einfach das Zeichen hier oder beim Plugin aus dem Text kopieren.

Wo sollen die Shariff-Buttons alles automatisch eingefügt werden?

An dieser Stelle kannst du nun entscheiden, wo du deine Share-Buttons automatisch alles anzeigen lassen möchtest.

Wichtiger Hinweis an dieser Stelle: Du kannst die Shariff-Buttons auch manuell mittels einem Shortcode überall anzeigen, wo du möchtest. Wenn du also beispielsweise nur auf bestimmten Seiten die Buttons anzeigen lassen möchtest, kannst du das in jedem Fall auch mit dem Shortcode machen und brauchst hier nicht „Seiten“ anzuwählen und die Buttons somit auf allen Seiten anzuzeigen. Du kannst auch nachträglich für jede Seite, jeden Blogartikel etc. noch einstellen, ob du die Buttons dort z. B. deaktivieren möchtest. Dazu kommen wir später. Überlege dir hier also am besten, was die grundsätzliche Einstellung für deine Website sein soll.

Je nachdem, was du für ein Theme und welche Plugins du nutzt, werden dir hier auch unterschiedliche Optionen angezeigt, wo du die Buttons automatisch anzeigen lassen kannst. Oft werden diese z. B. nach Blogartikeln angezeigt. In manchen Fällen kann es auch sinnvoll sein, die Buttons ebenfalls vor dem Inhalt anzuzeigen, das hängt ganz von deinem Content und deiner Zielgruppe ab.

Für dieses Beispiel habe ich die Option gewählt, dass sie automatisch nach allen Blogartikeln angezeigt wird.

Ich zeige dir das hier einmal auf meiner Testseite. So werden die Buttons dann automatisch nach dem Inhalt des Blogartikels angezeigt. Das Design können wir übrigens später auch noch an unsere Bedürfnisse anpassen.

Die Shariff Buttons bei passwortgeschützten Inhalten und ausserhalb der Hauptschleife deaktivieren

Als Nächstes solltest du in der Regel die beiden Punkte:

• Die Buttons bei passwortgeschützten Beiträgen verbergen
• Shariff-Buttons ausserhalb der Hauptschleife deaktivieren

ebenfalls anhaken. Denn ich möchte im Normalfall nicht, dass passwortgeschützte Inhalte auf Social Media geteilt werden können. Wäre ziemlich sinnbefreit.

Bei der Einstellung für das Deaktivieren ausserhalb der Hauptschleife musst du wieder schauen, wie deine Website konfiguriert ist und welches Theme und Plugins du nutzt. Normalerweise empfehle ich hier den Haken zu setzen, damit die Social Media Buttons nicht an Orten auftauchen, an denen sie das nicht sollen. Solltest du hingegen bemerken, dass die Buttons an Orten nicht auftauchen, an denen sie es aber tun sollten, kannst du diese Option deaktivieren und testen, ob es dann klappt.

Social Share Buttons manuell mit Shortcode hinzufügen

Hier siehst du den Shortcode [ shariff ] (ohne Leerzeichen vor und hinter shariff), den du überall auf deiner Website in einem Textblock platzieren kannst, damit an dieser Stelle die Social Share Buttons angezeigt werden. Das kann z. B. nützlich sein, wenn du nur auf bestimmten Seiten oder Inhalten die Buttons anzeigen lassen möchtest.

Design der Share Buttons anpassen

Hier im zweiten Reiter unter dem Punkt Design haben wir verschiedene Einstellungsmöglichkeiten, um das Design an unsere Bedürfnisse anzupassen.

Standard-Button-Sprache

Bei der Standard-Button-Sprache schaust du, dass das dieselbe Sprache ist, die du für deine Website nutzt. Wenn deine Inhalte auf Deutsch sind, sollte hier also auch Deutsch stehen, damit die Buttons in der korrekten Sprache ausgegeben werden.

Button-Sprache bei mehrsprachigen Websites

Wenn du deine Website mehrsprachig anbietest und dazu ein entsprechendes Plugin, bspw. das geniale WordPress Multi Language Plugin, nutzt, kannst du hier einen Haken setzen, damit das Shariff Wrapper Plugin die Buttons je nach ausgewählter Sprache auch korrekt übersetzt.

Design der Shariff Buttons

Bei diesen Einstellungen findest du einige Farb- und Form-Design der Teilen-Buttons. Einerseits das rechteckige wie auch das runde oder abgerundete Design. Weiter unten kannst du den Border Radius so einstellen, dass du selbst bestimmen kannst, wie rund die Ecken werden sollen.

Ich empfehle dir tatsächlich bei den Share Buttons die herkömmlichen Farben zu nutzen, die auch die Social-Media-Plattformen selbst nutzen. Daran sind sich natürlich die User*innen im Internet auch gewohnt und hier kommt dann der Wiedererkennungswert ins Spiel.

Ich persönlich finde die runden Designs am ansprechendsten. Die rechteckigen Buttons empfinde ich als zu Platz einnehmend und nicht ästhetisch, das hängt aber natürlich stark von deinem restlichen Branding ab.

Button-Grösse

Bei der Button-Grösse wählst du einfach aus, wie gross die Share-Buttons angezeigt werden sollen auf deiner Website. Ich habe hier beim runden Design „gross“ ausgewählt. Passe auch das deinem restlichen Design deiner Website an.

Die Buttons horizontal auf die gesamte Breite strecken

Im nächsten Punkt kannst du auswählen, ob du die Buttons über die gesamte Breite deines Inhaltes strecken lassen möchtest. Dies ist jedoch nur bei den rechteckigen Buttons wirklich sinnvoll und sieht dann so aus.

Individueller Radius (border-radius) für das runde Theme (1-50)

Ich habe mich für das runde Design entschieden und möchte daher auch nicht, dass die Buttons über die gesamte Strecke gestreckt werden. Was ich jetzt aber noch einstellen kann, ist der Border Radius. Ich kann hier einen Wert zwischen 1 (komplett eckig) und 50 (komplett rund) eingeben und so beeinflussen, wie abgerundet die Ecken sein sollen. Ich persönlich bin zufrieden mit 50, also dem ganz runden Design.

Individuelle Hauptfarbe für alle Buttons (hexadezimal)

Und dann haben wir hier noch die Option, den Icons eigene Farben zu geben. Dazu trägst du einfach den Hex Code der gewünschten Farbe im Feld ein. Wir können auch noch einen zweiten Hex Code für den Hover eingeben. Die erste Farbe wechselt dann beim, mit der Maus über die Buttons fahren, zur zweiten Farbe. Hier kannst du dir unter anderem die Hex Codes für deine Farben anzeigen lassen.

Die Shariff-Buttons vertikal anordnen

Dann können wir auch sagen, dass wir die Shariff Buttons vertikal anordnen wollen. Das macht in den meisten Fällen nicht wirklich Sinn. Das ist natürlich Geschmackssache und hängt auch wieder vom Design deiner Webseite ab.

Ausrichtung der Shariff-Buttons

Hier legst du fest, ob du die Teilen-Buttons links, zentriert in der Mitte oder rechts anordnen möchtest.

In meinem Fall wähle ich zentriert, weil ich auch die Meta-Informationen mittig habe. Das hängt natürlich auch hier wieder vom Design deiner Webseite ab.

Ausrichtung der Shariff-Buttons im Widget

Dann haben wir noch die Option, dass wir die Shariff-Buttons ebenfalls in unseren Widget-Bereichen ausrichten können. Shariff liefert uns hier ein eigenes Widget mit dem Namen „Shariff“ mit. Wenn wir beispielsweise die Share-Buttons in unsere Sidebar, auch Seitenleiste genannt, bei unseren Blogartikeln anzeigen lassen möchten, können wir das Shariff Widget in die entsprechende Sidebar ziehen.

Achtung, ich nutze die Classic Widgets, weil ich kein Fan der Block Widgets bin. Bei dir kann das daher anders ausschauen.

Und dann könnten wir hier noch einen Titel eingeben, zum Beispiel „Teile diesen Beitrag“.

Und mit dieser Einstellung wählen wir dann, ob wir es links, zentriert oder rechts anzeigen lassen möchten.

Überschrift über allen Shariff-Buttons

Hier kannst du auch noch eine Überschrift über allen Teilen-Buttons hinzufügen, z. B. „Teile diesen Beitrag mit deinen Freund*innen!“ oder du lässt das Feld leer, dann wird auch keine Überschrift angezeigt. Du kannst hier HTML für die Formatierung nutzen, wenn du dich damit auskennst.

Alternative Überschrift, wenn die Anzahl der Teilungen null ist

Dann haben wir auch noch eine alternative Überschrift, falls bisher noch niemand den jeweiligen Inhalt geteilt hat. Hier könntest du zum Beispiel schreiben: „Sei die erste Person, die diesen Beitrag teilt“.

Bei den nächsten zwei Einstellungen könntest du das Design mittels CSS noch individualisieren. Das würde hier den Blogartikel jedoch sprengen und wenn du dich mit CSS eh auskennst, weisst du ja, was hier zu tun ist.

Buttons verstecken, bis die Seite vollständig geladen wurde

Dann können wir noch anhaken, dass die Buttons versteckt werden sollen, bis die Seite vollständig geladen ist. Das würde ich dir auf jeden Fall empfehlen, da es die Ladezeit deiner Website positiv beeinflusst. Zuerst wird so der ganze Rest der jeweiligen geladen und erst wenn alles vollständig geladen wurde, werden die Buttons angezeigt. Da diese im Normalfall unterhalb des Contents sind, reicht das auch völlig. Wenn du sie oberhalb des Contents hast, würde ich das nicht machen, weil sie dann direkt angezeigt werden sollen.

Links in einem Popup öffnen (erfordert JavaScript)

Als letzte Einstellung auf dieser Seite empfehle ich dir noch den Haken zu setzen bei „Links in einem Popup öffnen (erfordert JavaScript)“. Dies bewirkt, dass die Social-Media-Verknüpfungen sich in einem kleinen Pop-up öffnen, statt in einem neuen Tab, was wesentlich bedienerfreundlicher ist.

Normalerweise sind deine Website-Besucher*innen auf ihren jeweiligen Plattformen bereits angemeldet und können den Inhalt sofort teilen. In meinem Beispiel bin ich das nicht, weshalb dort die Log-in-Maske angezeigt wird.

Erweiterte Optionen der Share Buttons

Im nächsten Reiter finden wir die erweiterten Optionen für die Shariff Buttons. Diese sind optional, ich möchte sie hier dennoch der Vollständigkeit halber erwähnen. Das Plugin funktioniert ansonsten ab jetzt, so wie es soll, wenn du die bisherigen Einstellungen vorgenommen hast.

Unter den erweiterten Optionen hast du jetzt noch die Möglichkeit, hier für deine jeweiligen Plattformen, die du nutzen möchtest, weitere Infos hinzuzufügen. Zum Beispiel, wenn du X nutzt, könntest du hier deinen Benutzer*innennamen hinzufügen, sodass, wenn jemand auf X deinen Blogartikel teilt, dort dein X-Benutzer*innenname mitgeschickt wird. Dasselbe natürlich auch für die anderen Plattformen und Möglichkeiten.

Standardbild für Pinterest

Hier hast du die Möglichkeit, ein Standardbild für Pinterest zu hinterlegen. Dieses wird dann immer geteilt, wenn jemand auf Pinterest deinen Content teilt und du kein separates Bild für Pinterest beim jeweiligen Content hinterlegst (das kannst du direkt im Editor der jeweiligen Seite tun). Die optimale Grösse für Pinterest Pins beträgt aktuell 1080 × 1920 Pixel und kann hier nachgelesen werden.

Verstecke WhatsApp auf Desktop-Geräten

Hier könntest du das WhatsApp Icon auf Desktop-Geräten verstecken. Das würde ich dir jedoch nicht anraten, weil es mittlerweile Standard ist, dass man WhatsApp auch auf Desktop-Geräten nutzen kann.

Shortcode-Priorität

Die Priorität lässt du bitte so, ausser du weisst was du tust oder wirst von den Autor*innen des Plugins dazu aufgefordert (bspw., wenn du im Support bist).

Deaktiviere die Metabox

Diese Einstellung ist dazu da, dass du die Metabox im Editor selbst deaktivieren kannst. Diese ermöglicht dir, separate Einstellungen für jede Seite, jeden Blogartikel etc. vorzunehmen, die die globalen Einstellungen überschreiben, die wir hier in den Einstellungen vornehmen. Du kannst diesen Punkt auch vorerst deaktivieren und wenn du merkst, dass du zukünftig für bestimmten Content separate Einstellungen vornehmen möchtest, diese Option auch dann aktivieren.

Statistik der Share Buttons

Das Shariff Wrapper Plugin bietet uns an, dass es die sogenannten „Share-Counts“ für uns datenschutzkonform erfasst.

Die Statistik aktivieren

Möchten wir, dass die geteilten Inhalte gezählt werden, müssen wir hier also zuerst den Haken neben „Die Statistik aktivieren“ ankreuzen. Wenn du das nicht möchtest, kannst du an dieser Stelle aufhören, alle weiteren Einstellungen befassen sich nämlich mit der Statistik. Falls du die Statistik jedoch nutzen willst, bleib dran.

Zähler (Share-Counts) auf den Buttons anzeigen

Wenn du möchtest, dass die gezählten Shares auf den Shariff Buttons angezeigt werden, kannst du diesen Punkt hier anhaken. Wo möglich, wird dann die Zahl direkt neben der jeweiligen Plattform angezeigt.

Zähler (Share-Counts) verstecken, wenn sie null sind

Als Nächstes kannst du entscheiden, ob du die angezeigten Shares verstecken möchtest, solange diese noch auf null stehen. Wenn du diese Option aktivierst, werden die Shares erst angezeigt, wenn die erste Person deinen Content geteilt hat.

Facebook App ID und Facebook App Secret

Wichtig: Wenn du möchtest, dass auch die Facebook-Shares gezählt und angezeigt werden, musst du bei Facebook eine App erstellen. Darauf gehe ich hier nicht näher ein, dies würde den Rahmen sprengen. Du findest hier aber eine Anleitung von Facebook, wie du eine App erstellen kannst.

Sonst funktioniert diese Möglichkeit nicht. Facebook erlaubt es nämlich nicht mehr, dass die Zahlen abgerufen werden, wenn wir keine Facebook-App erstellen und dann hier die App-ID und den geheimen Schlüssel eintragen.

Wenn du keine App hast, musst du hier einmal die Statistik bei Facebook deaktivieren, damit du keine Fehlermeldung bekommst.

Den Cache automatisch befüllen

Das Shariff Wrapper Plugin fragt die sozialen Netzwerke nach einer von dir bestimmten Zeit an, wie viele Inhalte geteilt wurden und speichert diese dann datenschutzkonform auf deiner Website ab. Damit du verstehst, wie ein Cache funktioniert, muss ich ein wenig ausholen.

Wie funktioniert ein Cache?

Der Cache speichert quasi Kopien von Webseiten oder deren Teilen – in diesem Fall die Anzahl geteilter Inhalte – nachdem sie einmal geladen und angezeigt wurden. Dies hilft dabei, die Ladezeit deiner Seite zu reduzieren, weil bei einem erneuten Aufruf deiner Inhalte die gespeicherte Version schnell aus dem Cache geladen werden kann, anstatt dass die Seite jedes Mal komplett neu vom Server generiert werden muss.

Was ist die TTL (Time to Live)?

Die TTL (Time To Live) ist ein Wert, der bestimmt, wie lange eine gespeicherte Kopie im Cache verbleibt, bevor eine neue Kopie vom Server abgerufen werden soll. In unserem Fall verwendet das Plugin diese Technik, um die Häufigkeit der Anfragen an die sozialen Netzwerke zu reduzieren.

Das Plugin fragt zum Beispiel die Anzahl der Shares eines Beitrags ab und speichert diese Information im Cache. Mit einer TTL von einer Stunde bleibt diese Information für diese Dauer im Cache. Während dieser Zeit werden alle weiteren Anfragen direkt aus dem Cache bedient und nicht durch eine neue Abfrage beim jeweiligen sozialen Netzwerk. Nach Ablauf der Stunde wird die Information als veraltet betrachtet, und bei der nächsten Anfrage wird eine neue Abfrage beim sozialen Netzwerk gestartet, um die aktuellen Daten zu erhalten und wieder im Cache zu speichern.

So wird durch den Einsatz von Caching und einer gesetzten TTL das Laden der Website beschleunigt und die Belastung deines Webservers reduziert.

Deshalb solltest du den Cache nutzen

Ich empfehle dir daher, den Cache auf jeden Fall zu nutzen und eine für deine Website angemessene TTL zu setzen. Dazu kommen wir gleich.

Anzahl an Beiträgen auf dem Ranglisten-Reiter

Hier legst du fest, wie viele Beiträge, Seiten, Produkte etc. du anzeigen lassen möchtest in der Statistik. Die Einträge werden absteigend nach der Gesamtanzahl an Teilungen sortiert. Im Bild siehst du, wie die Statistik dann aussehen kann, je nachdem welche Dienste du aktiviert hast. Da es sich beim Bild um die Statistik meiner Test-Website handelt, siehst du dort lediglich eine Seite und einen Beitrag und noch keine geteilten Inhalte, wo die beiden Pfeile platziert wurden.

Cache-Lebensdauer (TTL) in Sekunden (60 – 7200)

Wie bereits oben näher ausgeführt, kannst du hier definieren, wie lange der Cache „lebt“. Trägst du hier beispielsweise den Wert „3600“ ein – 3600 Sekunden = 1 Stunde – erhöht sich die Anzahl geteilter Inhalte während dieser Stunde nicht, sondern bleibt gleich. Nach einer Stunde fragt das Plugin dann die neuen Zahlen ab und aktualisiert diese. Dann bleibt die neue Zahl wieder für eine Stunde dieselbe und so weiter.

Normalerweise sind 3600 Sekunden vollkommen ausreichend für eine herkömmliche Website. Wenn du jetzt aber beispielsweise eine News-Website betreiben würdest, die mehrmals täglich neue Inhalte veröffentlicht und auf der viele User*innen sind, die diese teilen, kann eine geringere Lebensdauer sinnvoll sein.

Die dynamische Cache-Lebensdauer deaktivieren (nicht empfohlen)

Diese Einstellung lässt du bitte deaktiviert.

Folgende Dienste deaktivieren (nur Statistik)

Hier kannst du bestimmte Dienste deaktivieren, sodass diese in der Statistik nicht angezeigt werden. Wenn du Dienste sowieso nicht nutzt, deaktiviere diese am besten.

Wichtig: Hier musst du auf jeden Fall Facebook deaktivieren, wenn du keine Facebook-App eingerichtet und die Facebook App ID und das Facebook App Secret weiter oben nicht eingetragen hast. Ansonsten gibt es eine Fehlermeldung.

Alle weiteren Einstellungen lässt du bitte, wie sie aktuell sind.

Für eine detaillierte Schritt-für-Schritt-Anleitung, schau dir mein YouTube-Video an

Wenn dir mein Video geholfen hat, freue ich mich auf YouTube über einen Daumen nach oben 👍 und lass gerne ein Abo da. Wenn du zusätzlich die Glocke 🔔 aktivierst, verpasst du ab sofort keine neuen Videos mehr.

Sicher teilen mit dem Shariff Wrapper Plugin: Eine Anleitung für Datenschutz auf deiner Website

Nachdem du nun gesehen hast, wie das Shariff Wrapper Plugin funktioniert und wie du es auf deiner Website einsetzen kannst, weisst du, wie du die Privatsphäre deiner Website-Besucher*innen schützen kannst. Indem du ihnen ermöglichst, selbst zu entscheiden, ob und wann ihre Daten geteilt werden, stärkst du das Vertrauen in deine Website und zeigst, dass dir ihre Sicherheit am Herzen liegt.