DSGVO konforme Shariff Share Buttons
Shariff Logo: heise.de

DSGVO konforme Shariff Share Buttons

Mit der neuen DSGVO vom 25. Mai 2018 kamen auch neue Vorschriften zum Thema Share-Buttons für Seitenbetreiber. Nicht erlaubt sind fortan Like- und Sharebuttons, die ohne eine vorherige Opt-In Möglichkeiten (zum Beispiel mit der 2-Klick Variante) personenbezogene Daten versenden.

Privatsphäre der Besucher schützen

Oft haben Share-Buttons wie der Facebook- oder auch Google-Button Nutzerdaten zum Seitenbesuch gesammelt und an Facebook übertragen. Dazu musste man lediglich einfach nur die Seite besuchen und schon wurde dies getrackt. Ein Entwicklerteam des c’t-Projekt Shariff hat sich dessen angenommen und eine gute als auch effektive DSGVO-konforme Share-Button Lösung entwickelt. Das ganze Projekt ist auf GitHub zu finden.

Installation

$ cd my-project
$ npm install shariff --save

Direktdownload auf Github

Einbindung

Dieses kleine Javascript-Snippet im Footer oder vor dem </body> einbinden.

var buttonsContainer = getElementById("MyButton");
new Shariff(buttonsContainer, {
    orientation: 'vertical'
});

Beispiel

Im HTML muss ein einfacher DIV-Platzhalter erzeugt werden, wo später die Buttons durch das eben erstellte JavaScript eingebunden werden sollen. Mittels data-attributes (z.B. data-services) können Optionen wie die zu verwendenten Services (Twitter, Facebook, …) angegeben werden. Die gesammte alle zur Verfügung stehenden data-attributes findest du hier.

<div id="MyElement"   
     data-services="[twitter, facebook, ... ]"
     data-title="Titeltext"
     data-url="https://..."
/> 

Ergebnis:


Mögliche Optionen (data attributes)

AttributeDescription
data-backend-urlThe path to your Shariff backend, see below. Setting the value to null disables the backend feature. No counts will occur.
data-button-styleHow to display the buttons. Values: standard, icon, icon-count. With icon only the icon is shown, with icon-count icon and counter and with standard icon, text and counter are shown, depending on the display size
data-flattr-categoryCategory to be used for Flattr.
data-flattr-userUser that receives Flattr donation.
data-info-urlURL of the info page.
data-info-displayHow to display the info page. Values: blank, popup, self.
data-langThe localisation to use. Available: bg, cs, da, de, en, es, fi, fr, hr, hu, it, ja, ko, nl, no, pl, pt, ro, ru, sk, sl, sr, sv, tr, zh
data-mail-bodyIf a mailto: link is used in data-mail-url, then this value is used as the mail body. The body text should contain the placeholder {url} which will be replaced with the share URL.
data-mail-subjectIf a mailto: link is used in data-mail-url, then this value is used as the mail subject.
data-mail-urlThe url target used for the mail service button
data-media-urlMedia url to be shared (pinterest)
data-orientationvertical will stack the buttons vertically.
data-referrer-trackA string that will be appended to the share url. Can be disabled using null.
data-servicesAn entity-encoded JSON string containing an array of service names to be enabled. Example: data-services="[facebook,googleplus]" Available service names: twitter, facebook, googleplus, linkedin, pinterest, xing, whatsapp, mail, info, addthis, tumblr, flattr, diaspora, reddit, stumbleupon, threema, weibo, tencent-weibo, qzone, print, telegram, vk, flipboard
data-themeWe include 3 color schemes, standard, grey and white.
data-titleTitle to be used as share text in Twitter/Whatsapp
data-twitter-viaScreen name of the user to attribute the Tweet to
data-urlThe canonical URL of the page to check.