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:
- They do not have a consistent design across different social networks
- They load a significant amount of data, harming your site’s performance
- They let social networks track your visitors, regardless of whether they interact with the widget
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.
Marking up elements for sharing
Sharing.js looks for elements with a class of
Each sharing element should have a
data-sharing attribute specifying the method through which it should share:
1 2 3 4 5 6
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.
|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
If called without arguments it searches the entire page; otherwise it searches within the supplied node:
1 2 3 4 5
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.
|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|