2-Klick-Lösung für Facebook, Twitter und Google +1

Die 2-Klick-Lösung für Facebook, Twitter und Google +1 von heise.de [1] ist kein Zauberwerk. Wir setzen seit Mitte August [2] eine eigene, schlichte Variante dieses Konzepts um. Bereits Ende Februar diesen Jahres [3] bloggte Leonidas darüber und verwies dabei auf die Anwaltskanzlei Ferner Alsdorf, welche eine Datenschutzkonforme Facebook-Integration [4] vorstellte und die Seite des SWR3 als Beispiel für eine Implementierung nennt.

Zugegeben, die Variante von heise.de ist hübsch und bietet auch einen Deaktivierungsoption, will man die Schaltflächen aber in eine Leiste mit anderen Social Bookmarks - so wie auf 3DCenter - einbinden, fügt sich die heise-Variante nur schlecht ins Gesamtbild ein. Ich möchte daher an dieser Stelle unseren Lösung kurz vorstellen, die von jedem Webmaster genutzt und mit etwas know-how für seine Zwecke adaptiert werden kann.

Prerequisites

Voraussetzung ist eine aktuelle Version von jQuery [5] und das Cookie-Plugin [6]. Der Standard-Code ohne jQuery ist als Kommentar der jeweiligen jQuery-Anweisung nachgestellt (soweit sinnvoll).

Beschreibung

Prinzipiell wird bei der Lösung davon ausgegangen, dass der User durch den ersten Klick seinen Willen äußert, die Funktion zu aktivieren. Damit er das nicht bei jedem Seitenaufruf erneut machen muss, wird ein Cookie gesetzt. Die Lebenszeit des Cookies kann im Code angepasst (variable cookieSettings.expires). Eine visuelle Möglichkeit zum Widerruf wird nicht angeboten, die entsprechende JavaScript-Methode dafür existiert jedoch. Der User muss folglich manuell den Cookie löschen, wenn er diese Entscheidung widerrufen will. Wenig sinnvoll erscheint es mir dann noch beim Widerruf über die Website sämtlichen externen Code zu löschen, da die Daten bereits geladen und an Dritte (Facebook, Twitter, Google) übermittelt wurden. Es wäre somit lediglich eine rein kosmetische Funktion.

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:g="http://base.google.com/ns/1.0" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta charset="utf-8" />
<title>Datenschutzkonformes Facebook, Twitter und Google +1</title>
<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jquery.cookie.js"></script>
<script type="text/javascript" src="path/to/javascript.js"></script>
<style type="text/css">
ul.likes  {
	list-style-type:none;
	margin:0;
	padding:0;
}
#likeInfoBox {
	position:absolute;
	display:none;
	z-index:50;
	border:0px solid black;
	background-color:infobackground;
	color:infotext;
	font-size:1em;
	width:20em;
	margin:0;
	padding:.5em;
	border-radius:.5em;
	box-shadow:0 0 1em .1em #888;
}
</style>
</head>
<body>
<ul class="likes">
	<li><div id="fb-root" style="display:inline"><a id="fbLike" title="Empfehlen-Button einblenden. Dadurch werden Daten an Facebook übermittelt." onclick="return enableLike('fbLike');" href="#"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFYAAAAVCAQAAAB2k9G+AAAAB3RJTUUH2wkCDx45kywcXAAAAAlwSFlzAAAaTAAAGkwBHCw5nAAAAARnQU1BAACxjwv8YQUAAAHlSURBVHja7Vc9SMNAGH2V+kNBpUrxDwepFAfRQaSiUFBwER1EQRwc1K2Io5DRqSC4SScnNxHFQaQ4OCnoIC4KIirYLBXUWUWoL2ksuSTNj1RqwRfurvflu7uX73u5XnwgbrL48+jyAT6FanOpmbhAhnR95UE1R7ei1BS8wC92k5AtnNoRLzVPFYbIypZOsouJSkBWRDcjnWT9c9xiFZLJKtn07OC3uxnHM9J4sZg24XL6c0xSRMWC3/52GptCf8Xj9BnMFY2qDdkGDLCuxxjO8Jq3BnUeEvpwzXYU93hAJcbRo1r7cYk6LKBRzYRSEszODpUfwgxa1LEHuEA1ex352UQPCUMmDxuyrVwcCPNK68h+CyGh+QxzgT1M8JFknKhkgTbEcIojzDIPa1ou9tGLaT5aCvNqP4QljjjGYn5mZw8bsldUbJIxWxesogwGWWqxy1gq7bZmjbLEsKHlIZeLR9wJy0WFEe48HDVrRNBkqcKn1urxRlnokcUyakwjvXlYbF0R3QUEtNYLnqi/lGHD62TcAvigvRCcPRwiaz6MiZq1xhY1HsGIYJuiWA6p8XDBUc4ePHWJB5kkd8YmxgZCHfXwdyvxQd75HhcfGWNk40U5BfwGVQX/R8TfQnl9KSg/yuUb7AuFKXhU8qzd+QAAAABJRU5ErkJggg==" width="86" height="21" alt="Empfehlen" /></a></div><fb:like send="false" layout="button_count" width="90" show_faces="false" action="recommend" font="verdana" ref="content"></fb:like></li>
	<li><a id="gplus" title="'+1'-Button einblenden. Dadurch werden Daten an Google übermittelt." onclick="return enableLike('gplus');" href="#"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAATCAQAAABbncd8AAAAB3RJTUUH2wkCDyEfGf+znQAAAAlwSFlzAAAewQAAHsEBw2lUUwAAAARnQU1BAACxjwv8YQUAAADnSURBVHjaY6z6z4AC+FC5DIpofE00PhMDhYDFkkGDAu03GFgodQT9DNjN8JohilgDfjC8ZOBnEIDzPzBsBYoIYLUKqwGvGNYymDA4QA3bxXALzJIl3gCQCCNU/CZQuwTDT4b3QBKHAcwoAtuA9v8E0tcZngDJBAZhIJZkmAxkS6OpxOGCVwzPwfQXIATJKYO98QVsAFGxkALE9xiWMlgyuMDFXgCxFI7YwvACIgwQ4veBWAKrB3AEojCDNYMKkjjIBSq4XYApIcLgiRYuDAwypBiADqrwyFGcFyguDxgZWDf/Il+7Lx8AKAMoP3gA5TcAAAAASUVORK5CYII=" width="32" height="19" alt="+1" /></a><g:plusone size="medium" count="true"></g:plusone></li>
	<li><a id="tweet" title="Twittern-Button einblenden. Dadurch werden Daten an Twitter übermittelt." href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-lang="de" data-via="{YOUR_TWITTER_ID}" onclick="return enableLike('tweet');"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAAUCAAAAAAMiPoCAAAAB3RJTUUH2wkCDyA4pe43twAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAAIKSURBVHjaYzzGQBZgYZCRJV3X4ydMDGRoA+phIs+ZQHf+JlMfEjj2xlycaH1/QRoMOYHk5Jf8TkDesYMgCSN3bMqfsYlAGMzJ4v///z+74AW78L6nLO8fGv3/z/Kf67ymkjr/fyxg+lN9MP2SOVkCqFvr4vPzn54zsvx7Zv2Rm0dLfme8xcmLmj/b5AUurzHbO+8IuwTTjTk73qhfOvjqsibIaS+ZGP4Awa9IcYEHP5mYuTjrb/358/0Hw4/vvIf/nH928M8h5hNbQrwXXHsxwTjp7Do5PnEnbpAGWDwIKPByMDEwsQqr/4D6xPD73bPKF37etN6lzs2ncPiQiPJfgyN8/JLGzGBpJoa/f9/8/cviLQQ04R+DXqr9XyBgAIaW7onLWQxrmDUZnuzdK2n89+uuvb8c/v5j+PkXrAAUD9yLpKVffgQy/v4w+wkyDBTEDBazpVgMjlv+1TkXy31ATeCgh+o5VgamV1+5ofb9+8cW9W7bLaDa31zhLP9AgJuT998/HU7Lf7YMTv/8ZIozDv1SCe5Insfwz+Fu1XuQCgbGYyr/mBjYX95+x8Auo/37H8Rzou//MDDw/vvKwvn9D4PA39+8b/9xs34RfP+HnY3hK0jNHcZjSuDoZwJ69/cfXIkDLMH0DyFyD5rOcOlAlv2HYhQkEMhI1x95Sdf1mYGF8cN90vUJMgAAlBrtaGn0a4EAAAAASUVORK5CYII=" width="55" height="20" alt="Tweet" /></a></li>
</ul>
</body>
</html>

JavaScript

$(document).ready(function() {
//window.addEventListener("load", function() {
	var likeButtons = ["fbLike", "gplus", "tweet"];
	for(var i=0,l=likeButtons.length; i<l; i++)
	{
		// jQuery only!
		$("#"+likeButtons[i]).bind({
			mouseenter: showLikeInfo,
			mouseleave: function(){
				$(this).attr("title", $("#likeInfoBox").text()); // tooltip wiederherstellen
				$("#likeInfoBox").fadeOut("fast");
			}
		});
		if (hasAllowdLike(likeButtons[i]))
			enableLike(likeButtons[i]);
	}
});
/**
	zeige Inhalt vom title Attribut als Info-Box
*/
function showLikeInfo(aEvent)
{
	var box = document.getElementById("likeInfoBox");
	if (!box)
	{
		var box = document.createElement("div");
		box.id = "likeInfoBox";
		$("body").append(box);
	}
	var pos = $(this).position();	// position des like buttons
	$(box).text($(this).attr("title")).css("top", pos.top).css("left", pos.left+$(this).width()+10);	// kopiere title-attribut in infobox und setzte absolute position
	$(this).removeAttr("title");	// verhindere das standard-tooltip angezeigt wird
	$(box).fadeIn("slow");
}
/**
	setze Cookie
	
	@param what String die ID des like buttons
*/
function allowLike(what)
{
	var cookieSettings = {expires: 23, path: '/'};
	switch(what)
	{
		case "gplus":
		case "fbLike":
			$.cookie(what, "1", cookieSettings);
			/*var expire = new Date(); expire.setDate(expire.getDate()+cookieSettings.expires);
			document.cookie = what+"=1; expires="+expire+"; path="+cookieSettings.path;*/
			break;
		case "tweet":
			$.cookie("twitter", "1", cookieSettings);
			/*var expire = new Date(); expire.setDate(expire.getDate()+cookieSettings.expires);
			document.cookie = "twitter=1; expires="+expire+"; path="+cookieSettings.path;*/
			break;
	}
}
/**
	lösche Cookie
	
	@param what String die ID des like buttons
*/
function unallowLike(what)
{
	var cookieSettings = {path: '/'};
	switch(what)
	{
		case "gplus":
		case "fbLike":
			$.cookie(what, null, cookieSettings);
			//document.cookie = what+"; expires=-1; path="+cookieSettings.path;
			break;
		case "tweet":
			$.cookie("twitter", null, cookieSettings);
			//document.cookie = "twitter; expires=-1; path="+cookieSettings.path;
			break;
	}
}
/**
	wurde like button aktiviert?
	prüft ob der Cookie gesetzt ist
	
	@param what String die ID des like buttons
*/
function hasAllowdLike(what)
{
	switch(what)
	{
		case "gplus":
		case "fbLike":
			return ($.cookie(what) == "1");
			//return (document.cookie.indexOf(what+"=1") >= 0);
		case "tweet":
			return ($.cookie("twitter") == "1");
			//return (document.cookie.indexOf("twitter=1") >= 0);
	}
}
/**
	aktiviert like button und lädt externen JS-Code nach
	
	@param what String die ID des like buttons
*/
function enableLike(what)
{
	$("#likeInfoBox").hide();
	switch(what)
	{
		case "gplus":
			$("#gplus").remove();
			/*var button = document.getElementById("gplus");
			button.parentNode.removeChild(button);*/

			$.getScript("https://apis.google.com/js/plusone.js");	// cross-domain geht erst ab jQuery 1.2 (http://docs.jquery.com/Release:jQuery_1.2/Ajax#Cross-Domain_getScript)
			/*var scr = document.createElement("script");
			scr.src = "https://apis.google.com/js/plusone.js";
			scr.async = true;
			scr.type = "text/javascript";
			scr.innerHTML = "{lang: 'de'}";	// settings
			var head = document.getElementsByTagName("head")[0];
			head.appendChild(scr);*/
			break;
		case "fbLike":
			$("#fbLike").remove();
			/*var button = document.getElementById("fbLike");
			button.parentNode.removeChild(button);*/

			$.getScript("https://connect.facebook.net/de_DE/all.js", function(){
				FB.init({
					appId  : "YOUR_APP_ID",
					xfbml  : true, // parse XFBML
				});
			});	// cross-domain geht erst ab jQuery 1.2 (http://docs.jquery.com/Release:jQuery_1.2/Ajax#Cross-Domain_getScript)
			/*var scr = document.createElement("script");
			scr.src = "https://connect.facebook.net/de_DE/all.js#appId=YOUR_APP_ID&xfbml=1";
			scr.async = true;
			scr.type = "text/javascript";
			var fb_root = document.getElementById("fb-root");
			fb_root.appendChild(scr);*/
			break;
		case "tweet":
			$("#tweet").removeAttr("onclick");
			/*var button = document.getElementById("tweet");
			button.removeAttribute("onclick");*/

			$.getScript("https://platform.twitter.com/widgets.js");	// cross-domain geht erst ab jQuery 1.2 (http://docs.jquery.com/Release:jQuery_1.2/Ajax#Cross-Domain_getScript)
			/*var scr = document.createElement("script");
			scr.src = "https://platform.twitter.com/widgets.js";
			scr.async = true;
			scr.type = "text/javascript";
			var head = document.getElementsByTagName("head")[0];
			head.appendChild(scr);*/
			break;
		default:
			return false;
	}
	allowLike(what);
	return false;
}

p.s.

Nur um das klar zu stellen: Ich will die Lösung von heise keineswegs schlecht machen, sondern lediglich aufzeigen wie leicht man mit einer JavaScript-Library wie jQuery eine Datenschutzkonforme-Lösung selbst implementieren kann.