Merge branch 'release/2.1.0'

.babelrc

@@ -1,3 +1,3 @@
 {
-  "presets": ["es2015"]
+  "presets": ["env"]
 }

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## v2.1.0, 2018-01-02
+
+- Added VK service. (dennis95stumm)
+- Added Telegram service. (dennis95stumm)
+- Added display options to info service. (richard67)
+- Added documentation for info service. (richard67)
+- Improved demo. (richard67)
+- Improved security of links with `target="_blank"`. (richard67)
+- Removed references to Twitter backend from documentation. (richard67)
+
 ## v2.0.4, 2017-11-03
 
 - Fixed deployment to GitHub.

README-de.md

@@ -4,11 +4,11 @@ Um die Privatsphäre ihrer Besucher gegenüber den Social-Media-Netzwerken zu be
 
 ![Shariff Logo © 2015 Heise Medien](http://www.heise.de/icons/ho/shariff-logo.png)
 
-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.
+Der Code der offiziellen Buttons von Facebook, Google+ und Twitter ü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 Facebook, Twitter oder Google+ aufbauen. Daten werden erst dann zum Social-Media-Netzwerk übertragen, wenn der Besucher den Inhalt tatsächlich teilen möchte.
+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 oder Google+ aufbauen. Daten werden erst dann zum Social-Media-Netzwerk übertragen, wenn der Besucher den Inhalt tatsächlich teilen möchte.
 
 ## Erste Schritte
 
@@ -87,14 +87,16 @@ $ npm run dev
 | `data-backend-url` | Pfad zum Shariff-[Backend](#backends). Der Wert `null` deaktiviert die Anzeige von Share-Counts.  | `null` |
 | `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`, `de`, `en`, `es`, `fi`, `hr`, `hu`, `ja`, `ko`, `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;googleplus&quot;]"` <br> Verfügbare Dienste: `twitter`, `facebook`, `googleplus`, `linkedin`, `pinterest`, `xing`, `whatsapp`, `mail`, `info`, `addthis`, `tumblr`, `flattr`, `diaspora`, `reddit`, `stumbleupon`, `threema`, `weibo`, `tencent-weibo`, `qzone`, `print`  | Twitter, Facebook, Google+ |
+| `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;googleplus&quot;]"` <br> Verfügbare Dienste: `twitter`, `facebook`, `googleplus`, `linkedin`, `pinterest`, `xing`, `whatsapp`, `mail`, `info`, `addthis`, `tumblr`, `flattr`, `diaspora`, `reddit`, `stumbleupon`, `threema`, `weibo`, `tencent-weibo`, `qzone`, `print`, `telegram`, `vk`  | Twitter, Facebook, Google+ |
 | `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` |
@@ -140,14 +142,19 @@ Shariff unterstützt folgende Social-Sharing-Services:
 - 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 eines der folgenden Backends benötigt:

README.md

@@ -9,7 +9,7 @@ Facebook, Google+ and Twitter supply official sharing code snippets which quietl
 
 Shariff `(/ˈʃɛɹɪf/)` is an open-source, low-maintenance, high-privacy solution maintained by German computer magazine c't and heise online.
 
-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).
+Shariff consists of two parts: a simple JavaScript client library and an optional server-side component. The latter fetches the number of likes 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).
 
 ## Getting Started
 
@@ -88,14 +88,16 @@ $ npm run dev
 | `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` |
 | `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. | `http://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`, `de`, `en`, `es`, `fi`, `hr`, `hu`, `ja`, `ko`, `no`, `pl`, `pt`, `ro`, `ru`, `sk`, `sl`, `sr`, `sv`, `tr`, `zh` | `de` |
 | `data-mail-body` | If a `mailto:` link is used in `data-mail-url`, then this value is used as the mail body. The body text should contain the placeholder `{url}` which will be replaced with the share URL. | see `data-url`  |
 | `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` |
 | `data-mail-url`  | The url target used for the `mail` service button | `?view=mail` |
 | `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="["facebook","googleplus"]"` Available service names: `twitter`, `facebook`, `googleplus`, `linkedin`, `pinterest`, `xing`, `whatsapp`, `mail`, `info`, `addthis`, `tumblr`, `flattr`, `diaspora`, `reddit`, `stumbleupon`, `threema`, `weibo`, `tencent-weibo`, `qzone`, `print` | `twitter`, `facebook`, `googleplus`, `info` |
+| `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`, `weibo`, `tencent-weibo`, `qzone`, `print`, `telegram`, `vk` | `twitter`, `facebook`, `googleplus`, `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` |
@@ -142,14 +144,19 @@ Shariff supports the following social sharing services:
 - Qzone
 - reddit
 - StumbleUpon
+- Telegram
 - Tencent Weibo
 - Threema
 - Tumblr
 - Twitter
+- VK
 - Weibo
 - WhatsApp
 - XING
 
+In addition, the service `Info` provides a button to show an info page about the social sharing buttons.
+The URL of this page can be set with an option. Default value: `http://ct.de/-2467514`, i.e. the c't article introducing Shariff. 
+
 ## Backends
 
 In order to display share counts with Shariff, you need one of the following backends:

demo/backend.json

@@ -1 +1 @@
-{"facebook":0,"googleplus":3387,"linkedin":92,"reddit":12,"stumbleupon":4325,"xing":185,"twitter":4120}
+{"facebook":0,"googleplus":3387,"linkedin":92,"reddit":12,"stumbleupon":4325,"xing":185}

demo/index.html

@@ -26,24 +26,24 @@ <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
         <dt>data-backend-url:</dt><dd>/shariff/</dd>
         <dt>data-media-url:</dt><dd>http://www.heise.de/imgs/18/1/4/8/0/5/6/9/wa-encryption-d1999f774c5b5757.png</dd>
         <dt>data-flattr-user:</dt><dd>example</dd>
-        <dt>data-services:</dt><dd>[&amp;quot;addthis&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;addthis&amp;quot;,&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;,&amp;quot;telegram&amp;quot;,&amp;quot;vk&amp;quot;]</dd>
     </dl>
     <article class="slim">
         <header>
             <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
-            <div data-backend-url="/backend.json" data-flattr-user="example" class="shariff" data-services="[&quot;addthis&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;]" data-media-url="http://www.heise.de/imgs/18/1/4/8/0/5/6/9/wa-encryption-d1999f774c5b5757.png"></div>
+            <div data-backend-url="/backend.json" data-flattr-user="example" class="shariff" data-services="[&quot;addthis&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;,&quot;telegram&quot;,&quot;vk&quot;]" data-media-url="http://www.heise.de/imgs/18/1/4/8/0/5/6/9/wa-encryption-d1999f774c5b5757.png"></div>
             <time datetime="2014-11-13T10:45:00+02:00">13.11.2014 - 12:45 Uhr</time>
         </header>
         <p class="deck">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>
     </article>
     <hr>
     <dl class="layout-hint">
         <dt>data-backend-url:</dt><dd>/shariff/</dd>
-        <dt>data-info-url:</dt><dd>http://example.com</dd>
         <dt>data-lang:</dt><dd>en</dd>
         <dt>data-mail-url:</dt><dd>mailto:[email protected]</dd>
         <dt>data-title:</dt><dd>Lorem ipsum</dd>
         <dt>data-url:</dt><dd>http://www.heise.de/ct/</dd>
+        <dt>data-services:</dt><dd>[&amp;quot;whatsapp&amp;quot;,&amp;quot;facebook&amp;quot;,&amp;quot;twitter&amp;quot;,&amp;quot;googleplus&amp;quot;,&amp;quot;mail&amp;quot;,&amp;quot;info&amp;quot;]</dd>
     </dl>
     <article class="slim">
         <header>
@@ -61,6 +61,7 @@ <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
         <dt>data-theme:</dt><dd>grey</dd>
         <dt>data-twitter-via:</dt><dd>heiseonline</dd>
         <dt>data-url:</dt><dd>http://www.heise.de/ct/</dd>
+        <dt>data-services:</dt><dd>[&amp;quot;facebook&amp;quot;,&amp;quot;twitter&amp;quot;,&amp;quot;googleplus&amp;quot;,&amp;quot;whatsapp&amp;quot;,&amp;quot;info&amp;quot;]</dd>
     </dl>
     <article class="slim">
         <header>
@@ -74,6 +75,7 @@ <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h1>
     <dl class="layout-hint">
         <dt>data-backend-url:</dt><dd>/shariff/</dd>
         <dt>data-theme:</dt><dd>white</dd>
+        <dt>data-services:</dt><dd>[&amp;quot;facebook&amp;quot;,&amp;quot;twitter&amp;quot;,&amp;quot;googleplus&amp;quot;,&amp;quot;mail&amp;quot;,&amp;quot;info&amp;quot;]</dd>
     </dl>
     <article class="slim">
         <header>