| 8 |
lars |
1 |
# Shariff – Give Social Media Buttons Some Privacy
|
|
|
2 |
|
|
|
3 |
Shariff enables website users to share their favorite content without compromising their privacy. [Demo](http://heiseonline.github.io/shariff/)
|
|
|
4 |
|
|
|
5 |
|
|
|
6 |
|
|
|
7 |
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.
|
|
|
8 |
|
|
|
9 |
Shariff `(/ˈʃɛɹɪf/)` is an open-source, low-maintenance, high-privacy solution maintained by German computer magazine c't and heise online.
|
|
|
10 |
|
|
|
11 |
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).
|
|
|
12 |
|
|
|
13 |
## Getting Started
|
|
|
14 |
|
|
|
15 |
1. Download the [latest release](https://github.com/heiseonline/shariff/releases/latest)
|
|
|
16 |
2. Include CSS in `<head>`:
|
|
|
17 |
* `build/shariff.complete.css` contains all dependencies
|
|
|
18 |
* use `build/shariff.min.css`, if [Font Awesome](https://github.com/FortAwesome/Font-Awesome) is already included in your site
|
|
|
19 |
3. Include JavaScript right before `</body>`:
|
|
|
20 |
* `build/shariff.complete.js` contains all dependencies
|
|
|
21 |
* use `build/shariff.min.js`, if [jQuery](https://github.com/jquery/jquery) is already included in your site
|
|
|
22 |
4. Insert one or more `<div class="shariff">` elements.
|
|
|
23 |
5. Customize the look using data-* attributes.
|
|
|
24 |
|
|
|
25 |
To enable the counters in the buttons, see section [Backends](#backends).
|
|
|
26 |
|
|
|
27 |
Usage example:
|
|
|
28 |
|
|
|
29 |
```html
|
|
|
30 |
<!DOCTYPE html>
|
|
|
31 |
<html>
|
|
|
32 |
<head>
|
|
|
33 |
<link href="/path/to/shariff.min.css" rel="stylesheet">
|
|
|
34 |
</head>
|
|
|
35 |
<body>
|
|
|
36 |
<h1>My article</h1>
|
|
|
37 |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
|
|
|
38 |
|
|
|
39 |
<h2>Minimum buttons:</h2>
|
|
|
40 |
<div class="shariff"></div>
|
|
|
41 |
|
|
|
42 |
<h2>More advanced buttons:</h2>
|
|
|
43 |
<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>
|
|
|
44 |
|
|
|
45 |
<!-- immediately before </body> -->
|
|
|
46 |
<script src="/path/to/shariff.min.js"></script>
|
|
|
47 |
</body>
|
|
|
48 |
</html>
|
|
|
49 |
```
|
|
|
50 |
|
|
|
51 |
## Getting Started using `npm`
|
|
|
52 |
|
|
|
53 |
You can also use Shariff's node package by installing it via `npm`:
|
|
|
54 |
|
|
|
55 |
```sh
|
|
|
56 |
$ cd my-project
|
|
|
57 |
$ npm install shariff --save
|
|
|
58 |
```
|
|
|
59 |
|
|
|
60 |
Edit your JS main script, include Shariff and initialize it in one or more containers:
|
|
|
61 |
|
|
|
62 |
```js
|
|
|
63 |
// my-app.js
|
|
|
64 |
var Shariff = require('shariff');
|
|
|
65 |
var $ = require('jquery');
|
|
|
66 |
var buttonsContainer = $('.some-selector');
|
|
|
67 |
new Shariff(buttonsContainer, {
|
|
|
68 |
orientation: 'vertical'
|
|
|
69 |
});
|
|
|
70 |
```
|
|
|
71 |
|
|
|
72 |
## Running demo site
|
|
|
73 |
|
|
|
74 |
After downloading Shariff, install its dependencies by running `npm install`.
|
|
|
75 |
|
|
|
76 |
```sh
|
|
|
77 |
$ git clone https://github.com/heiseonline/shariff.git
|
|
|
78 |
$ cd shariff
|
|
|
79 |
$ npm install
|
|
|
80 |
$ grunt demo
|
|
|
81 |
```
|
|
|
82 |
|
|
|
83 |
Make sure you have installed the [Grunt CLI](http://gruntjs.com/getting-started#installing-the-cli). Run `grunt demo` to start a local web server which displays several button configurations. The demo page uses [`shariff-backend-node`](https://github.com/heiseonline/shariff-backend-node) to request and display share counts.
|
|
|
84 |
|
|
|
85 |
## Options (data attributes)
|
|
|
86 |
|
|
|
87 |
| Attribute | Description | Default |
|
|
|
88 |
|------------------|-------------|---------|
|
|
|
89 |
| `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` |
|
|
|
90 |
| `data-flattr-category` | Category to be used for Flattr. | `null` |
|
|
|
91 |
| `data-flattr-user` | User that receives Flattr donation. | `null` |
|
|
|
92 |
| `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` |
|
|
|
93 |
| `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` |
|
|
|
94 |
| `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` |
|
|
|
95 |
| `data-mail-url` | The url target used for the `mail` service button | `?view=mail` |
|
|
|
96 |
| `data-media-url` | Media url to be shared (pinterest) | `null` |
|
|
|
97 |
| `data-orientation` | `vertical` will stack the buttons vertically. | `horizontal` |
|
|
|
98 |
| `data-referrer-track` | A string that will be appended to the share url. Can be disabled using `null`. | `null` |
|
|
|
99 |
| `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` | `twitter`, `facebook`, `googleplus`, `info` |
|
|
|
100 |
| `data-theme` | We include 3 color schemes, `standard`, `grey` and `white`. | `standard` |
|
|
|
101 |
| `data-title` | Title to be used as share text in Twitter/Whatsapp | page's `DC.title`/`DC.creator` or `<title>` |
|
|
|
102 |
| `data-twitter-via` | Screen name of the user to attribute the Tweet to | `null` |
|
|
|
103 |
| `data-url` | The canonical URL of the page to check. | page's canonical URL or `og:url` or current URL |
|
|
|
104 |
|
|
|
105 |
## Backends
|
|
|
106 |
|
|
|
107 |
In order to display share counts with Shariff, you need one of the following backends:
|
|
|
108 |
|
|
|
109 |
* [shariff-backend-node](http://github.com/heiseonline/shariff-backend-node)
|
|
|
110 |
* [shariff-backend-perl](http://github.com/heiseonline/shariff-backend-perl)
|
|
|
111 |
* [shariff-backend-php](http://github.com/heiseonline/shariff-backend-php)
|
|
|
112 |
|
|
|
113 |
Third-party backends:
|
|
|
114 |
* [shariff-backend-java](http://github.com/headissue/shariff-backend-java)
|
|
|
115 |
|
|
|
116 |
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.
|
|
|
117 |
|
|
|
118 |
## Third-party integrations
|
|
|
119 |
|
|
|
120 |
This is a list of integrations for third-party systems:
|
|
|
121 |
|
|
|
122 |
* [Contao integration](https://github.com/hofff/contao-shariff)
|
|
|
123 |
* [Drupal module](https://www.drupal.org/project/shariff)
|
|
|
124 |
* [Joomla 3.4+ Shariff Plugin](https://github.com/joomla-agency/plg_jooag_shariff)
|
|
|
125 |
* [Open Monograph Press Plugin](https://github.com/langsci/shariff)
|
|
|
126 |
* [SilverStripe Module](https://github.com/andrelohmann/silverstripe-shariff)
|
|
|
127 |
* [TYPO3 Plugin rx_shariff](http://typo3.org/extensions/repository/view/rx_shariff)
|
|
|
128 |
* [Wordpress Plugin shariff-sharing](https://wordpress.org/plugins/shariff-sharing/)
|
|
|
129 |
* [WordPress Plugin Shariff Wrapper](https://wordpress.org/plugins/shariff/)
|
|
|
130 |
* [Xenforo 1.4 Plugin](https://github.com/McAtze/-ITM-ctShariffSocialButtons)
|
|
|
131 |
* [Xenforo [WMTech] Social Share Privacy Plugin](https://wmtech.net/products/wmtech-social-share-privacy.41/)
|