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 ansteigt1. 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 2:

<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:

Zum Facebook Like Button
(sachliche Variante)

Ihr könnt mich mal gern haben.
(Abserviervorschlag)

Den Facebook Gefällt mir-Button zeigen!
(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 dazu2:

<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 4.


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.

Share on Facebook Share on Twitter Post to Delicious! Post to Diaspora!
Marc Stenzel

Über Marc Stenzel

Marc Stenzel ist Inhaber der New Media Agentur media deluxe sowie freiberuflich als Marketing- und Projektmanager Online, Dozent und Fachjournalist (DFJV) tätig. Marc Stenzel bloggt hier über aktuelle Themen aus dem fachlichen und räumlichen Umfeld des Unternehmens - mal sachlich, mal humorvoll:
Dieser Beitrag wurde unter E-Business, Marketing, Projektmanagement, Social Media, Suchmaschinenoptimierung, Usability, Webdesign abgelegt und mit , , , , , , , , , , , , , verschlagwortet. Setze ein Lesezeichen auf den Permalink.

5 Antworten zu “Datenschutz-verträgliche Facebook Share- und Like-Buttons”

  1. Benny sagt:

    Man darf halt nie vergessen, dass man bei Facebook in der Regel das Produkt ist und die Werbefirmen die echten Kunden. Es geht ums Geld und nicht um Service – selbst schuld, wir haben es nicht verhindert.

  2. Stefan Grossmann sagt:

    Ich finde es sehr bedenklich hier die – alten – Handy Tarife mit 10kb Lösungen zu nennen.
    Wer diese Tarife nutzt sollte überhaupt nicht ins Internet gehen.
    Alleine der Aufruf der Bild Seite würde da fast 10 € Kosten verursachen.
    Diese Tarife sollten – ganz – verboten werden.

    Stefan Grossmann

    • Marc Stenzel Marc Stenzel sagt:

      Es gibt noch sehr viele solche Tarife, und als Auslandstarife sind Preise in dieser Größenordnung auch bei aktuellen Verträgen durchaus üblich. Die Anzeige von Grafiken kann man übrigens in den Handy-Browsern abschalten, was Menschen mit solchen Äppärät-Tarifen gewöhnlich wohl auch tun.

      Es ist auch zu bedenken, dass ein Social Media Button selten allein kommt: neben dem Like-Button der Google+ Button (über 130 kB!), Share- und Twitter-Buttons etc. Nicht selten übersteigt dieser nicht ausdrücklich gewünschte Traffic das Volumen der eigentlich aufgerufenen Webseite.

  3. Durch die zusätzliche Entscheidungsinstanz kommt die Lösung der „Zwei-Klick-Variante“ den Vorgaben des Datenschutzrechtes definitiv näher. Da das BDSG die informierte Einwilligung fordert (also die datenschutzrechtliche Belehrung vor der Einwilligung), soll an dieser Stelle die abschließende Bewertung offen bleiben. Es darf allerdings die Verbesserung durch die zusätzliche Entscheidungsinstanz festgehalten werden!

  4. […] datenschutzkonforme „2-Klick-Lösungen” zur Social Media-Integration ausgehebelt werden […]