| 4 |
lars |
1 |
# Shariff – Schützen und teilen
|
|
|
2 |
|
|
|
3 |
Um die Privatsphäre ihrer Besucher gegenüber den Social-Media-Netzwerken zu bewahren, können Webseiten-Betreiber mit dem Projekt Shariff eigene Teilen-Buttons integrieren. [Demo](http://heiseonline.github.io/shariff/)
|
|
|
4 |
|
|
|
5 |
|
|
|
6 |
|
|
|
7 |
Der Code der offiziellen Buttons von Facebook, Google+ und Twitter überträgt von jedem Besucher kennzeichnende Daten an die Social-Media-Netzwerke. Shariff erzeugtze hingegen Share-Buttons, die mit einem Klick teilen, die Anzahl der Likes, Tweets und Plus-Ones für die aktuelle Seite anzeigen und trotzdem keine unnötigen Daten übertragen.
|
|
|
8 |
|
|
|
9 |
Shariff `(/ˈʃɛɹɪf/)` ist ein Open-Source Projekt von c't und heise online.
|
|
|
10 |
|
|
|
11 |
Shariff besteht aus zwei Teilen. Der erste Teil ist eine einfache JavaScript-Bibliothek einschließlich Vektor-Icons und CSS zur Formatierung der Knöpfe. Der zweite ist die optionale, server-seitige Komponente (derzeit für PHP, Perl oder NodeJS). Mit dem Shariff-Backend auf dem eigenen Server muss der Browser des Besuchers zur Darstellung der Share-Counts keine Verbindung zu Facebook, Twitter oder Google+ aufbauen. Daten werden erst dann zum Social-Media-Netzwerk übertragen, wenn der Besucher den Inhalt tatsächlich teilen möchte.
|
|
|
12 |
|
|
|
13 |
## Erste Schritte
|
|
|
14 |
|
|
|
15 |
1. Das [aktuellste Shariff-Release](https://github.com/heiseonline/shariff/releases/latest) herunterladen
|
|
|
16 |
2. CSS im `<head>` einbinden:
|
|
|
17 |
* `build/shariff.complete.css` enthält alle Abhängigkeiten
|
|
|
18 |
* `build/shariff.min.css` verwenden, wenn [Font Awesome](https://github.com/FortAwesome/Font-Awesome) bereits in Ihrer Seite geladen wird
|
|
|
19 |
3. JavaScript unmittelbar vor `</body>` einbinden:
|
|
|
20 |
* `build/shariff.complete.js` enthält alle Abhängigkeiten
|
|
|
21 |
* `build/shariff.min.js` verwenden, wenn [jQuery](https://github.com/jquery/jquery) bereits in der Seite vorhanden ist
|
|
|
22 |
4. Beliebig viele `<div class="shariff">` Elemente einfügen
|
|
|
23 |
5. Mit den unten beschriebenen `data`-Attributen Aussehen und Funktion konfigurieren
|
|
|
24 |
|
|
|
25 |
Die Share-Counts in den Buttons benötigen ein [Backend](#backends) auf ihrem Server.
|
|
|
26 |
|
|
|
27 |
Code-Beispiel:
|
|
|
28 |
|
|
|
29 |
```html
|
|
|
30 |
<!DOCTYPE html>
|
|
|
31 |
<html>
|
|
|
32 |
<head>
|
|
|
33 |
<link href="/path/to/shariff.complete.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>Einfache Buttons:</h2>
|
|
|
40 |
<div class="shariff"></div>
|
|
|
41 |
|
|
|
42 |
<h2>Fortgeschrittene Optionen:</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 |
<!-- vor dem schließenden </body>-Tag -->
|
|
|
46 |
<script src="/path/to/shariff.complete.js"></script>
|
|
|
47 |
</body>
|
|
|
48 |
</html>
|
|
|
49 |
```
|
|
|
50 |
|
|
|
51 |
## Shariff mit `npm` einrichten
|
|
|
52 |
|
|
|
53 |
Shariff ist auch als Node-Paket verfügbar und kann mit `npm` in ein Projekt eingebunden werden:
|
|
|
54 |
|
|
|
55 |
```sh
|
|
|
56 |
$ cd my-project
|
|
|
57 |
$ npm install shariff --save
|
|
|
58 |
```
|
|
|
59 |
|
|
|
60 |
Dann kann Shariff im eigenen Skript initialisiert und an DOM-Elemente gebunden werden:
|
|
|
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 |
## Demo-Webseite starten
|
|
|
73 |
|
|
|
74 |
Nach dem Download von Shariff mit `npm install` die Abhängigkeiten installieren. Anschließend kann mit `grunt demo` ein lokaler Webserver gestartet werden, der eine Seite mit verschiedenen Konfigurations-Beispielen bereitstellt:
|
|
|
75 |
|
|
|
76 |
```sh
|
|
|
77 |
$ git clone https://github.com/heiseonline/shariff.git
|
|
|
78 |
$ cd shariff
|
|
|
79 |
$ npm install
|
|
|
80 |
$ grunt demo
|
|
|
81 |
```
|
|
|
82 |
|
|
|
83 |
Für den Aufruf von `grunt demo` muss [Grunt CLI](http://gruntjs.com/getting-started#installing-the-cli) installiert sein. Die Beispielseite verwendet [`shariff-backend-node`](https://github.com/heiseonline/shariff-backend-node), um die Share-Counts für die Buttons bereitzustellen.
|
|
|
84 |
|
|
|
85 |
## Optionen (data-Attribute)
|
|
|
86 |
|
|
|
87 |
| Attribut | Beschreibung | Default |
|
|
|
88 |
|------------------|--------------|---------|
|
|
|
89 |
| `data-backend-url` | Pfad zum Shariff-[Backend](#backends). Der Wert `null` deaktiviert die Anzeige von Share-Counts. | `null` |
|
|
|
90 |
| `data-flattr-category` | Kategorie für Flattr-Spende. | `null` |
|
|
|
91 |
| `data-flattr-user` | Benutzer, der die Flattr-Spende erhält. | `null` |
|
|
|
92 |
| `data-lang` | Lokalisierung auswählen. Verfügbar: `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` | Wenn `data-mail-url` ein `mailto:`-Link ist, wird dieser Wert als Mail-Body verwendet. | siehe `data-url` |
|
|
|
94 |
| `data-mail-subject` | Wenn `data-mail-url` ein `mailto:`-Link ist, wird dieser Wert als Mail-Betreff verwendet. | siehe `data-title` |
|
|
|
95 |
| `data-mail-url` | Der Link des `mail`-Buttons | `?view=mail` |
|
|
|
96 |
| `data-media-url` | Zu teilendes Bild (pinterest) | `null` |
|
|
|
97 |
| `data-orientation` | Anordnung der Buttons. Verfügbar: `horizontal`, `vertical` | `horizontal` |
|
|
|
98 |
| `data-referrer-track` | Wenn angegeben, wird dieser String an die geteilte URL angehängt. Mit `null` deaktivieren. | `null` |
|
|
|
99 |
| `data-services` | Liste der Services, die verwendet werden sollen. Für die Verwendung im `data`-Attribut muss die Angabe Entity-enkodiert werden. Die Reihenfolge wird berücksichtigt. Beispiel: `data-services="["facebook","googleplus"]"` <br> Verfügbare Dienste: `twitter`, `facebook`, `googleplus`, `linkedin`, `pinterest`, `xing`, `whatsapp`, `mail`, `info`, `addthis`, `tumblr`, `flattr`, `diaspora`, `reddit`, `stumbleupon`, `threema` | Twitter, Facebook, Google+ |
|
|
|
100 |
| `data-theme` | Farbschema auswählen. Verfügbar: `standard`, `grey` und `white`. | `standard` |
|
|
|
101 |
| `data-title` | Titel der zu teilenden Seite. | Entweder `DC.title`/`DC.creator` oder `<title>` |
|
|
|
102 |
| `data-twitter-via` | User von dem der Tweet ursprünglich stammt. | `null` |
|
|
|
103 |
| `data-url` | URL, die geteilt werden soll. | Wenn `data-url` nicht gesetzt ist, wird `link[rel="canonical"]`, `meta[property="og:url"]` oder `location.href` verwendet. |
|
|
|
104 |
|
|
|
105 |
## Backends
|
|
|
106 |
|
|
|
107 |
Wenn in den Shariff-Buttons die Share-Counts angezeigt werden sollen, wird eines der folgenden Backends benötigt:
|
|
|
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 |
Drittanbieter-Backends:
|
|
|
114 |
|
|
|
115 |
* [shariff-backend-java](http://github.com/headissue/shariff-backend-java)
|
|
|
116 |
|
|
|
117 |
Die URL, unter der das Backend erreichbar ist, muss im `data`-Attribut `data-backend-url` angegeben werden. Ein Backend unter der URL `http://example.com/my-shariff-backend/` wird in `data-backend-url` so angegeben: `/my-shariff-backend/`. Den Rest erledigt das Skript.
|
|
|
118 |
|
|
|
119 |
## Drittanbieter-Integrationen
|
|
|
120 |
|
|
|
121 |
Bekannte Shariff-Integrationen für Drittanbieter-Systeme:
|
|
|
122 |
|
|
|
123 |
* [Contao-Integration](https://github.com/hofff/contao-shariff)
|
|
|
124 |
* [Drupal-Modul](https://www.drupal.org/project/shariff)
|
|
|
125 |
* [Joomla 3.4+ Shariff-Plugin](https://github.com/joomla-agency/plg_jooag_shariff)
|
|
|
126 |
* [Open Monograph Press-Plugin](https://github.com/langsci/shariff)
|
|
|
127 |
* [SilverStripe-Modul](https://github.com/andrelohmann/silverstripe-shariff)
|
|
|
128 |
* [TYPO3-Plugin rx_shariff](http://typo3.org/extensions/repository/view/rx_shariff)
|
|
|
129 |
* [Wordpress-Plugin shariff-sharing](https://wordpress.org/plugins/shariff-sharing/)
|
|
|
130 |
* [WordPress-Plugin Shariff Wrapper](https://wordpress.org/plugins/shariff/)
|
|
|
131 |
* [Xenforo 1.4 Plugin](https://github.com/McAtze/-ITM-ctShariffSocialButtons)
|
|
|
132 |
* [Xenforo [WMTech] Social Share Privacy Plugin](https://wmtech.net/products/wmtech-social-share-privacy.41/)
|