Datenschutz-verträgliche Facebook Share- und Like-Buttons

Da mein vor zwei Monaten geschriebener Artikel über einen datenschutzkonformen Google +1 Button sehr starke Resonanz fand, liefere ich hier auch entsprechende Lösungen für die wichtigsten Facebook-Buttons nach. Dieses Thema ist derzeit hoch brisant, da deutsche Datenschutzbeauftragte dem „Gefällt mir”-Button den Kampf angesagt haben und Website-Betreibern mit Bußgeldern bis zur Höhe von 50.000 Euro drohen, wenn sie den fraglichen Button nicht von ihrer Homepage entfernen.

Bußgelder für Facebooks Like-Button

Durchaus zu Recht übrigens, denn bei jedem Besuch einer Webseite mit dem Like-Button werden zahlreiche Nutzerinformationen an Facebook übermittelt – auch eben von Usern, die gar nicht vorhaben den Like-Button zu benutzen, die gar keinen Facebook-Account besitzen oder die absichtlich einen großen Bogen um Facebook machen. Hinzu kommt, dass durch den Like-Button der Traffic deutlich ansteigt¹. Für Inhaber eines alten Handy-Vertrages mit Datenvolumen-abhängiger Abrechnung kann der „Gefällt mir”-Button den Besuch einer Website durchaus um einige Euro verteuern. Der Like-Button stellt also nicht nur ein erhebliches Datenschutz-, sondern auch ein Usability- bzw. Accessibility-Problem dar.

Ein akzeptabler Kompromiss

Durch die hier aufgezeigten Lösungen werden Nutzerdaten erst dann an Facebook weiter geleitet, wenn ein Besucher der Website ausdrücklich die Like- oder Share-Funktion nutzen will und dies durch einen Klick auf einen entsprechenden Link oder Button ausdrückt. Da bis zu diesem Moment jeglicher Datenstrom von und zu Facebook unterbleibt, erhöht sich auch das Datenvolumen für den Aufruf der Website nicht unnötig. Andererseits benötigen Facebook-Fans nur einen Klick mehr, um die gewünschten Funktionalitäten uneingeschränkt nutzen zu können.

Datenschutzkonformer Like-Button bzw. Link

Der datenschutzgerechte „Gefällt mir“-Button ist ein Link zu einem (auf ausdrückliche Nutzerinteraktion hin) dynamisch eingebetteten Facebook iFrame (sog. Like-Button). Er wird technisch durch Überschreiben des Inhaltes eines Div-Containers erzeugt.

Der Code dazu ²:

<script type="text/javascript">
function loadFBLikeButton(){
document.getElementById("fblikebox").innerHTML='FACEBOOK-CODE';
}
</script>


<div id="fblikebox"><a href="javascript:loadFBLikeButton()" title="Link zum Facebook Like Button" >Show Like-Button!</a></div>

Die Funktionsdeklaration kann entweder in einer externen Javascript-Datei, im Head-Bereich oder direkt im Body-Quelltext stehen, der zweite Teil des Codes (die alleinstehende Zeile) muss im Body-Quelltext stehen – an der Stelle, wo der Button erscheinen soll. FACEBOOK-CODE ist durch den iFrame-Code auszutauschen, den man sich auf der entsprechenden Facebook Developer Seite ausgeben lassen kann. Wer gerne einen Button statt eines Text-Links verwenden will, tauscht die letzte Code-Zeile gegen die nachfolgende Version aus. FACEBOOK-IMG muss durch den Pfad zum Icon ersetzt werden, die Größenangaben des Buttons müssen im Code eventuell angepasst werden.

<div id="fblikebox"><a href="javascript:loadFBLikeButton()"><img src="FACEBOOK-IMG" width="16" height="168" alt="Facebook Like-Button laden!" title="Link zum Facebook Like Button" /></a></div>

Mit Button sähe das beispielsweise so aus:

(sachliche Variante)

(Abserviervorschlag)

(für Übervorsichtige)

Datenschutzkonformer Share-Button bzw. Link

Eine datenschutzkonforme Share-Funktion für Facebook kann durch eine einfache Verlinkung realisiert werden. Solch eine Lösung sähe beispielsweise so aus ^{2 3}:

Der Code dazu²:

<script type="text/javascript">
function post2FacebookLink() {
document.write('<a title="Post to Facebook!" href="https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href) + '&t=' + encodeURIComponent(document.title) +'" target="_blank">Post to Facebook!</a>');
}
</script>


<script type="text/javascript">post2FacebookLink();</script>

Statt eines Textes kann natürlich auch ein Button verlinkt werden. Ein Beispiel dafür findet sich in der Social Media Link-Leiste, am Fuße dieses Blog-Artikels. Der Code dazu sieht so aus ^{2 3}:

<script type="text/javascript">
function post2FacebookButton() {
document.write('<a title="Post to Facebook!" href="https://www.facebook.com/sharer/sharer.php?u=' + encodeURIComponent(window.location.href) + '&t=' + encodeURIComponent(document.title) +'" target="_blank"><img src="FACEBOOK-IMG" width="16" height="16" alt="Post to Facebook!" /></a>');
}
</script>


<script type="text/javascript">post2FacebookButton();</script>

In beiden Fällen kann die Funktionsdeklaration (der erste Teil des Codes, bis zur Leerzeile) entweder in einer ausgelagerten Javascript-Datei, im Head-Bereich oder direkt im Body-Quelltext stehen. FACEBOOK-IMG muss durch den Pfad zum Icon ersetzt werden, die Größenangaben des Buttons müssen im Code ebenfalls angepasst werden. Der zweite Teil des Codes (alleinstehende Zeile) muss im Body-Quelltext stehen, an der Stelle, wo der Button bzw. Link erscheinen soll.

Facebook gefällt das gar nicht!

Das Geschäftsmodell von Facebook besteht im Sammeln und Vermarkten von Kundendaten, und daher reagiert man dort beleidigt auf Lösungen wie diese. Das musste auch der Heise Verlag erfahren, als er vor einigen Tagen einen ähnlichen Workaround auf seiner Website einführte und prompt kurze Zeit später eine Beschwerde von Facebook einging. Mit einem desaströsen PR-Eigentor drohte Facebook zunächst mit einer Sperrung der Applikation, ruderte dann aber schnell zurück. Das vorläufige Fazit der Auseinandersetzung (Zitat Facebook): „2-klick-Button ist nicht ideal – aber kein Problem. Nur ein Like-Button der grafisch so tut als ob er einer ist, ist nicht ok.” Der Button zum Aufruf der Like-Funktion sollte also keine Verwechslungsgefahr mit dem eigentlichen Like-Button darstellen ⁴.

Fußnote 1:
Bei leerem Cache habe ich etwa 78,3 kB für den Aufruf des Like-Buttons gemessen. Wenn der Button bereits in den Cache geladen wurde, fallen bei mir für jeden Aufruf einer Webseite mit dem Button zusätzliche ca. 6,4 kB (davon die Hälfte als Upstream, Messung mit einem Smartphone) an. Bei einem alten Daten-Tarif von 0,19 Euro/10 kB, ergeben sich also rechnerisch 1,49 EUR für den Erstaufruf und weitere 12 Cent für jede weitere Seite.

Fußnote 2:
Die vorstehenden Scripte wurden bereits mit recht vielen Browsern getestet, und sie dürften in statischen „Standard-Webseiten” einwandfrei funktionieren. Für komplexere Anforderungen (z.B. CMS, HTML 4 Strict oder HTML 5, Seiten mit mehreren Like-Buttons etc) sind jedoch mit einiger Wahrscheinlichkeit spezifische Anpassungen notwendig.

Disclaimer: Die Bereitstellung der hier skizzierten Scripte und Muster-Buttons erfolgt selbstverständlich unter Ausschluss jeglicher Gewährleistung, ihre Verwendung erfolgt auf eigene Gefahr. In keinem Fall kann Marc Stenzel bzw. media deluxe oder einer ihrer Mitarbeiter für etwaige Schäden irgendwelcher Art verantwortlich gemacht werden, die durch die Benutzung oder im Zusammenhang mit der Benutzung der hier bereitgestellten Informationen entstehen, seien es direkte oder indirekte Schäden bzw. Folgeschäden einschließlich Gewinnausfalls, oder Schäden, die aufgrund des Verlustes von Daten entstehen.

Fußnote 3:
Die Verlinkung erfolgt nach folgendem Muster (XXX ist in diesem Fall die gemäß RFC 1738 kodierte Referrer-URL, FACEBOOK-IMG der Pfad zum Icon):

<a title="Post to Facebook!" href="https://www.facebook.com/sharer/sharer.php?u=XXX" target="_blank"><img src="FACEBOOK-IMG" alt="Post to Facebook!"></a>

Falls verfügbar (in vielen CMS ist das der Fall), ist es meist sinnvoller, statt der Referrer-URL die Canonical URL zu übergeben.

Fußnote 4:
Facebook bezieht sich dabei auf folgenden Paragrafen seiner „Platform Policies”:

8. You must not use or make derivative use of Facebook icons, or use terms for Facebook features and functionality, if such use could confuse users into thinking that the reference is to Facebook features or functionality.