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.
Shariff consists of two parts: a simple JavaScript client library and an optional server-side component. The latter fetches the number of likes, tweets and plus-ones. Share buttons and share counts work without a connection between your visitors' browsers and social networks (unless they decide to share, of course).
- Download the latest release
- Include CSS in
<head>:build/shariff.complete.csscontains all dependencies- if Font Awesome is already included in your site, use
build/shariff.min.css
- Include JavaScript right before
</body>:build/shariff.complete.jscontains all dependencies- if jQuery is already included in your site, use
build/shariff.min.js
- 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-backend-url="/path/to/backend" 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>You can also use Shariff's node package by installing it via npm:
$ cd my-project
$ npm install shariff --saveEdit your JS main script, include Shariff and initialize it in one or more containers:
// my-app.js
var Shariff = require('shariff');
var $ = require('jquery');
var buttonsContainer = $('.some-selector');
new Shariff(buttonsContainer, {
orientation: 'vertical'
});After downloading Shariff, install its dependencies by running npm install.
$ git clone https://github.com/heiseonline/shariff.git
$ cd shariff
$ npm install
$ grunt demoMake sure you have installed the Grunt CLI. Run grunt demo to start a local web server which displays several button configurations. The demo page uses shariff-backend-node to request and display share counts.
| Attribute | Description | Default |
|---|---|---|
data-backend-url |
The path to your Shariff backend, see below. Settings the value to null disables the backend feature. No counts will occur. |
null |
data-flattr-category |
Category to be used for Flattr. | null |
data-flattr-user |
User that receives Flattr donation. | null |
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-mail-body |
If a mailto: link is used in data-mail-url, then this value is used as the mail body. |
see data-url |
data-mail-subject |
If a mailto: link is used in data-mail-url, then this value is used as the mail subject. |
see data-title |
data-mail-url |
The url target used for the mail service button |
?view=mail |
data-media-url |
Media url to be shared (pinterest) | null |
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, linkedin, pinterest, xing, whatsapp, mail, info, addthis, tumblr, flattr, diaspora, reddit, stumbleupon, threema, weibo, tencent-weibo, qzone |
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/Whatsapp | 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 |
data-rss-url |
The URL of the rss xml file. | page's canonical URL + '/index.xml' |
Shariff supports the following Browsers:
- Firefox
- Google Chrome
- Internet Explorer/Edge
- Safari
The current and previous major releases of Firefox, Google Chrome, Internet Explorer/Edge and Safari are supported on a rolling basis.
In order to display share counts with Shariff, you need one of the following backends:
Third-party backends:
Once you have one of these backends up and running, insert its URL into the data-backend-url attribute. For example, if the backend runs under http://example.com/my-shariff-backend/, the data-backend-url should be /my-shariff-backend/. The script will handle the rest.
This is a list of integrations for third-party systems:
- Contao integration
- Drupal module
- Joomla! 3 Shariff Plugin
- [MediaWiki Extension] (https://github.com/vonloxley/Shariff-Mediawiki/)
- Open Monograph Press Plugin
- Serendipity
- SilverStripe Module
- Symfony ShariffBundle
- TYPO3 Plugin rx_shariff
- Wordpress Plugin shariff-sharing
- WordPress Plugin Shariff Wrapper
- Xenforo [ITM] ctSSB for Xenforo 1.5
- Xenforo [WMTech] Social Share Privacy Plugin
Define a scripts which defines map window.ShariffExternalCreator . Shariff will call the functions createBtListfunc and createBtFunc if provided. At leat createBtFunc is needed.
Each function should return the HTML-element to be appended or null;
window.ShariffExternalCreator = {
'createBtListFunc': function(options, socialshareElement, shariff) {
var self = shariff;
return null;
},
'createBtFunc': function(service, btIndex, options, buttonList, shariff) {
var self = shariff;
var a = $('<a>').attr('href', service.shareUrl);
a.attr('title', shariff.getLocalized(service, 'title'));
a.append(shariff.getTitle());
if (service.popup) {
a.attr('data-rel', 'popup');
} else if (service.blank) {
a.attr('target', '_blank');
}
// add attributes for screen readers
a.attr('role', 'button');
a.attr('aria-label', shariff.getLocalized(service, 'title'));
return a;
}
}- options: as shariff.options
- socialshareElement: the HTML-Element with class="Shariff"
- shariff: the calling Shariff instance of the HTML-Element
- service: the service whose element should be created
- btIndex: the index of the service (starting at 0). Counts upwards even when no HTML-element is returned.
- options: as shariff.options
- buttonList: the parent HTML-Element to which Shariff will append the returned HTML-Element
- shariff: he calling Shariff instance of the HTML-Element with class="Shariff"
Example for beautifulhugo
<script>
window.ShariffExternalCreator = {
'createBtListFunc': function(options, socialshareElement, shariff) {
if (shariff.options.theme === "text") return null;
return $('<ul class="list-inline text-center footer-links">');
},
'createBtFunc': function(service, btIndex, options, buttonList, shariff) {
var self = shariff;
if (shariff.options.theme !== "text") {
var span = $('<span class="fa-stack fa-lg">');
var faCircle = '<i class="fa fa-circle fa-stack-2x">';
var faService = '<i class="fa fa-stack-1x fa-inverse';
if (typeof service.faName !== 'undefined') {
faService = faService + ' ' + service.faName;
}
faService = faService + '">';
span.append(faCircle).append(faService);
var li = $('<li>');
var shareLink = $('<a>').attr('href', service.shareUrl).append(span);
shareLink.attr('title', shariff.getLocalized(service, 'title'));
if (service.popup) {
shareLink.attr('data-rel', 'popup');
} else if (service.blank) {
shareLink.attr('target', '_blank');
}
// add attributes for screen readers
shareLink.attr('role', 'button');
shareLink.attr('aria-label', shariff.getLocalized(service, 'title'));
li.append(shareLink);
return li;
} else if (service.name === 'twitter') {
var shareLink = $('<a>').attr('href', service.shareUrl);
shareLink.attr('title', shariff.getLocalized(service, 'title'));
if (service.popup) {
shareLink.attr('data-rel', 'popup');
} else if (service.blank) {
shareLink.attr('target', '_blank');
}
// add attributes for screen readers
shareLink.attr('role', 'button');
shareLink.attr('aria-label', shariff.getLocalized(service, 'title'));
var faService = '<i class="post-twitter fa';
if (typeof service.faName !== 'undefined') {
faService = faService + ' ' + service.faName;
}
faService = faService + '">';
shareLink.append(faService);
shareLink.append(shariff.getTitle())
return shareLink
}
return null;
}
}
</script>
</head>
<body>
<!-- show all services as circle buttons -->
<div class="container beautiful-jekyll-footer">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="shariff"
data-lang="{{ .Site.Language }}"
data-services="["{{ delimit .Site.Params.services "","" }}"]"
data-mail-url="mailto:{{ .Site.Author.email }}"
data-mail-subject="{{ .Site.Title }}: {{ .Title }}"
data-mail-body="{{ .Site.BaseURL }}{{ .URL }}"
></div>
</div>
</div>
<!-- show only twitter as its icon -->
<h3 class="post-title shariff"
data-theme="text"
data-lang="{{ .Site.Language }}"
data-services="["twitter"]"
data-url="{{ .Permalink }}"
data-title="{{ .Params.tweet}}"
></h3>
<script src="{{ .Site.BaseURL }}js/shariff.min.js"></script>