{"id":13555825,"url":"https://github.com/heiseonline/shariff","last_synced_at":"2025-05-14T03:10:07.470Z","repository":{"id":23131499,"uuid":"26486322","full_name":"heiseonline/shariff","owner":"heiseonline","description":"👮 Shariff enables website users to share their favorite content without compromising their privacy.","archived":false,"fork":false,"pushed_at":"2024-07-25T12:24:24.000Z","size":7242,"stargazers_count":1404,"open_issues_count":57,"forks_count":175,"subscribers_count":79,"default_branch":"develop","last_synced_at":"2025-05-09T03:39:44.742Z","etag":null,"topics":["css","frontend","javascript","privacy","shariff"],"latest_commit_sha":null,"homepage":"http://ct.de/-2467514","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/heiseonline.png","metadata":{"files":{"readme":"README-de.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-11-11T13:34:30.000Z","updated_at":"2025-04-23T18:54:10.000Z","dependencies_parsed_at":"2024-06-17T05:06:19.099Z","dependency_job_id":"8f832279-0340-4200-8eca-886160676220","html_url":"https://github.com/heiseonline/shariff","commit_stats":{"total_commits":677,"total_committers":79,"mean_commits":8.569620253164556,"dds":0.6632200886262924,"last_synced_commit":"193cd834dedad741aeb26585951606bd8e201ad8"},"previous_names":[],"tags_count":89,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heiseonline%2Fshariff","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heiseonline%2Fshariff/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heiseonline%2Fshariff/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/heiseonline%2Fshariff/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/heiseonline","download_url":"https://codeload.github.com/heiseonline/shariff/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254059511,"owners_count":22007769,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","frontend","javascript","privacy","shariff"],"created_at":"2024-08-01T12:03:26.534Z","updated_at":"2025-05-14T03:10:02.448Z","avatar_url":"https://github.com/heiseonline.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","frontend"],"sub_categories":[],"readme":"# Shariff – Schützen und teilen [![Build Status](https://travis-ci.org/heiseonline/shariff.svg?branch=master)](https://travis-ci.org/heiseonline/shariff)\n\nUm 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/)\n\n![Shariff Logo © 2015 Heise Medien](http://www.heise.de/icons/ho/shariff-logo.png)\n\nDer 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.\n\nShariff `(/ˈʃɛɹɪf/)` ist ein Open-Source Projekt von c't und heise online.\n\nShariff 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.\n\n## Erste Schritte\n\n1. Das [aktuellste Shariff-Release](https://github.com/heiseonline/shariff/releases/latest) herunterladen\n2. Alle im Release enthaltenen Dateien hochladen\n3.  CSS im `\u003chead\u003e` einbinden:\n    * `shariff.complete.css` verlässt sich auf die im Release enthaltenen Abhängigkeiten\n    * `shariff.min.css` verwenden, wenn [Font Awesome](https://github.com/FortAwesome/Font-Awesome) bereits in Ihrer Seite geladen wird\n4. JavaScript unmittelbar vor `\u003c/body\u003e` einbinden:\n    * `shariff.complete.js` verlässt sich auf die im Release enthaltenen Abhängigkeiten\n    * `shariff.min.js` verwenden, wenn [jQuery](https://github.com/jquery/jquery) bereits in der Seite vorhanden ist\n5. Beliebig viele `\u003cdiv class=\"shariff\"\u003e` Elemente einfügen\n6. Mit den unten beschriebenen `data`-Attributen Aussehen und Funktion konfigurieren\n\nDie Share-Counts in den Buttons benötigen ein [Backend](#backends) auf ihrem Server.\n\nCode-Beispiel:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n    \u003clink href=\"/path/to/shariff.complete.css\" rel=\"stylesheet\"\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n    \u003ch1\u003eMy article\u003c/h1\u003e\n    \u003cp\u003eLorem ipsum dolor sit amet, consectetur adipisicing elit.\u003c/p\u003e\n\n    \u003ch2\u003eEinfache Buttons:\u003c/h2\u003e\n    \u003cdiv class=\"shariff\"\u003e\u003c/div\u003e\n\n    \u003ch2\u003eFortgeschrittene Optionen:\u003c/h2\u003e\n    \u003cdiv class=\"shariff\" data-backend-url=\"/path/to/backend\" data-url=\"http://www.example.com/my-article.html\" data-theme=\"grey\" data-orientation=\"vertical\"\u003e\u003c/div\u003e\n\n    \u003c!-- vor dem schließenden \u003c/body\u003e-Tag --\u003e\n    \u003cscript src=\"/path/to/shariff.complete.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Shariff mit `npm` einrichten\n\nShariff ist auch als Node-Paket verfügbar und kann mit `npm` in ein Projekt eingebunden werden:\n\n```sh\n$ cd my-project\n$ npm install shariff --save\n```\n\nDann kann Shariff im eigenen Skript initialisiert und an DOM-Elemente gebunden werden:\n\n```js\n// my-app.js\nvar Shariff = require('shariff');\nvar $ = require('jquery');\nvar buttonsContainer = $('.some-selector');\nnew Shariff(buttonsContainer, {\n    orientation: 'vertical'\n});\n```\n\n## Demo-Webseite starten\n\nNach 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:\n\n```sh\n$ git clone https://github.com/heiseonline/shariff.git\n$ cd shariff\n$ npm install\n$ npm run dev\n```\n\n## Optionen (data-Attribute)\n\n| Attribut         | Beschreibung | Default |\n|------------------|--------------|---------|\n| `data-backend-url` | Pfad zum Shariff-[Backend](#backends). Der Wert `null` deaktiviert die Anzeige von Share-Counts.  | `null` |\n| `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` |\n| `data-flattr-category` | Kategorie für Flattr-Spende. | `null` |\n| `data-flattr-user` | Benutzer, der die Flattr-Spende erhält. | `null` |\n| `data-info-url` | URL der Infoseite. | `http://ct.de/-2467514` |\n| `data-info-display` | Wie die Infoseite angezeigt wird. Werte: `blank`, `popup`, `self`. | `blank` |\n| `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` |\n| `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` |\n| `data-mail-subject` | Wenn `data-mail-url` ein `mailto:`-Link ist, wird dieser Wert als Mail-Betreff verwendet. | siehe `data-title` |\n| `data-mail-url`  | Der Link des `mail`-Buttons | `?view=mail` |\n| `data-media-url` | Zu teilendes Bild (pinterest) | `null` |\n| `data-orientation` | Anordnung der Buttons. Verfügbar: `horizontal`, `vertical` | `horizontal`  |\n| `data-referrer-track` | Wenn angegeben, wird dieser String an die geteilte URL angehängt. Mit `null` deaktivieren. | `null` |\n| `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=\"[\u0026quot;facebook\u0026quot;,\u0026quot;twitter\u0026quot;]\"` \u003cbr\u003e Verfügbare Dienste:`buffer`, `clipboard`, `diaspora`, `facebook`, `flattr`, `flipboard`, `info`, `linkedin`, `mail`, `pinterest`, `pocket`, `print`, `qzone`, `reddit`, `stumbleupon`, `telegram`, `tencent-weibo`, `threema`, `tumblr`, `twitter`, `vk`, `weibo`, `whatsapp`, `xing` | `twitter`, `facebook`, `info` |\n| `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=\"[\u0026quot;facebook\u0026quot;,\u0026quot;twitter\u0026quot;]\"` \u003cbr\u003e Verfügbare Dienste: `twitter`, `facebook`, `linkedin`, `pinterest`, `xing`, `whatsapp`, `mail`, `info`, `tumblr`, `flattr`, `diaspora`, `reddit`, `stumbleupon`, `threema`, `weibo`, `tencent-weibo`, `qzone`, `print`, `telegram`, `vk`, `flipboard`, `pocket`, `buffer`  | `twitter`, `facebook`, `info` |\n| `data-theme`       | Farbschema auswählen. Verfügbar: `standard`, `grey` und `white`. | `standard` |\n| `data-title`       | Titel der zu teilenden Seite. | Entweder `DC.title`/`DC.creator` oder `\u003ctitle\u003e` |\n| `data-twitter-via` | User von dem der Tweet ursprünglich stammt. | `null` |\n| `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. |\n\n## Konstruktor-Argumente\n\nAlle 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:\n\n```js\nvar buttonsContainer = $('.some-selector');\nnew Shariff(buttonsContainer, {\n    backendUrl: '/my/backend/url',\n    orientation: 'vertical',\n    mailUrl: 'mailto:me@example.com',\n});\n```\n\n## Events\n\nBeim Klick auf einen Share-Button wird der `shariff-share` Event ausgelöst.\n\n```js\n$('body').on('shariff-share', function(event) {\n    var service = event.details;\n    ...\n});\n```\n\nDer Event kann verwendet werden um die Interaktionen mittels Analyse-Software aufzuzeichnen. Eine saubere Integration mit dem Tracker setzt voraus, dass der Event-Handler erst registriert wird nachdem das Analytics-Script geladen wurde.\n\n**Beispiel für Piwik:**\n\n```js\n(function() {\n  var _my_piwik_onload = function() {\n    var piwik = this;\n\n    $('body').on('shariff-share', function(event) {\n      var service = event.detail;\n      piwik.trackEvent('Sharing', service.name);\n    });\n  }\n\n  _paq.push([ _my_piwik_onload ]);\n})();\n```\n\n## Unterstützte Browser\n\nShariff unterstützt folgende Browser:\n\n- Firefox\n- Google Chrome\n- Internet Explorer/Edge\n- Safari\n\nDie jeweils aktuell letzten und vorletzten Versionen von Firefox, Google Chrome, Internet Explorer/Edge und Safari werden untersützt.\n\n## Unterstützte Services\n\nShariff unterstützt folgende Social-Sharing-Services:\n\n- buffer\n- diaspora*\n- facebook\n- Flattr\n- Flipboard\n- LinkedIn\n- Mail\n- Pinterest\n- Pocket\n- Print\n- Qzone\n- reddit\n- StumbleUpon\n- Telegram\n- Tencent Weibo\n- Threema\n- Tumblr\n- Twitter\n- VK\n- Weibo\n- WhatsApp\n- XING\n\nZusätzlich stellt der Service `Info` einen Button zur Anzeige einer Infoseite über die Social-Sharing-Buttons bereit.\nDie 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.\n\n## Backends\n\nWenn in den Shariff-Buttons die Share-Counts angezeigt werden sollen, wird das folgende Backend benötigt:\n\n* [shariff-backend-php](http://github.com/heiseonline/shariff-backend-php)\n\nDrittanbieter-Backends:\n\n* [shariff-backend-java](https://github.com/shred/shariff-backend-java)\n\nDie 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.\n\n## Drittanbieter-Integrationen\n\nBekannte Shariff-Integrationen für Drittanbieter-Systeme:\n\n* [Contao-Integration](https://github.com/hofff/contao-shariff)\n* [Drupal-Modul](https://www.drupal.org/project/shariff)\n* [Joomla! 3 Shariff-Plugin](https://github.com/joomla-agency/plg_jooag_shariff)\n* [Kirby-CMS Shariff-Plugin](https://github.com/SpicyWeb-de/kirby-plugin-shariff)\n* [MediaWiki Extension](https://github.com/vonloxley/Shariff-Mediawiki/)\n* [Open Monograph Press-Plugin](https://github.com/langsci/shariff)\n* [Pagekit Extension](https://pagekit.com/marketplace/package/spqr/shariff)\n* [Serendipity Plugin](https://github.com/s9y/additional_plugins/tree/master/serendipity_event_social)\n* [SilverStripe-Modul](https://github.com/andrelohmann/silverstripe-shariff)\n* [Symfony ShariffBundle](https://github.com/core23/ShariffBundle)\n* [TYPO3-Plugin rx_shariff](http://typo3.org/extensions/repository/view/rx_shariff)\n* [Wordpress-Plugin shariff-sharing](https://wordpress.org/plugins/shariff-sharing/)\n* [WordPress-Plugin Shariff Wrapper](https://wordpress.org/plugins/shariff/)\n* [Xenforo [ITM] ctSSB für Xenforo 1.5](https://github.com/McAtze/-ITM-ctShariffSocialButtons)\n* [Xenforo [WMTech] Social Share Privacy Plugin](https://wmtech.net/products/wmtech-social-share-privacy.41/)\n* [Magento 2 Shariff Social Share](https://www.jajuma.de/de/jajuma-develop/extensions/shariff-social-share-buttons-extension-fuer-magento-2)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheiseonline%2Fshariff","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fheiseonline%2Fshariff","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fheiseonline%2Fshariff/lists"}