Shariff - sichere Sharing-Buttons
Im Zeitalter sozialer Netzwerke lebt auch das Web vom “Teilen” von Seiten - dem Veröffentlichen von Links zu Webseiten, Blogbeiträgen und anderen Ressourcen in diesen Netzwerken, bei Twitter, Facebook und Co. Das Open Graph Protocol und Twitter Cards, die ich vor ungefähr zwei Jahren vorgestellt habe, ermöglichen es dabei dem Seitenbetreiber, das Aussehen solcher Links - insbesondere ihren Titel, die textuelle Beschreibung und ein hinzugefügtes Bild - zu steuern; und weil Mobilgeräte zwar regelmäßig aus jeder App heraus (und somit auch aus dem Webbrowser) das “Teilen” von Seiten ermöglichen, der auf Desktops und Laptops verwendete Browser aber oft nicht, baut man als Seitenbetreiber gerne Buttons ein, mit denen die Seite “geteilt” werden kann.
Die verschiedenen sozialen Netzwerke bieten dafür in der Regel Codeschnippsel an, die aber den Nachteil haben, bereits beim Aufruf Daten des Nutzers an den jeweiligen Netzwerkanbieter zu übermitteln - nicht nur in Zeiten der Datenschutzgrundverordnung (DSGVO) ein No-Go. Hier hilft das Shariff-Projekt der c’t weiter, das Sharing-Buttons ohne Datenübermittlung an die sozialen Netzwerke anbietet.
In Serendipity lassen sich solche Buttons ganz einfach mit dem Plugin serendiptiy_event_social hinzufügen, das seit anderthalb Jahren auch hier im Blog werkelt. Aber auch auf der eigenen Homepage ist Shariff schnell eingebaut.
Installation von Shariff
Die Installationsanleitung findet sich direkt im Github-Repository und ist dort auch auf Deutsch verfügbar.
Im Prinzip genügt es, das aktuelle Release herunterzuladen und die dort enthaltenen Dateien auf den eigenen Webspace zu packen; die Schriftdateien von Font Awesome, das CSS und das Javascript. Verwendet man auf der eigenen Seite bereits Font Awesome, genügt als CSS-Datei shariff.min.css; muss Font Awesome noch eingebunden werden, muss man zu shariff.complete.css greifen. Ähnlich sieht es mit dem Javascript aus: wird JQuery bereits verwendet, genügt shariff.min.js, ansonsten ist shariff.complete.js erforderlich.
Packt man die Schriftdateien nicht direkt zum CSS, muss in der CSS-Datei jeweils der Pfad entsprechend angepasst werden.
Danach müssen CSS (im <HEAD>) und Javascript (am Ende der Seite) eingebunden werden, und schon ist alles vorbereitet. Jetzt fehlt nur noch das Einfügen der eigentlichen Share-Buttons an der passenden Stelle im Seitengerüst, mit den passenden Parametern, die in der Anleitung erläutert sind.
Shariff-Backend
Will man sich nicht auf Buttons beschränken, sondern auch anzeigen, wie oft die Seite im jeweiligen sozialen Netzwerk bereits geteilt wurde, muss zusätzlich ein Backend her, bspw. Shariff-Backend-PHP. Hier im Blog kann man besichtigen, wie das dann aussehen kann.
Installation
Auch die Installation des Backends ist vergleichsweise einfach. Es genügt, die Releasedatei zu entpacken und in ein Verzeichnis hochzuladen, in dem PHP-Dateien ausgefürt werden. In der mitgelieferten index.php sollte man dann noch die Konfiguration anpassen - und schon ist das Backend bereit! Ein Aufruf des Scripts mit der URL einer geteilten Seite als Parameter, bspw. in der Form http://example.com/my-shariff-backend/?url=http%3A%2F%2Fwww.example.com, sollte dann eine Reihe von Zahlen zurückliefern (nicht aber null). Funktioniert dieser Test, ist das Backend an sich bereits funktionsfähig.
Konfiguration und Dienste
Man möchte es vielleicht noch etwas anpassen - bspw. den Aufruf nur für bestimmte Domains - die eigenen nämlich - gestatten, oder die Liste der unterstützten Dienste einschränken oder erweitern.
Twitter wird als Dienst nicht mehr unterstützt, weil keine freie API mehr für solche Abfragen zur Verfügung steht; die Anzahl der Tweets der eigenen Seite lässt sich daher mit Shariff nicht mehr anzeigen.
Dies gilt auch für Google+.
Für die Unterstützung von Facebook muss man sich bei Facebook als Entwickler registrieren und eine Facebook-“App” aufsetzen. Der Ablauf ist in der Facebook-Entwicklerdokumentation Schritt für Schritt dargestellt:
- Als erstes muss man sich bei Facebook einloggen.
- Danach muss man sich zu seinem Account einen Entwickler-Account anlegen
- Als nächstes muss man sich eine App erzeugen.
Dabei wird eine App-ID und ein zugehöriger geheimer Key erzeugt. Diese benötigt man für die Konfiguration des Shariff-Backends. Es ist nicht erforderlich, die App tatsächlich zu aktivieren.
Auf der eigenen Webseite muss die Adresse des Backends dann noch im Attribut data-backend-url hinterlegt werden. Dort kann ein relativer Pfad, aber auch eine absolute URL wie https://shariff.example.com/ angegeben werden.
Fußangeln
Wenn das Backend an und für sich funktioniert, aber keine Zähler in den Share-Buttons auf der eigenen Webseite angezeigt werden, sollte man zunächst prüfen, ob man die Ausführung von Javascript freigegeben hat. Das gilt insbesondere dann, wenn das Backend unter einer anderen Domain läuft als die eigenen Webseite, weil man sich bspw. für mehrere Domains ein Backend unter einer einheitlichen Adresse wie https://shariff.example.com/ angelegt hat.
Im letzteren Fall muss man sich auch noch Gedanken über Cross-Origin Resource Sharing, kurz CORS, machen. Im Zweifel sollte man den Webserver für shariff.example.com einen HTTP-Header Access-Control-Allow-Origin: * übermitteln lassen. Für den Apache-Webserver lässt sich das mit der Zeile
Header set Access-Control-Allow-Origin "*"
in der vhost-Konfiguration lösen.
Kommentare
Ansicht der Kommentare: Linear | Verschachtelt