Archiv der Kategorie: Web-Design

HowTo – Datenschutzfreundlicher I Like/Gefällt mir Facebook Button

Posted on by
2

Nachdem das Thema immer wieder aktuell ist und wird, möchte ich an dieser Stelle auf Basis des heise-Quellcodes eine kleines How-To geben, wie man datenschutzfreundlich Facebook in seine Webseite einbindet.

Angestoßen durch die Auseinandersetzung von Facebook und Heise entstand ein OpenSource-Projekt welches ein vorheriges aktivieren des Facebook-Buttons erlaubt und dadurch das Senden von Daten an Facebook durch das reine Betreten der Webseite verhindert.

Leider ist dieser datenschutzfreundliche “I Like”-Button nicht ganz einfach zu integrieren, da die Einstellungen teils etwas missverständlich sind. Die Fehlersuche gestaltet sich ebenfalls JavaScript typisch als schwierig.

In jedem Fall beginnt die Integration mit der eigenen Facebook-Seite dessen URL vorab bekannt sein muss. Anschließend kann das gepackte Quellcodepaket von der Heise Projektseite heruntergeladen werden:

Download

Nachdem man die “jquery.socialshareprivacy.js” in den <head>-Bereich seiner Webseite integriert hat folgt die erste Stolperfalle:

Es fehlt die jQuery Bibliothek. Der Name der Datei suggeriert zwar, dass die nötigen Funktionen enthalten sind, dies ist jedoch nicht der Fall und es muss eine zweite JavaScript-Datei heruntergeladen werden. Doch Vorsicht! Die aktuellste jQuery-Bibliothek funktioniert nicht fehlerfrei mit dem Script von Heise. Ich verwendete daher dieselbe wie Sie auch heise selbst auf ihrer Webseite einsetzt. Die passende jQuery-Bibliothek kann von unserem Server heruntergeladen werden:

Download

Hat man diese Hürde umschifft und auch diese JS-Datei im <head>-Bereich eingebunden z.B. mittels…
<script type=”text/javascript” src=”/doubleclickfacebook/jquery.js”></script>
…muss man noch die Config-Paramenter in den -Bereich einfügen:

<script type=”text/javascript”>jQuery(document).ready(function($)
{
if($(‘#socialshareprivacy’).length > 0)

{
$(‘#socialshareprivacy’).socialSharePrivacy(
{

services :
{
facebook :
{
‘app_id’ : ’1234567890′
}
},
});
}
});
</script>

Abschließend noch eine Position für den neuen Facebook Button suchen und dort einen DIV-Container mit dem ID-Wert “socialshareprivacy” erstellen.
Das Heise JavaScript sorgt dafür, dass der Container mit dem Facebook iFrame, welches dann den Button enthält, gefüllt wird.
Ist auch dies erledigt kann man sich sein Werk bis dahin ansehen und checken ob bereits etwas erscheint. Wenn nicht, stimmt höchstwahrscheinlich ein Pfad nicht, oder die ID des DIV-Containers.

Die Hälfte ist geschafft….Nun die Konfiguration

Nun geht es an die größten Stolperfallen! Zunächst muss die “jquery.socialshareprivacy.js” mit einem Texteditor geöffnet werden. Danach sind die folgenden Werte zu setzen:

DC Settings

Zu beachten sind vor allem die Werte für “referrer_track” im Bereich Facebook. Hier muss die URL deiner Facebook Seite gesetzt werden. Die AppID welche vorher im bei der Einbindung auf “1234567890″ gesetzt wurde, spielt übrigens keine Rolle. In der aktuellen Version des “I Like”-Buttons wie er von Facebook selbst generiert wird, existiert der Parameter nicht mehr. Außerdem ist wichtig, dass der Wert für “URI” im unteren Bereich der Settings leer gesetzt wird. Ansonsten ist das Ergebnis der folgenden HTML-Codierung falsch, da der Wert der für “URI” gesetzt ist, als “referrer_track” Präfix verwendet wird. Wenn nun noch der Wert für “dummy_img” dem realen Pfad auf deinem Webserver angepasst wurde und Twitter sowie Google Plus durch setzen des Status auf “off” deaktiviert wurden, ist die Integration des datenschutzfreundlichen Facebook Buttons auch schon abgeschlossen.

Einfach was?

JR

———————

Update:
Unsere Kollegen von seo-united.de haben sich ebenfalls mit dem Thema Facebook befasst.