Facebook rechtskonform einbinden

von Achim Lammerts

Wie man Like-Buttons und Fanseiten von Facebook ohne rechtliche Komplikationen verwendet.

Facebook Button rechtskonform

Datenschützer monieren, daß Facebooks Like-Button und auch Fanseiten bei Facebook gegen deutsches Datenschutzrecht verstoßen. Im folgenden Beitrag wird eine Methode beschrieben, um die von den Datenschützern beklagte automatische Übermittlung von personenbezogenen Daten an Facebook zu unterbinden.
Als Nebeneffekt hat man dazu noch kürzere Ladezeiten der Seiten, was sich gerade bei schmalbandigen Verbindungen deutlich bemerkbar macht.

Die Problematik

Wer auf seiner Website den Like-Button oder den Nachrichtenstrom aus seinem Facebook-Profil, bzw. der Fanseite mit den von Facebook zur Verfügung gestellten herkömmlichen Methoden einbindet, macht sich unter Umständen wegen Datenschutzverletzungen gegenüber seinen Besuchern haftbar.
Ohne daß es dem Besucher bewusst wird, erhält Facebook bei jedem Aufruf der Seite die Informationen über den Besuch: die IP-Adresse, Browsereinstellungen, Betriebsystem, Aufenthaltsort, ggfls. Suchbegriffe, etc.
Ist der Besucher der Seite in diesem Moment in seinem Facebook-Profil angemeldet, können die Daten problemlos personalisiert werden. Das ist ganz sicher nicht immer gewünscht, angenommen z. B. beim Besuch von pornografischen Angeboten oder bei der medizinischen Recherche bei gesundheitlichen Problemen. Und Facebook schneidet garantiert alle Informationen mit, die sie bekommen können.

Andererseits ist Facebook möglicherweise ein wichtiges Marketinginstrument, um das eigene Online-Angebot zu bewerben - man will darauf natürlich nicht verzichten.

Die Lösung

Eine rechtskonforme Integration von Facebook sieht derzeit wohl so aus, dass der Like-Button zuerst einfach als reines Bild auf der Site eingebunden wird, ganz ohne Funktionalität und direkter Referenz zu Facebook. Erst mit dem Klick auf dieses Bild werden die Verbindungen zu Facebook aktiviert und die Funktionalität hergestellt. Eine solche technische Lösung führt dazu, dass der Besucher die Übertragung der Daten bewusst selbst aktiviert.

Die Methode

Im folgenden Beispiel beschreibe ich die Einbindung der Fanseite von SYNTAXYS bei Facebook in unserem Internetauftritt. Diese 1-Klick-Lösung erfordert aktiviertes JavaScript beim Client, auf eine Fallback-Lösung wurde auf Grund der gegebenen Problematik verzichtet. Zum Einsatz kamen dafür die Bibliotheken jQuery und das fancybox-Plugin. Beides muss natürlich im Kopfbereich der Seite referenziert sein.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery/plugins/jquery-fancybox.js"></script>

In der Marginalspalte rechts wurde einfach nur eine kleine Facebook-Grafik verlinkt, über die ID des Ankers können gewünschte Events getriggert werden:

<a id="facebook" title="Werden Sie ein Fan von SYNTAXYS auf Facebook" href="#data">
	<img src="/tl_files/SYNTAXYS_V7/images/facebookBanner.png" alt="Facebook Banner" width="40" height="15" />
</a>

Das Facebook-Bildchen sollte natürlich lokal referenziert sein. Weiter wird ein leerer Container mit eigener ID benötigt, der bei Klick gegen den iFrame mit den Inhalten von Facebook ausgetauscht werden soll. Die Position ist in unserem Fall egal, der Container wurde am Seitenende platziert:

... <div id="fb"></div> ...</body>

Das ist auch schon alles, was man als HTML benötigt und es gibt keine direkte Referenz zu Facebook, d. h. es werden noch keine Daten übermittelt.

Für die Darstellung unserer Fanseite als Overlay über der gerade geladenen Seite wird nun folgende JavaScript-Funktion benötigt, der Block sollte am Seitenende vor dem abschliessenden body tag definiert werden:

<script type="text/javascript"> 
<!--
$(document).ready(function() {
$("#facebook").mouseenter(function () { 
	$('#fb').replaceWith('<div id="fb"><div class="tooltipS">Bitte beachten Sie die<br /><a href="/Die_Experten_bei_Fragen_zu_Suchmaschinenoptimierung/#Facebook">Datenschutzbedingungen</a><br />zu Facebook-Plugins.</div></div>');
    }).mouseleave(function() {
		$('div.tooltipS').delay(1500).fadeOut('slow', function() {
		$('#fb').replaceWith('<div id="fb"></div>');
		});
	});
$("#facebook").click(function () { 
	$('#fb').replaceWith('<div style="display:none;position:absolute;left:-1000px;top:-1000px;"><div id="data"><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2FSYNTAXYS%2F198000293572229&width=640&colorscheme=light&show_faces=false&stream=true&header=true&height=440" scrolling="yes" frameborder="0" style="border:none; overflow:hidden; width:640px; height:480px; background-color:#ffffff;" allowTransparency="true"></iframe></div></div>');
    });

$("#facebook").fancybox({
'width'		: 640,
'height'	: 480,
'autoScale'     : false,
'transitionIn'	: 'elastic',
'transitionOut'	: 'elastic',
'speedIn'	: 600, 
'speedOut'	: 200,
overlayShow	: true,
overlayOpacity	: 0.3,
overlayColor	: '#660000'
});

});
// -->
</script>

Unter der Bedingung, daß die Seite vollständig geladen wurde, wird zuerst der mouseenter event auf dem Anker mit der ID "facebook" getriggert. Fährt der Benutzer mit der Maus über das Facebook-Bildchen, wird der Platzhalter <div id="fb"></div> gegen den Container ausgetauscht, der den Tooltip mit dem Link zu den Datenschutzbedingungen darstellt. Bei Bedarf kann sich der Besucher also darüber informieren.

Wird zusätzlich der click event ausgelöst, erfolgt der Austausch des Platzhalters <div id="fb"></div> gegen den Container, der die Facebook-Fanseite darstellt. In diesem Moment entsteht der erste Kontakt zu Facebook, der durch den Klick bewusst vom Besucher der Seite gewünscht ist.
Der Rest ist eigentlich nur kosmetische Darstellung. Das fancybox-Plugin lädt den Container mit den Inhalten von Facebook als Overlay.

Fazit

Mit der beschriebenen Methode werden nicht schon beim Aufruf einer Seite personenbezogene Daten an Facebook übermittelt. Das geschieht erst dann, wenn aktiv die entsprechende Grafik angeklickt wird. Der Besucher bekommt vorab einen Hinweis zu den Datenschutzbedingungen und erhält die Möglichkeit, diese zur Kenntnis zu nehmen.

Um den Like-Button von Facebook einzubinden, ist jedoch eine 2-Klick-Lösung erforderlich. Auf dessen Einsatz wird bei unserem Webauftritt verzichtet, statt dessen können die Blogartikel über die entsprechenden Icons ganz normal geteilt werden und auch hier entsteht erst bei Klick ein Kontakt zu Facebook.

Übrigens: Dieser Artikel darf gerne über Facebook & Co. geteilt werden ... ;-)

Zurück