Social Share Privacy

More and more websites use like-buttons from Facebook, Google+ and Twitter. However, these buttons send information to these social networks even if the user do not click them, but only if they are present on a webpage. This way these networks are able to track which websites users are visiting and are able to build fairly complete browser histories of their users. Because this is neither what a user might expect nor what many website operators that embed like-buttons want, heise online developed a jQuery plugin that provides an alternative way of using these social services.

The idea was great, the implementation not so much. Therefore I forked it and created a GitHub project. While the original version only supported Facebook, Twitter and Google+ and all of this hardcoded, my version is modular and has modules for these services:

↓ 1st click: activate button

↓ 2nd click: like

Before activation this button doesn't send information to a third party.

• Buffer
• Delicious
• Disqus
• EMail (mailto: links)
• Facebook
• Flattr
• Google+
• LinkedIn
• Pinterest
• reddit
• Stumble Upon
• Tumblr
• Twitter
• XING

The concept is fairly easy. Per default only a gray mockup image of a like-button is embedded. Only if a user clicks this button the real like-button is loaded and information sent to the social network. With a second click the user can then like the webpage (or tweet it etc.).

All buttons can be permanently enabled.

The first click basically means that the user agrees that information is sent to the social network in question. But only for the page that embeds like-button and only for the selected social network. If the user visits the same page again the button is at first again deactivated. This way one can prevent, that social network owners can build complete surf profiles of their users.

If users don't care about their privacy and rather want the like-buttons to be always enabled they can do so in the settings menu, accessed via the gear icon. Per default this is done via cookies and on a domain basis, but this feature is extensible so that this information can be stored anywhere (e.g. via AJAX on a webserver or in the browsers HTML5 local storage).

For a comprehensive description of all options and methods look at the README on GitHub.

If you want to embed the share buttons on your Blogger blog like I do, simply add a HTML/JavaScript gadget to your layout and paste this code into it:

	<link rel="stylesheet" type="text/css" href="http://panzi.github.io/SocialSharePrivacy/stylesheets/jquery.socialshareprivacy.min.css" />
	<style type="text/css">
	#share {
	position: absolute;
	top: 110px;
	left: -120px;
	opacity: 0.3;
	-webkit-transition: opacity 0.5s linear;
	-moz-transition: opacity 0.5s linear;
	-ms-transition: opacity 0.5s linear;
	-o-transition: opacity 0.5s linear;
	transition: opacity 0.5s linear;
	}
	#share:hover {
	opacity: 1;
	}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://panzi.github.io/SocialSharePrivacy/javascripts/jquery.cookies.js"></script>
	<script type="text/javascript" src="http://panzi.github.io/SocialSharePrivacy/javascripts/jquery.socialshareprivacy.min.js"></script>
	<script type="text/javascript">
	// <![CDATA[
	// deactivate services you do not want:
	$.fn.socialSharePrivacy.settings.services.flattr.status = false;
	$.fn.socialSharePrivacy.settings.services.disqus.status = false;
	$(document).ready(function () {
	var absurl = $.fn.socialSharePrivacy.absurl;
	var data = _WidgetManager._GetAllData();
	var options = {
	layout: 'box',
	path_prefix: 'http://panzi.github.com/SocialSharePrivacy/',
	title: data.blog.pageName || data.blog.pageTitle || data.blog.title,
	uri: data.blog.canonicalUrl,
	language: data.blog.locale
	};
	var $post = $('*[itemscope][itemtype="http://schema.org/BlogPosting"]');
	if ($post.length === 1 && data.blog.canonicalUrl !== data.blog.canonicalHomepageUrl) {
	var $text = $post.find("*[itemprop~=articleBody]").contents();
	options.description = $.trim($.map($text, function (e) {
	var nodeName = (e.nodeName||'').toLowerCase();
	switch (nodeName) {
	case 'script':
	case 'style': return '';
	case 'br': return '\n';
	case 'p': return $.text(e) + '\n';
	default:
	if (e.className === 'gist') {
	return $.map($.find('.line-data .line',e), function (e) {
	return $.text(e)+'\n';
	}).join("");
	}
	return $.text(e);
	}
	}).join('')).replace(/\n(\s*\n)+/g,'\n\n');
	if (options.description.length > 600) {
	var abbrev = options.description.slice(0,597);
	if (/^\w+$/.test(options.description.slice(596,598))) {
	var match = /^(.*)\s\S*$/.exec(abbrev);
	if (match) {
	abbrev = match[1];
	}
	}
	options.description = $.trim(abbrev) + "\u2026";
	}
	options.image = $post.find("a[imageanchor=1]").attr("href") ||
	$post.find("img:not(.icon-action)").sort(function (a,b) {
	var $a = $(a), $b = $(b), A = $a.outerWidth() * $a.outerHeight(), B = $b.outerWidth() * $b.outerHeight();
	return B - A;
	}).attr("src");
	}
	else {
	options.description = $.trim($("header .description").text()) || options.title;
	options.image = $('header img, img.profile-img').attr('src');
	}
	if (options.image) {
	options.image = absurl(options.image);
	options.services = {tumblr: {type: 'photo'}};
	}
	var $share = $('<div id="share"></div>').css({
	position: 'absolute',
	top: '110px',
	left: '-120px'
	});
	$('.main-inner').append($('<div id="share"></div>').socialSharePrivacy(options));
	});
	// ]]>
	</script>

view raw share.html hosted with ❤ by GitHub

This example includes all supported buttons except a flattr button. In case you don't want all those services just remove the JavaScript file of the services that you do not want. If you want to also have a flattr button use this code and replace __FLATTR_UID__ with your flattr user ID:

	<link rel="stylesheet" type="text/css" href="http://panzi.github.io/SocialSharePrivacy/stylesheets/jquery.socialshareprivacy.min.css" />
	<style type="text/css">
	#share {
	position: absolute;
	top: 110px;
	left: -120px;
	opacity: 0.3;
	-webkit-transition: opacity 0.5s linear;
	-moz-transition: opacity 0.5s linear;
	-ms-transition: opacity 0.5s linear;
	-o-transition: opacity 0.5s linear;
	transition: opacity 0.5s linear;
	}
	#share:hover {
	opacity: 1;
	}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://panzi.github.io/SocialSharePrivacy/javascripts/jquery.cookies.js"></script>
	<script type="text/javascript" src="http://panzi.github.io/SocialSharePrivacy/javascripts/jquery.socialshareprivacy.min.js"></script>
	<script type="text/javascript">
	// <![CDATA[
	// deactivate services you do not want:
	$.fn.socialSharePrivacy.settings.services.disqus.status = false;
	$(document).ready(function () {
	var absurl = $.fn.socialSharePrivacy.absurl;
	var data = _WidgetManager._GetAllData();
	var options = {
	layout: 'box',
	path_prefix: 'http://panzi.github.com/SocialSharePrivacy/',
	title: data.blog.pageName || data.blog.pageTitle || data.blog.title,
	uri: data.blog.canonicalUrl,
	language: data.blog.locale,
	services: {
	flattr: {
	// replace this with your flattr id:
	uid: '__FLATTR_UID__'
	}
	}
	};
	var $post = $('*[itemscope][itemtype="http://schema.org/BlogPosting"]');
	if ($post.length === 1 && data.blog.canonicalUrl !== data.blog.canonicalHomepageUrl) {
	var $tags = $post.find('a[rel=tag]');
	var tags = [];
	for (var i = 0; i < $tags.length; ++ i) {
	var tag = $.text($tags[i]).replace(/[^a-z]/ig,'');
	if (tag) {
	tags.push(tag);
	}
	}
	if (tags.length > 0) options.services.flattr.tags = tags.join(',');
	var $text = $post.find("*[itemprop~=articleBody]").contents();
	options.description = $.trim($.map($text, function (e) {
	var nodeName = (e.nodeName||'').toLowerCase();
	switch (nodeName) {
	case 'script':
	case 'style': return '';
	case 'br': return '\n';
	case 'p': return $.text(e) + '\n';
	default:
	if (e.className === 'gist') {
	return $.map($.find('.line-data .line',e), function (e) {
	return $.text(e)+'\n';
	}).join("");
	}
	return $.text(e);
	}
	}).join('')).replace(/\n(\s*\n)+/g,'\n\n');
	if (options.description.length > 600) {
	var abbrev = options.description.slice(0,597);
	if (/^\w+$/.test(options.description.slice(596,598))) {
	var match = /^(.*)\s\S*$/.exec(abbrev);
	if (match) {
	abbrev = match[1];
	}
	}
	options.description = $.trim(abbrev) + "\u2026";
	}
	options.image = $post.find("a[imageanchor=1]").attr("href") ||
	$post.find("img:not(.icon-action)").sort(function (a,b) {
	var $a = $(a), $b = $(b), A = $a.outerWidth() * $a.outerHeight(), B = $b.outerWidth() * $b.outerHeight();
	return B - A;
	}).attr("src");
	}
	else {
	options.description = $.trim($("header .description").text()) || options.title;
	options.image = $('header img, img.profile-img').attr('src');
	}
	if (options.image) {
	options.image = absurl(options.image);
	options.services.tumblr = {type: 'photo'};
	}
	$('.main-inner').append($('<div id="share"></div>').socialSharePrivacy(options));
	});
	// ]]>
	</script>

view raw share_flattr.html hosted with ❤ by GitHub

The only difference between these two version is the extra configuration of the flattr user ID and because flattr is currently the only service that supports tags I only added the tag detection code there.