Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix missing services in demo, fix README files, add missing CSS for fediverse and remote flattr #434

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 13 additions & 15 deletions README-de.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Shariff – Schützen und teilen [![Build Status](https://travis-ci.org/heiseonline/shariff.svg?branch=master)](https://travis-ci.org/heiseonline/shariff)

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/)
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](https://heiseonline.github.io/shariff/)

![Shariff Logo © 2015 Heise Medien](http://www.heise.de/icons/ho/shariff-logo.png)
![Shariff Logo © 2015 Heise Medien](https://www.heise.de/icons/ho/shariff-logo.png)

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.

Expand Down Expand Up @@ -31,7 +31,7 @@ Code-Beispiel:
<!DOCTYPE html>
<html>
<head>
<link href="/path/to/shariff.complete.css" rel="stylesheet">
<link href="/path/to/shariff.min.css" rel="stylesheet">
</head>
<body>
<h1>My article</h1>
Expand All @@ -41,10 +41,10 @@ Code-Beispiel:
<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>
<div class="shariff" data-backend-url="/path/to/backend" data-url="https://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>
<script src="/path/to/shariff.min.js"></script>
</body>
</html>
```
Expand Down Expand Up @@ -87,9 +87,7 @@ $ npm run dev
|------------------|--------------|---------|
| `data-backend-url` | Pfad zum Shariff-[Backend](#backends). 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-url` | URL der Infoseite. | `https://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` |
Expand All @@ -98,8 +96,7 @@ $ npm run dev
| `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;]"` <br> 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` |
| `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;]"` <br> 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` |
| `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;]"` <br> Verfügbare Dienste: `buffer`, `clipboard`, `diaspora`, `facebook`, `fediverse`, `flipboard`, `info`, `linkedin`, `mail`, `pinterest`, `pocket`, `print`, `qzone`, `reddit`, `stumbleupon`, `telegram`, `tencent`, `threema`, `tumblr`, `twitter`, `vk`, `weibo`, `whatsapp`, `xing` | `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` |
Expand Down Expand Up @@ -164,9 +161,10 @@ Die jeweils aktuell letzten und vorletzten Versionen von Firefox, Google Chrome,
Shariff unterstützt folgende Social-Sharing-Services:

- buffer
- Clipboard
- diaspora*
- facebook
- Flattr
- Fediverse
- Flipboard
- LinkedIn
- Mail
Expand All @@ -187,19 +185,19 @@ Shariff unterstützt folgende Social-Sharing-Services:
- 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.
Die URL dieser Seite kann mit einer Option festgelegt werden. Standardwert: `https://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:

* [shariff-backend-php](http://github.com/heiseonline/shariff-backend-php)
* [shariff-backend-php](https://github.com/heiseonline/shariff-backend-php)

Drittanbieter-Backends:

* [shariff-backend-java](https://github.com/shred/shariff-backend-java)

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.
Die URL, unter der das Backend erreichbar ist, muss im `data`-Attribut `data-backend-url` angegeben werden. Ein Backend unter der URL `https://example.com/my-shariff-backend/` wird in `data-backend-url` so angegeben: `/my-shariff-backend/`. Den Rest erledigt das Skript.

## Drittanbieter-Integrationen

Expand All @@ -215,7 +213,7 @@ Bekannte Shariff-Integrationen für Drittanbieter-Systeme:
* [Serendipity Plugin](https://github.com/s9y/additional_plugins/tree/master/serendipity_event_social)
* [SilverStripe-Modul](https://github.com/andrelohmann/silverstripe-shariff)
* [Symfony ShariffBundle](https://github.com/core23/ShariffBundle)
* [TYPO3-Plugin rx_shariff](http://typo3.org/extensions/repository/view/rx_shariff)
* [TYPO3-Plugin rx_shariff](https://typo3.org/extensions/repository/view/rx_shariff)
* [Wordpress-Plugin shariff-sharing](https://wordpress.org/plugins/shariff-sharing/)
* [WordPress-Plugin Shariff Wrapper](https://wordpress.org/plugins/shariff/)
* [Xenforo [ITM] ctSSB für Xenforo 1.5](https://github.com/McAtze/-ITM-ctShariffSocialButtons)
Expand Down
8 changes: 3 additions & 5 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,6 @@ $ npm run dev
|------------------|-------------|---------|
| `data-backend-url` | The path to your Shariff backend, see below. Setting the value to `null` disables the backend feature. No counts will occur. | `null` |
| `data-button-style` | How to display the buttons. Values: `standard`, `icon`, `icon-count`. With `icon` only the icon is shown, with `icon-count` icon and counter and with `standard` icon, text and counter are shown, depending on the display size. | `standard` |
| `data-flattr-category` | Category to be used for Flattr. | `null` |
| `data-flattr-user` | User that receives Flattr donation. | `null` |
| `data-info-url` | URL of the info page. | `https://ct.de/-2467514` |
| `data-info-display` | How to display the info page. Values: `blank`, `popup`, `self`. | `blank` |
| `data-lang` | The localisation to use. Available: `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` |
Expand All @@ -99,8 +97,7 @@ $ npm run dev
| `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="[&quot;facebook&quot;,&quot;twitter&quot;]"` Available service names: `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` |
| `data-services` | An entity-encoded JSON string containing an array of service names to be enabled. Example: `data-services="[&quot;facebook&quot;,&quot;twitter&quot;]"` Available service names: `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` |
| `data-services` | An entity-encoded JSON string containing an array of service names to be enabled. Example: `data-services="[&quot;facebook&quot;,&quot;twitter&quot;]"` Available service names: `buffer`, `clipboard`, `diaspora`, `facebook`, `fediverse`, `flipboard`, `info`, `linkedin`, `mail`, `pinterest`, `pocket`, `print`, `qzone`, `reddit`, `stumbleupon`, `telegram`, `tencent`, `threema`, `tumblr`, `twitter`, `vk`, `weibo`, `whatsapp`, `xing` | `twitter`, `facebook`, `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` |
Expand Down Expand Up @@ -166,9 +163,10 @@ The current and previous major releases of Firefox, Google Chrome, Internet Expl
Shariff supports the following social sharing services:

- buffer
- Clipboard
- diaspora*
- facebook
- Flattr
- Fediverse
- Flipboard
- LinkedIn
- Mail
Expand Down
12 changes: 6 additions & 6 deletions demo/data-title.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,29 +14,29 @@
<body>
<dl class="layout-hint">
<dt>data-title:</dt><dd>foo</dd>
<dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
<dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
</dl>
<article class="slim">
<div class="shariff" data-title="foo" data-services="[&amp;quot;twitter&amp;quot;,&quot;whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]"></div>
<div class="shariff" data-title="foo" data-services="[&amp;quot;twitter&amp;quot;,&quot;whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]"></div>
</article>

<hr>

<dl class="layout-hint">
<dt>data-title:</dt><dd>bar</dd>
<dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
<dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
</dl>
<article class="slim">
<div class="shariff" data-title="bar" data-services="[&amp;quot;twitter&amp;quot;,&quot;whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]"></div>
<div class="shariff" data-title="bar" data-services="[&amp;quot;twitter&amp;quot;,&quot;whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]"></div>
</article>

<hr>

<dl class="layout-hint">
<dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;flattr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
<dt>data-services:</dt><dd>[&amp;quot;twitter&amp;quot;,whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;xing&amp;quot;,&amp;quot;pinterest&amp;quot;,&amp;quot;linkedin&amp;quot;,&amp;quot;tumblr&amp;quot;,&amp;quot;diaspora&amp;quot;,&amp;quot;reddit&amp;quot;,&amp;quot;stumbleupon&amp;quot;,&amp;quot;threema&amp;quot;,&amp;quot;weibo&amp;quot;,&amp;quot;tencent-weibo&amp;quot;,&amp;quot;qzone&amp;quot;,&amp;quot;print&amp;quot;]</dd>
</dl>
<article class="slim">
<div class="shariff" data-services="[&amp;quot;twitter&amp;quot;,&quot;whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;flattr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]"></div>
<div class="shariff" data-services="[&amp;quot;twitter&amp;quot;,&quot;whatsapp&quot;,&quot;facebook&quot;,&quot;xing&quot;,&quot;pinterest&quot;,&quot;linkedin&quot;,&quot;tumblr&quot;,&quot;diaspora&quot;,&quot;reddit&quot;,&quot;stumbleupon&quot;,&quot;threema&quot;,&quot;weibo&quot;,&quot;tencent-weibo&quot;,&quot;qzone&quot;,&quot;print&quot;]"></div>
</article>
</body>
</html>
Loading