Shariff enables website users to share their favorite content without compromising their privacy. Demo
Facebook, Google+ and Twitter supply official sharing code snippets which quietly siphon personal data from all page visitors. Shariff enables visitors to see how popular your page is on Facebook and share your content with others without needless data leaks.
Shariff (/ˈʃɛɹɪf/) is an open-source, low-maintenance, high-privacy solution maintained by German computer magazine c't and heise online.
- Include CSS in
<head>:- use
build/shariff.min.css, REQUIRES i12font
- use
- Include JavaScript right before
</body>:build/shariff.min.js, REQUIRES jQuery 3 Insert one or more<div class="shariff">elements.
- Customize the look using data-* attributes.
To enable the counters in the buttons, see section Backends.
Usage example:
<!DOCTYPE html>
<html>
<head>
<link href="/path/to/shariff.min.css" rel="stylesheet">
</head>
<body>
<h1>My article</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
<h2>Minimum buttons:</h2>
<div class="shariff"></div>
<h2>More advanced buttons:</h2>
<div class="shariff" data-url="http://www.example.com/my-article.html" data-theme="grey" data-orientation="vertical"></div>
<!-- immediately before </body> -->
<script src="/path/to/shariff.min.js"></script>
</body>
</html>| Attribute | Description | Default |
|---|---|---|
data-lang |
The localisation to use. Available: bg, de, en, es, fi, hr, hu, ja, ko, no, pl, pt, ro, ru, sk, sl, sr, sv, tr, zh |
de |
data-orientation |
vertical will stack the buttons vertically. |
horizontal |
data-referrer-track |
A string that will be appended to the share url. Can be disabled using null. |
null |
data-services |
An entity-encoded JSON string containing an array of service names to be enabled. Example: data-services="["facebook","googleplus"]" Available service names: twitter, facebook, googleplus, info |
twitter, facebook, googleplus, info |
data-theme |
We include 3 color schemes, standard, grey and white. |
standard |
data-title |
Title to be used as share text in Twitter | page's DC.title/DC.creator or <title> |
data-twitter-via |
Screen name of the user to attribute the Tweet to | null |
data-url |
The canonical URL of the page to check. | page's canonical URL or og:url or current URL |