Social sharing that respects visitor privacy

Social sharing buttons are an effective way of marketing your site by encouraging visitors to share your content. The major social networks provide sharing widgets that can easily be embedded in your site, but these have three problems:

Social bookmarking services such as AddThis solve the first problem and can help with the second, but still violate visitor privacy. AddThis, for example, uses advanced techniques to evade visitors’ attempts to avoid being tracked.

Sharing.js is tiny piece of JavaScript that adds sharing functionality to arbitrary elements on a page, giving you complete control of the appearance of your sharing feature without sending visitor information to a third party. You can see it in use at the bottom of this page.

Marking up elements for sharing

Sharing.js looks for elements with a class of sharing. Each sharing element should have a data-sharing attribute specifying the method through which it should share: email, twitter, facebook, google+, tumblr, or linkedin. For example:

1
2
3
4
5
6
<div class="sharing" data-sharing="email">    Share through e-mail   </div>
<div class="sharing" data-sharing="twitter">  Share through Twitter  </div>
<div class="sharing" data-sharing="facebook"> Share through Facebook </div>
<div class="sharing" data-sharing="google+">  Share through Google+  </div>
<div class="sharing" data-sharing="tumblr">   Share through Tumblr   </div>
<div class="sharing" data-sharing="linkedin"> Share through LinkedIn </div>

The elements can be styled however you need — for example, by using my free website and social media icons.

Enabling sharing manually

For full control over when and where Sharing.js adds sharing functionality, use one of the files below.

File Size Description
Sharing.js 1,012 bytes Minified version
Sharing.src.js 2,633 bytes Full version, with comments

To enable sharing, use the apply method of the Sharing object. If called without arguments it searches the entire page; otherwise it searches within the supplied node:

1
2
3
4
5
// enable sharing on the page
Sharing.apply();

// enable sharing within a node
Sharing.apply(document.getElementById('sharingButtons'));

Enabling sharing automatically

If the sharing elements exist when the page is loaded, you can use one of the files below. These versions of Sharing.js run automatically and do not create the Sharing global variable. The first two files use the runOnLoad function, while the third file has no external dependencies.

File Size Description
Sharing-runOnLoad.js 976 bytes Minified version
Sharing-runOnLoad.src.js 2,314 bytes Full version, with comments
Sharing-runOnLoad-standalone.js 1,201 bytes Minified version, without dependencies

Where now?

Found this useful? Share it:

Also in JavaScript: