Skip to content
Permalink
master
Switch branches/tags
Go to file
 
 
Cannot retrieve contributors at this time

Shariff 鈥 Sch眉tzen und teilen Build Status

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

Shariff Logo 漏 2015 Heise Medien

Der Code der offiziellen Buttons beispielsweise von Facebook 眉bertr盲gt von jedem Besucher kennzeichnende Daten an die Social-Media-Netzwerke. Shariff erzeugt hingegen Share-Buttons, die mit einem Klick teilen, die Anzahl der Likes und Plus-Ones f眉r die aktuelle Seite anzeigen und trotzdem keine unn枚tigen Daten 眉bertragen.

Shariff (/藞蕛蓻晒瑟f/) ist ein Open-Source Projekt von c't und heise online.

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 den Social-Media-Netzwerken aufbauen. Daten werden erst dann 眉bertragen, wenn der Besucher den Inhalt tats盲chlich teilen m枚chte.

Erste Schritte

  1. Das aktuellste Shariff-Release herunterladen
  2. Alle im Release enthaltenen Dateien hochladen
  3. CSS im <head> einbinden:
    • shariff.complete.css verl盲sst sich auf die im Release enthaltenen Abh盲ngigkeiten
    • shariff.min.css verwenden, wenn Font Awesome bereits in Ihrer Seite geladen wird
  4. JavaScript unmittelbar vor </body> einbinden:
    • shariff.complete.js verl盲sst sich auf die im Release enthaltenen Abh盲ngigkeiten
    • shariff.min.js verwenden, wenn jQuery bereits in der Seite vorhanden ist
  5. Beliebig viele <div class="shariff"> Elemente einf眉gen
  6. Mit den unten beschriebenen data-Attributen Aussehen und Funktion konfigurieren

Die Share-Counts in den Buttons ben枚tigen ein Backend auf ihrem Server.

Code-Beispiel:

<!DOCTYPE html>
<html>
<head>
    <link href="/path/to/shariff.complete.css" rel="stylesheet">
</head>
<body>
    <h1>My article</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

    <h2>Einfache Buttons:</h2>
    <div class="shariff"></div>

    <h2>Fortgeschrittene Optionen:</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>

    <!-- vor dem schlie脽enden </body>-Tag -->
    <script src="/path/to/shariff.complete.js"></script>
</body>
</html>

Shariff mit npm einrichten

Shariff ist auch als Node-Paket verf眉gbar und kann mit npm in ein Projekt eingebunden werden:

$ cd my-project
$ npm install shariff --save

Dann kann Shariff im eigenen Skript initialisiert und an DOM-Elemente gebunden werden:

// my-app.js
var Shariff = require('shariff');
var $ = require('jquery');
var buttonsContainer = $('.some-selector');
new Shariff(buttonsContainer, {
    orientation: 'vertical'
});

Demo-Webseite starten

Nach dem Download von Shariff mit npm install die Abh盲ngigkeiten installieren. Anschlie脽end kann mit npm run dev ein lokaler Webserver gestartet werden, der eine Seite mit verschiedenen Konfigurations-Beispielen bereitstellt:

$ git clone https://github.com/heiseonline/shariff.git
$ cd shariff
$ npm install
$ npm run dev

Optionen (data-Attribute)

Attribut Beschreibung Default
data-backend-url Pfad zum Shariff-Backend. Der Wert null deaktiviert die Anzeige von Share-Counts. null
data-button-style Wie die Buttons angezeigt werden. Werte: standard, icon, icon-count. Bei icon wird nur das Icon angezeigt, bei icon-count werden Icon und Z盲hler und bei standard Icon, Text und Z盲hler abh盲ngig von der Display-Gr枚脽e angezeigt. standard
data-flattr-category Kategorie f眉r Flattr-Spende. null
data-flattr-user Benutzer, der die Flattr-Spende erh盲lt. null
data-info-url URL der Infoseite. http://ct.de/-2467514
data-info-display Wie die Infoseite angezeigt wird. Werte: blank, popup, self. blank
data-lang Lokalisierung ausw盲hlen. Verf眉gbar: bg, cs, da, de, en, es, fi, fr, hr, hu, it, ja, ko, nl, no, pl, pt, ro, ru, sk, sl, sr, sv, tr, zh de
data-mail-body Wenn data-mail-url ein mailto:-Link ist, wird dieser Wert als Mail-Body verwendet. Der Mail-Body-Text sollte den Platzhalter {url} enthalten. Dieser wird durch die zu teilende URL ersetzt. siehe data-url
data-mail-subject Wenn data-mail-url ein mailto:-Link ist, wird dieser Wert als Mail-Betreff verwendet. siehe data-title
data-mail-url Der Link des mail-Buttons ?view=mail
data-media-url Zu teilendes Bild (pinterest) null
data-orientation Anordnung der Buttons. Verf眉gbar: horizontal, vertical horizontal
data-referrer-track Wenn angegeben, wird dieser String an die geteilte URL angeh盲ngt. Mit null deaktivieren. null
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="[&quot;facebook&quot;,&quot;twitter&quot;]"
Verf眉gbare Dienste: twitter, facebook, linkedin, pinterest, xing, whatsapp, mail, info, addthis, tumblr, flattr, diaspora, reddit, stumbleupon, threema, weibo, tencent-weibo, qzone, print, telegram, vk, flipboard, pocket, buffer
twitter, facebook, info
data-theme Farbschema ausw盲hlen. Verf眉gbar: standard, grey und white. standard
data-title Titel der zu teilenden Seite. Entweder DC.title/DC.creator oder <title>
data-twitter-via User von dem der Tweet urspr眉nglich stammt. null
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.

Konstruktor-Argumente

Alle data-Attribute von oben sind auch als Konstruktor-Argumente in JavaScript verwendbar. Dabei wird das data- am Anfang weggestrichen und camelCase statt kebab-case verwendet:

var buttonsContainer = $('.some-selector');
new Shariff(buttonsContainer, {
    backendUrl: '/my/backend/url',
    orientation: 'vertical',
    mailUrl: 'mailto:me@example.com',
});

Unterst眉tzte Browser

Shariff unterst眉tzt folgende Browser:

  • Firefox
  • Google Chrome
  • Internet Explorer/Edge
  • Safari

Die jeweils aktuell letzten und vorletzten Versionen von Firefox, Google Chrome, Internet Explorer/Edge und Safari werden unters眉tzt.

Unterst眉tzte Services

Shariff unterst眉tzt folgende Social-Sharing-Services:

  • AddThis
  • buffer
  • diaspora*
  • facebook
  • Flattr
  • Flipboard
  • LinkedIn
  • Mail
  • Pinterest
  • Pocket
  • Print
  • Qzone
  • reddit
  • StumbleUpon
  • Telegram
  • Tencent Weibo
  • Threema
  • Tumblr
  • Twitter
  • VK
  • Weibo
  • WhatsApp
  • XING

Zus盲tzlich stellt der Service Info einen Button zur Anzeige einer Infoseite 眉ber die Social-Sharing-Buttons bereit. Die URL dieser Seite kann mit einer Option festgelegt werden. Standardwert: http://ct.de/-2467514, d.h. der c't-Artikel zur Einf眉hrung von Shariff.

Backends

Wenn in den Shariff-Buttons die Share-Counts angezeigt werden sollen, wird das folgende Backend ben枚tigt:

Drittanbieter-Backends:

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.

Drittanbieter-Integrationen

Bekannte Shariff-Integrationen f眉r Drittanbieter-Systeme: