Added new share buttons and added a counter for some buttons

src/App.vue

@@ -448,6 +448,221 @@
         v-bind:hasIcon="false"
       ></odnoklassniki-button>
     </div>
+    <div class="share-buttons-group">
+      <instapaper-button shareTitle="Comment"></instapaper-button>
+      <instapaper-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></instapaper-button>
+      <instapaper-button v-bind:hasIcon="false" shareTitle="Comment"></instapaper-button>
+      <instapaper-button class="share-button--circle" shareTitle="Comment"></instapaper-button>
+      <instapaper-button class="share-button--circle" shareTitle="Comment" btnText></instapaper-button>
+      <instapaper-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></instapaper-button>
+      <instapaper-button class="share-button--outline" shareTitle="Comment"></instapaper-button>
+      <instapaper-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></instapaper-button>
+      <instapaper-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></instapaper-button>
+      <instapaper-button class="share-button--circle share-button--outline" shareTitle="Comment"></instapaper-button>
+      <instapaper-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        btnText
+      ></instapaper-button>
+      <instapaper-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></instapaper-button>
+    </div>
+    <div class="share-buttons-group">
+      <hatena-button shareTitle="Comment"></hatena-button>
+      <hatena-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></hatena-button>
+      <hatena-button v-bind:hasIcon="false" shareTitle="Comment"></hatena-button>
+      <hatena-button class="share-button--circle" shareTitle="Comment"></hatena-button>
+      <hatena-button class="share-button--circle" shareTitle="Comment" btnText></hatena-button>
+      <hatena-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></hatena-button>
+      <hatena-button class="share-button--outline" shareTitle="Comment"></hatena-button>
+      <hatena-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></hatena-button>
+      <hatena-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></hatena-button>
+      <hatena-button class="share-button--circle share-button--outline" shareTitle="Comment"></hatena-button>
+      <hatena-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        btnText
+      ></hatena-button>
+      <hatena-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></hatena-button>
+    </div>
+    <div class="share-buttons-group">
+      <email-button shareTitle="Comment"></email-button>
+      <email-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></email-button>
+      <email-button v-bind:hasIcon="false" shareTitle="Comment"></email-button>
+      <email-button class="share-button--circle" shareTitle="Comment"></email-button>
+      <email-button class="share-button--circle" shareTitle="Comment" btnText></email-button>
+      <email-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></email-button>
+      <email-button class="share-button--outline" shareTitle="Comment"></email-button>
+      <email-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></email-button>
+      <email-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></email-button>
+      <email-button class="share-button--circle share-button--outline" shareTitle="Comment"></email-button>
+      <email-button class="share-button--circle share-button--outline" shareTitle="Comment" btnText></email-button>
+      <email-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></email-button>
+    </div>
+    <div class="share-buttons-group">
+      <viber-button shareTitle="Comment"></viber-button>
+      <viber-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></viber-button>
+      <viber-button v-bind:hasIcon="false" shareTitle="Comment"></viber-button>
+      <viber-button class="share-button--circle" shareTitle="Comment"></viber-button>
+      <viber-button class="share-button--circle" shareTitle="Comment" btnText></viber-button>
+      <viber-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></viber-button>
+      <viber-button class="share-button--outline" shareTitle="Comment"></viber-button>
+      <viber-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></viber-button>
+      <viber-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></viber-button>
+      <viber-button class="share-button--circle share-button--outline" shareTitle="Comment"></viber-button>
+      <viber-button class="share-button--circle share-button--outline" shareTitle="Comment" btnText></viber-button>
+      <viber-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></viber-button>
+    </div>
+    <div class="share-buttons-group">
+      <telegram-button shareTitle="Comment"></telegram-button>
+      <telegram-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></telegram-button>
+      <telegram-button v-bind:hasIcon="false" shareTitle="Comment"></telegram-button>
+      <telegram-button class="share-button--circle" shareTitle="Comment"></telegram-button>
+      <telegram-button class="share-button--circle" shareTitle="Comment" btnText></telegram-button>
+      <telegram-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></telegram-button>
+      <telegram-button class="share-button--outline" shareTitle="Comment"></telegram-button>
+      <telegram-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></telegram-button>
+      <telegram-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></telegram-button>
+      <telegram-button class="share-button--circle share-button--outline" shareTitle="Comment"></telegram-button>
+      <telegram-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        btnText
+      ></telegram-button>
+      <telegram-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></telegram-button>
+    </div>
+    <div class="share-buttons-group">
+      <whatsApp-button shareTitle="Comment"></whatsApp-button>
+      <whatsApp-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></whatsApp-button>
+      <whatsApp-button v-bind:hasIcon="false" shareTitle="Comment"></whatsApp-button>
+      <whatsApp-button class="share-button--circle" shareTitle="Comment"></whatsApp-button>
+      <whatsApp-button class="share-button--circle" shareTitle="Comment" btnText></whatsApp-button>
+      <whatsApp-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></whatsApp-button>
+      <whatsApp-button class="share-button--outline" shareTitle="Comment"></whatsApp-button>
+      <whatsApp-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></whatsApp-button>
+      <whatsApp-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></whatsApp-button>
+      <whatsApp-button class="share-button--circle share-button--outline" shareTitle="Comment"></whatsApp-button>
+      <whatsApp-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        btnText
+      ></whatsApp-button>
+      <whatsApp-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></whatsApp-button>
+    </div>
+
+    <div class="share-buttons-group">
+      <twitter-button class="share-button--painted" hasCounter></twitter-button>
+      <liveJournal-button class="share-button--painted"></liveJournal-button>
+      <digg-button class="share-button--painted"></digg-button>
+      <renren-button class="share-button--painted"></renren-button>
+      <blogger-button class="share-button--painted"></blogger-button>
+      <weibo-button class="share-button--painted"></weibo-button>
+      <evernote-button class="share-button--painted"></evernote-button>
+      <vkontakte-button class="share-button--painted" hasCounter></vkontakte-button>
+      <facebook-button class="share-button--painted" hasCounter></facebook-button>
+      <linkedIn-button class="share-button--painted" hasCounter></linkedIn-button>
+      <tumblr-button class="share-button--painted" hasCounter></tumblr-button>
+      <pinterest-button class="share-button--painted" hasCounter></pinterest-button>
+      <reddit-button class="share-button--painted"></reddit-button>
+      <pocket-button class="share-button--painted"></pocket-button>
+      <xing-button class="share-button--painted"></xing-button>
+      <odnoklassniki-button class="share-button--painted" hasCounter></odnoklassniki-button>
+      <instapaper-button class="share-button--painted"></instapaper-button>
+      <hatena-button class="share-button--painted"></hatena-button>
+      <email-button class="share-button--painted"></email-button>
+      <viber-button class="share-button--painted"></viber-button>
+      <telegram-button class="share-button--painted"></telegram-button>
+      <whatsApp-button class="share-button--painted"></whatsApp-button>
+    </div>
   </div>
 </template>
 
@@ -468,6 +683,12 @@ import RedditButton from "./components/RedditButton";
 import PocketButton from "./components/PocketButton";
 import XingButton from "./components/XingButton";
 import OdnoklassnikiButton from "./components/OdnoklassnikiButton";
+import InstapaperButton from "./components/InstapaperButton";
+import HatenaButton from "./components/HatenaButton";
+import EmailButton from "./components/EmailButton";
+import ViberButton from "./components/ViberButton";
+import TelegramButton from "./components/TelegramButton";
+import WhatsAppButton from "./components/WhatsAppButton";
 
 export default {
   name: "app-share-buttons",
@@ -487,13 +708,19 @@ export default {
     RedditButton,
     PocketButton,
     XingButton,
-    OdnoklassnikiButton
+    OdnoklassnikiButton,
+    InstapaperButton,
+    HatenaButton,
+    EmailButton,
+    ViberButton,
+    TelegramButton,
+    WhatsAppButton
   }
 };
 </script>
 
 <style>
-#app {
+.share-buttons-group {
-  font-family: "Avenir", Helvetica, Arial, sans-serif;
+  margin-bottom: 20px;
 }
 </style>

src/components/BloggerButton.vue

@@ -48,8 +48,8 @@ export default {
     isBlank: { type: Boolean, default: true }
   },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "Blogger" });
+      eventEmit(this, "onShare", { name: "Blogger" });
       const configWindow = createWindow();
       const url = `https://www.blogger.com/blog-this.g?u=${
         this.$props.shareUrl

src/components/DiggButton.vue

@@ -48,8 +48,8 @@ export default {
     isBlank: { type: Boolean, default: true }
   },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "Digg" });
+      eventEmit(this, "onShare", { name: "Digg" });
       const configWindow = createWindow();
       const url = `http://digg.com/submit?url=${encodeURIComponent(
         this.$props.shareUrl

src/components/EmailButton.vue

@@ -0,0 +1,75 @@
+<template>
+  <button
+    class="share-button share-button--email"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareDescription="shareDescription"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon
+      iconName="Email"
+      class="share-button__icon"
+      viewBoxWidth="620"
+      viewBoxHeight="620"
+      v-if="hasIcon === true"
+    >
+      <path
+        d="M612,156.232c0-13.065-5.16-24.885-13.393-33.897c-0.137-0.179-0.168-0.39-0.316-0.57 c-0.137-0.158-0.327-0.222-0.475-0.369c-9.361-9.794-22.553-15.988-37.243-15.988H51.437c-14.69,0-27.882,6.194-37.264,15.988 c-0.137,0.147-0.338,0.211-0.475,0.38c-0.148,0.169-0.179,0.39-0.316,0.57C5.161,131.358,0,143.167,0,156.232v299.546 c0,13.382,5.372,25.486,13.962,34.573c0.169,0.189,0.222,0.422,0.412,0.602c0.063,0.063,0.137,0.073,0.201,0.137 c9.361,9.541,22.394,15.514,36.863,15.514h509.136c14.469,0,27.513-5.983,36.863-15.523c0.063-0.054,0.137-0.074,0.2-0.127 c0.18-0.169,0.232-0.401,0.401-0.581c8.601-9.086,13.973-21.201,13.973-34.594V156.232H612z M411.687,290.175l176.368-146.238 c1.73,3.757,2.754,7.904,2.754,12.294v299.546c0,3.969-0.823,7.736-2.248,11.208L411.687,290.175z M560.573,126.355 c4.443,0,8.633,1.013,12.442,2.723l-267.01,221.378L38.995,129.078c3.81-1.709,8-2.723,12.442-2.723H560.573z M23.45,466.976 c-1.425-3.461-2.248-7.239-2.248-11.208V156.232c0-4.39,1.024-8.538,2.754-12.294l176.368,146.238L23.45,466.976z M51.437,485.645c-4.896,0-9.456-1.267-13.55-3.313l178.731-178.658l82.58,68.471c1.963,1.636,4.39,2.459,6.807,2.459 c2.417,0,4.844-0.823,6.807-2.459l82.58-68.471l178.731,178.658c-4.095,2.047-8.653,3.313-13.551,3.313H51.437z"
+      />
+    </icon>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
+export default {
+  name: "EmailShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String, default: "" },
+    shareDescription: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Email" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow() {
+      eventEmit(this, "onShare", { name: "Email" });
+      const configWindow = createWindow();
+      const url = `mailto:?subject=Share%20Link&body=${encodeURIComponent(
+        this.$props.shareUrl
+      )}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/emailButton.css";
+</style>

src/components/EvernoteButton.vue

@@ -47,8 +47,8 @@ export default {
     isBlank: { type: Boolean, default: true }
   },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "Evernote" });
+      eventEmit(this, "onShare", { name: "Evernote" });
       const configWindow = createWindow();
       const url = `https://www.evernote.com/clip.action?url=${encodeURIComponent(
         this.$props.shareUrl

src/components/FacebookButton.vue

@@ -10,6 +10,9 @@
     :windowWidth="windowWidth"
     :windowHeight="windowHeight"
     :hasIcon="hasIcon"
+    :hasCounter="hasCounter"
+    :digitsCounter="digitsCounter"
+    :keyCounter="keyCounter"
     :isBlank="isBlank"
     @click="openShareWindow"
   >
@@ -19,6 +22,7 @@
       />
     </icon>
     <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+    <span class="share-button__counter" v-if="hasCounter && counter > 0">{{ shortСounter }}</span>
   </button>
 </template>
  
@@ -28,7 +32,9 @@ import {
   getDocumentHref,
   getDocumentTitle,
   eventEmit,
-  createWindow
+  createWindow,
+  getRandomNumber,
+  getShortNumber
 } from "../helpers";
 
 export default {
@@ -44,20 +50,58 @@ export default {
     windowWidth: { type: Number },
     windowHeight: { type: Number },
     hasIcon: { type: Boolean, default: true },
+    hasCounter: { type: Boolean, default: false },
+    digitsCounter: { type: Number, default: 0 },
+    keyCounter: { type: String, default: "" },
     isBlank: { type: Boolean, default: true }
   },
+  mounted() {
+    if (this.$props.hasCounter) this.getShareCounter();
+  },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "Facebook" });
+      if (this.$props.hasCounter) {
+        eventEmit(this, "onShareCounter", {
+          name: "Facebook",
+          counter: this.counter
+        });
+      } else {
+        eventEmit(this, "onShare", { name: "Facebook" });
+      }
       const configWindow = createWindow();
-      const url = `https://www.facebook.com/sharer/sharer.php?u=${
+      const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
         this.$props.shareUrl
-      }`;
+      )}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
         : window.open(url, "Share this", configWindow);
+    },
+
+    getShareCounter() {
+      const callback =
+        this.$props.keyCounter || `Facebook_${getRandomNumber()}`;
+      const script = document.createElement("script");
+      script.src = `https://graph.facebook.com?id=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&callback=${callback}`;
+      document.body.appendChild(script);
+
+      window[callback] = count => {
+        if (!count) return;
+        this.counter = count.share.share_count;
+        this.shortСounter = getShortNumber(
+          this.counter,
+          this.$props.digitsCounter
+        );
+      };
     }
+  },
+  data() {
+    return {
+      counter: 0,
+      shortСounter: 0
+    };
   }
 };
 </script>

src/components/FacebookMessengerButton.vue

@@ -0,0 +1,69 @@
+<template>
+  <button
+    class="share-button share-button--facebookMessenger"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareDescription="shareDescription"
+    :shareTitle="shareTitle"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="FacebookMessenger" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"
+      />
+    </icon>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
+export default {
+  name: "FacebookMessengerShareButton",
+  components: { Icon },
+  props: {
+    appID: { type: String },
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String, default: "" },
+    shareDescription: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "FacebookMessenger" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow() {
+      eventEmit(this, "onShare", { name: "FacebookMessenger" });
+      const configWindow = createWindow();
+      const url = `fb-messenger://share/?link=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&app_id=${this.$props.appID}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/facebookMessengerButton.css";
+</style>

src/components/HatenaButton.vue

@@ -0,0 +1,69 @@
+<template>
+  <button
+    class="share-button share-button--hatena"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareDescription="shareDescription"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Hatena" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M20.47 0C22.42 0 24 1.58 24 3.53v16.94c0 1.95-1.58 3.53-3.53 3.53H3.53C1.58 24 0 22.42 0 20.47V3.53C0 1.58 1.58 0 3.53 0h16.94zm-3.705 14.47c-.78 0-1.41.63-1.41 1.41s.63 1.414 1.41 1.414 1.41-.645 1.41-1.425-.63-1.41-1.41-1.41zM8.61 17.247c1.2 0 2.056-.042 2.58-.12.526-.084.976-.222 1.32-.412.45-.232.78-.564 1.02-.99s.36-.915.36-1.48c0-.78-.21-1.403-.63-1.87-.42-.48-.99-.734-1.74-.794.66-.18 1.156-.45 1.456-.81.315-.344.465-.824.465-1.424 0-.48-.103-.885-.3-1.26-.21-.36-.493-.645-.883-.87-.345-.195-.735-.315-1.215-.405-.464-.074-1.29-.12-2.474-.12H5.654v10.486H8.61zm.736-4.185c.705 0 1.185.088 1.44.262.27.18.39.495.39.93 0 .405-.135.69-.42.855-.27.18-.765.254-1.44.254H8.31v-2.297h1.05zm8.656.706v-7.06h-2.46v7.06H18zM8.925 9.08c.71 0 1.185.08 1.432.24.245.16.367.435.367.83 0 .38-.13.646-.39.804-.265.154-.747.232-1.452.232h-.57V9.08h.615z"
+      />
+    </icon>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
+export default {
+  name: "HatenaShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String, default: "" },
+    shareDescription: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Hatena" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow() {
+      eventEmit(this, "onShare", { name: "Hatena" });
+      const configWindow = createWindow();
+      const url = `http://b.hatena.ne.jp/bookmarklet?url=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&btitle=${encodeURIComponent(this.$props.shareDescription)}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/hatenaButton.css";
+</style>

src/components/InstapaperButton.vue

@@ -0,0 +1,69 @@
+<template>
+  <button
+    class="share-button share-button--instapaper"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareDescription="shareDescription"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Instapaper" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M14.766 20.259c0 1.819.271 2.089 2.934 2.292V24H6.301v-1.449c2.666-.203 2.934-.473 2.934-2.292V3.708c0-1.784-.27-2.089-2.934-2.292V0h11.398v1.416c-2.662.203-2.934.506-2.934 2.292v16.551z"
+      />
+    </icon>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
+export default {
+  name: "InstapaperShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String, default: "" },
+    shareDescription: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Instapaper" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow() {
+      eventEmit(this, "onShare", { name: "Instapaper" });
+      const configWindow = createWindow();
+      const url = `https://www.instapaper.com/edit?url=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&title=${encodeURIComponent(this.$props.shareDescription)}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/instapaperButton.css";
+</style>

src/components/LinkedInButton.vue

@@ -10,6 +10,9 @@
     :windowWidth="windowWidth"
     :windowHeight="windowHeight"
     :hasIcon="hasIcon"
+    :hasCounter="hasCounter"
+    :digitsCounter="digitsCounter"
+    :keyCounter="keyCounter"
     :isBlank="isBlank"
     @click="openShareWindow"
   >
@@ -19,6 +22,7 @@
       />
     </icon>
     <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+    <span class="share-button__counter" v-if="hasCounter && counter > 0">{{ shortСounter }}</span>
   </button>
 </template>
  
@@ -28,7 +32,9 @@ import {
   getDocumentHref,
   getDocumentTitle,
   eventEmit,
-  createWindow
+  createWindow,
+  getRandomNumber,
+  getShortNumber
 } from "../helpers";
 
 export default {
@@ -44,11 +50,24 @@ export default {
     windowWidth: { type: Number },
     windowHeight: { type: Number },
     hasIcon: { type: Boolean, default: true },
+    hasCounter: { type: Boolean, default: false },
+    digitsCounter: { type: Number, default: 0 },
+    keyCounter: { type: String, default: "" },
     isBlank: { type: Boolean, default: true }
   },
+  mounted() {
+    if (this.$props.hasCounter) this.getShareCounter();
+  },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "LinkedIn" });
+      if (this.$props.hasCounter) {
+        eventEmit(this, "onShareCounter", {
+          name: "LinkedIn",
+          counter: this.counter
+        });
+      } else {
+        eventEmit(this, "onShare", { name: "LinkedIn" });
+      }
       const configWindow = createWindow();
       const url = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(
         this.$props.shareUrl
@@ -57,7 +76,32 @@ export default {
       return this.$props.isBlank
         ? window.open(url, "__blank")
         : window.open(url, "Share this", configWindow);
+    },
+
+    getShareCounter() {
+      const callback =
+        this.$props.keyCounter || `LinkedIn_${getRandomNumber()}`;
+      const script = document.createElement("script");
+      script.src = `https://www.linkedin.com/countserv/count/share?url=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&callback=${callback}`;
+      document.body.appendChild(script);
+
+      window[callback] = count => {
+        if (!count) return;
+        this.counter = count.count;
+        this.shortСounter = getShortNumber(
+          this.counter,
+          this.$props.digitsCounter
+        );
+      };
     }
+  },
+  data() {
+    return {
+      counter: 0,
+      shortСounter: 0
+    };
   }
 };
 </script>

src/components/LiveJournalButton.vue

@@ -48,8 +48,8 @@ export default {
     isBlank: { type: Boolean, default: true }
   },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "LiveJournal" });
+      eventEmit(this, "onShare", { name: "LiveJournal" });
       const configWindow = createWindow();
       const url = `https://livejournal.com/update.bml?event=${encodeURIComponent(
         this.$props.shareDescription

src/components/OdnoklassnikiButton.vue

@@ -11,6 +11,8 @@
     :windowWidth="windowWidth"
     :windowHeight="windowHeight"
     :hasIcon="hasIcon"
+    :hasCounter="hasCounter"
+    :digitsCounter="digitsCounter"
     :isBlank="isBlank"
     @click="openShareWindow"
   >
@@ -20,6 +22,7 @@
       />
     </icon>
     <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+    <span class="share-button__counter" v-if="hasCounter && counter > 0">{{ shortСounter }}</span>
   </button>
 </template>
  
@@ -29,7 +32,8 @@ import {
   getDocumentHref,
   getDocumentTitle,
   eventEmit,
-  createWindow
+  createWindow,
+  getShortNumber
 } from "../helpers";
 
 export default {
@@ -45,11 +49,23 @@ export default {
     windowWidth: { type: Number },
     windowHeight: { type: Number },
     hasIcon: { type: Boolean, default: true },
+    hasCounter: { type: Boolean, default: false },
+    digitsCounter: { type: Number, default: 0 },
     isBlank: { type: Boolean, default: true }
   },
+  mounted() {
+    if (this.$props.hasCounter) this.getShareCounter();
+  },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "Odnoklassniki" });
+      if (this.$props.hasCounter) {
+        eventEmit(this, "onShareCounter", {
+          name: "Odnoklassniki",
+          counter: this.counter
+        });
+      } else {
+        eventEmit(this, "onShare", { name: "Odnoklassniki" });
+      }
       const configWindow = createWindow();
       const url = `https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=${encodeURIComponent(
         this.$props.shareUrl
@@ -58,7 +74,35 @@ export default {
       return this.$props.isBlank
         ? window.open(url, "__blank")
         : window.open(url, "Share this", configWindow);
+    },
+
+    getShareCounter() {
+      if (window.ODKL && typeof window.ODKL.updateCount === "function") {
+        return;
+      }
+
+      const script = document.createElement("script");
+      script.src = `https://connect.ok.ru/dk?st.cmd=extLike&uid=1&ref=${encodeURIComponent(
+        this.$props.shareUrl
+      )}`;
+      document.body.appendChild(script);
+
+      window.ODKL = Object.assign({}, { Share: {} }, window.ODKL);
+      window.ODKL.updateCount = (index, count) => {
+        if (!count) return;
+        this.counter = count;
+        this.shortСounter = getShortNumber(
+          this.counter,
+          this.$props.digitsCounter
+        );
+      };
     }
+  },
+  data() {
+    return {
+      counter: 0,
+      shortСounter: 0
+    };
   }
 };
 </script>

src/components/PinterestButton.vue

@@ -11,6 +11,9 @@
     :windowWidth="windowWidth"
     :windowHeight="windowHeight"
     :hasIcon="hasIcon"
+    :hasCounter="hasCounter"
+    :digitsCounter="digitsCounter"
+    :keyCounter="keyCounter"
     :isBlank="isBlank"
     @click="openShareWindow"
   >
@@ -20,6 +23,7 @@
       />
     </icon>
     <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+    <span class="share-button__counter" v-if="hasCounter && counter > 0">{{ shortСounter }}</span>
   </button>
 </template>
  
@@ -29,7 +33,9 @@ import {
   getDocumentHref,
   getDocumentTitle,
   eventEmit,
-  createWindow
+  createWindow,
+  getRandomNumber,
+  getShortNumber
 } from "../helpers";
 
 export default {
@@ -45,11 +51,24 @@ export default {
     windowWidth: { type: Number },
     windowHeight: { type: Number },
     hasIcon: { type: Boolean, default: true },
+    hasCounter: { type: Boolean, default: false },
+    digitsCounter: { type: Number, default: 0 },
+    keyCounter: { type: String, default: "" },
     isBlank: { type: Boolean, default: true }
   },
+  mounted() {
+    if (this.$props.hasCounter) this.getShareCounter();
+  },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "Pinterest" });
+      if (this.$props.hasCounter) {
+        eventEmit(this, "onShareCounter", {
+          name: "Pinterest",
+          counter: this.counter
+        });
+      } else {
+        eventEmit(this, "onShare", { name: "Pinterest" });
+      }
       const configWindow = createWindow();
       const url = `https://www.pinterest.com/pin/create/button/?canonicalUrl=${encodeURIComponent(
         this.$props.shareUrl
@@ -60,7 +79,32 @@ export default {
       return this.$props.isBlank
         ? window.open(url, "__blank")
         : window.open(url, "Share this", configWindow);
+    },
+
+    getShareCounter() {
+      const callback =
+        this.$props.keyCounter || `Pinterest_${getRandomNumber()}`;
+      const script = document.createElement("script");
+      script.src = `https://api.pinterest.com/v1/urls/count.json?url=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&callback=${callback}`;
+      document.body.appendChild(script);
+
+      window[callback] = count => {
+        if (!count) return;
+        this.counter = count.count;
+        this.shortСounter = getShortNumber(
+          this.counter,
+          this.$props.digitsCounter
+        );
+      };
     }
+  },
+  data() {
+    return {
+      counter: 0,
+      shortСounter: 0
+    };
   }
 };
 </script>

src/components/PocketButton.vue

@@ -48,8 +48,8 @@ export default {
     isBlank: { type: Boolean, default: true }
   },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "Pocket" });
+      eventEmit(this, "onShare", { name: "Pocket" });
       const configWindow = createWindow();
       const url = `https://getpocket.com/edit?url=${encodeURIComponent(
         this.$props.shareUrl

src/components/RedditButton.vue

@@ -48,8 +48,8 @@ export default {
     isBlank: { type: Boolean, default: true }
   },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "Reddit" });
+      eventEmit(this, "onShare", { name: "Reddit" });
       const configWindow = createWindow();
       const url = `https://reddit.com/submit?url=${encodeURIComponent(
         this.$props.shareUrl

src/components/RenrenButton.vue

@@ -51,8 +51,8 @@ export default {
     isBlank: { type: Boolean, default: true }
   },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "Renren" });
+      eventEmit(this, "onShare", { name: "Renren" });
       const configWindow = createWindow();
       const url = `http://share.renren.com/share/buttonshare.do?link=${encodeURIComponent(
         this.$props.shareUrl

src/components/TelegramButton.vue

@@ -0,0 +1,71 @@
+<template>
+  <button
+    class="share-button share-button--telegram"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareDescription="shareDescription"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Telegram" class="share-button__icon" v-if="hasIcon === true">
+      <path d="M9.028 20.837c-.714 0-.593-.271-.839-.949l-2.103-6.92L22.263 3.37"/>
+      <path d="M9.028 20.837c.552 0 .795-.252 1.105-.553l2.941-2.857-3.671-2.214"/>
+      <path
+        d="M9.403 15.213l8.89 6.568c1.015.56 1.748.271 2-.942l3.62-17.053c.372-1.487-.564-2.159-1.534-1.72L1.125 10.263c-1.45.582-1.443 1.392-.264 1.753l5.455 1.7L18.94 5.753c.595-.36 1.143-.167.694.232"
+      />
+    </icon>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
+export default {
+  name: "TelegramShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String, default: "" },
+    shareDescription: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Telegram" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow() {
+      eventEmit(this, "onShare", { name: "Telegram" });
+      const configWindow = createWindow();
+      const url = `https://telegram.me/share/url?url=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&text=${encodeURIComponent(this.$props.shareDescription)}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/telegramButton.css";
+</style>

src/components/TumblrButton.vue

@@ -11,6 +11,9 @@
     :windowWidth="windowWidth"
     :windowHeight="windowHeight"
     :hasIcon="hasIcon"
+    :hasCounter="hasCounter"
+    :digitsCounter="digitsCounter"
+    :keyCounter="keyCounter"
     :isBlank="isBlank"
     @click="openShareWindow"
   >
@@ -20,6 +23,7 @@
       />
     </icon>
     <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+    <span class="share-button__counter" v-if="hasCounter && counter > 0">{{ shortСounter }}</span>
   </button>
 </template>
  
@@ -29,7 +33,9 @@ import {
   getDocumentHref,
   getDocumentTitle,
   eventEmit,
-  createWindow
+  createWindow,
+  getRandomNumber,
+  getShortNumber
 } from "../helpers";
 
 export default {
@@ -45,11 +51,24 @@ export default {
     windowWidth: { type: Number },
     windowHeight: { type: Number },
     hasIcon: { type: Boolean, default: true },
+    hasCounter: { type: Boolean, default: false },
+    digitsCounter: { type: Number, default: 0 },
+    keyCounter: { type: String, default: "" },
     isBlank: { type: Boolean, default: true }
   },
+  mounted() {
+    if (this.$props.hasCounter) this.getShareCounter();
+  },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "Tumblr" });
+      if (this.$props.hasCounter) {
+        eventEmit(this, "onShareCounter", {
+          name: "Tumblr",
+          counter: this.counter
+        });
+      } else {
+        eventEmit(this, "onShare", { name: "Tumblr" });
+      }
       const configWindow = createWindow();
       const url = `https://www.tumblr.com/widgets/share/tool?canonicalUrl=${encodeURIComponent(
         this.$props.shareUrl
@@ -62,7 +81,31 @@ export default {
       return this.$props.isBlank
         ? window.open(url, "__blank")
         : window.open(url, "Share this", configWindow);
+    },
+
+    getShareCounter() {
+      const callback = this.$props.keyCounter || `Tumblr_${getRandomNumber()}`;
+      const script = document.createElement("script");
+      script.src = `https://api.tumblr.com/v2/share/stats?url=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&callback=${callback}`;
+      document.body.appendChild(script);
+
+      window[callback] = count => {
+        if (!count) return;
+        this.counter = count.response.note_count;
+        this.shortСounter = getShortNumber(
+          this.counter,
+          this.$props.digitsCounter
+        );
+      };
     }
+  },
+  data() {
+    return {
+      counter: 0,
+      shortСounter: 0
+    };
   }
 };
 </script>

src/components/TwitterButton.vue

@@ -48,8 +48,8 @@ export default {
     isBlank: { type: Boolean, default: true }
   },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "Twitter" });
+      eventEmit(this, "onShare", { name: "Twitter" });
       const configWindow = createWindow();
       const url = `https://twitter.com/share?url=${encodeURIComponent(
         this.$props.shareUrl

src/components/ViberButton.vue

@@ -0,0 +1,81 @@
+<template>
+  <button
+    class="share-button share-button--viber"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareDescription="shareDescription"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Viber" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M252.47-252.87c-16.57-15.24-83.48-63.82-232.54-64.48 0 0-175.79-10.6-261.47 68.01-47.7 47.7-64.49 117.49-66.25 204.05-1.77 86.57-4.07 248.75 152.29 292.74l.15.04-.1 67.1s-.98 27.18 16.89 32.72c21.64 6.72 34.34-13.94 55-36.19 11.35-12.22 27-30.17 38.8-43.89 106.94 8.96 189.18-11.57 198.51-14.6 21.6-7.03 143.77-22.67 163.64-184.85 20.5-167.21-9.94-272.95-64.92-320.65M270.58 55.7c-16.8 135.42-115.85 143.97-134.12 149.83-7.77 2.5-80.02 20.47-170.84 14.54 0 0-67.68 81.64-88.8 102.88-3.31 3.32-7.19 4.66-9.78 4.03-3.64-.9-4.65-5.2-4.6-11.5.06-9 .57-111.52.57-111.52-.1-.03-.07-.02-.02 0-132.23-36.75-124.52-174.8-123.03-247.09 1.5-72.28 15.08-131.51 55.43-171.34 72.48-65.65 221.79-55.84 221.79-55.84 126.08.55 186.51 38.52 200.52 51.24 46.51 39.83 70.22 135.14 52.88 274.76"
+      />
+      <path
+        d="M20.81 2.34c-.6-.55-3-2.3-8.37-2.32 0 0-6.33-.38-9.42 2.45C1.3 4.18.7 6.7.63 9.82.57 12.93.5 18.77 6.13 20.36v2.42s-.04.97.6 1.17c.79.25 1.24-.5 1.99-1.3l1.4-1.58c3.85.32 6.8-.42 7.14-.53.78-.25 5.18-.81 5.9-6.65.74-6.03-.36-9.83-2.34-11.55m.65 11.11c-.6 4.88-4.17 5.19-4.83 5.4-.28.09-2.88.73-6.15.52 0 0-2.44 2.94-3.2 3.7-.12.13-.26.17-.35.15-.13-.03-.17-.19-.16-.41l.02-4.02c-4.77-1.32-4.49-6.3-4.44-8.9.06-2.6.55-4.73 2-6.17 2.61-2.36 7.99-2 7.99-2 4.54.01 6.71 1.38 7.22 1.84 1.67 1.43 2.53 4.86 1.9 9.9"
+      />
+      <path
+        d="M14.65 9.98a.3.3 0 0 1-.3-.29c-.06-1.03-.54-1.53-1.53-1.58a.3.3 0 0 1 .03-.61c1.3.07 2.03.82 2.1 2.16a.3.3 0 0 1-.29.32h-.01"
+      />
+      <path
+        d="M16.2 10.5a.3.3 0 0 1-.3-.3 3.5 3.5 0 0 0-.9-2.57 3.78 3.78 0 0 0-2.65-1.15.3.3 0 1 1 .04-.6c1.3.09 2.32.54 3.05 1.34s1.1 1.8 1.07 2.99a.3.3 0 0 1-.3.3"
+      />
+      <path
+        d="M17.8 11.13a.3.3 0 0 1-.3-.3c-.02-1.86-.55-3.28-1.64-4.34a5.63 5.63 0 0 0-4.03-1.59.3.3 0 0 1-.3-.3c0-.17.14-.3.3-.3 1.77 0 3.27.6 4.46 1.76a6.45 6.45 0 0 1 1.81 4.76.3.3 0 0 1-.3.3zM12.9 13.74s.42.04.65-.24l.45-.57c.21-.28.73-.45 1.24-.17a13.63 13.63 0 0 1 2.15 1.54c.33.28.41.69.18 1.12v.01c-.23.41-.54.8-.93 1.15a1.84 1.84 0 0 1-1.1.47c-.13 0-.26-.02-.4-.06v-.01c-.48-.14-1.28-.48-2.6-1.2a15.6 15.6 0 0 1-3.18-2.33l-.03-.03-.03-.03-.04-.03-.03-.04a15.38 15.38 0 0 1-2.32-3.17 13.72 13.72 0 0 1-1.2-2.6l-.02-.01A1.24 1.24 0 0 1 5.64 7c.04-.31.19-.63.46-.95.36-.4.74-.7 1.15-.94h.01c.43-.23.84-.15 1.12.18a13.52 13.52 0 0 1 1.54 2.15c.29.51.1 1.03-.17 1.25l-.56.45c-.29.22-.25.65-.25.65s.83 3.16 3.95 3.96"
+      />
+    </icon>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
+export default {
+  name: "ViberShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String, default: "" },
+    shareDescription: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Viber" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow() {
+      eventEmit(this, "onShare", { name: "Viber" });
+      const configWindow = createWindow();
+      const url = `viber://forward?text=${encodeURIComponent(
+        this.$props.shareUrl
+      )}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/viberButton.css";
+</style>

src/components/VkontakteButton.vue

@@ -10,6 +10,8 @@
     :windowWidth="windowWidth"
     :windowHeight="windowHeight"
     :hasIcon="hasIcon"
+    :hasCounter="hasCounter"
+    :digitsCounter="digitsCounter"
     :isBlank="isBlank"
     @click="openShareWindow"
   >
@@ -19,6 +21,7 @@
       />
     </icon>
     <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+    <span class="share-button__counter" v-if="hasCounter && counter > 0">{{ shortСounter }}</span>
   </button>
 </template>
  
@@ -28,7 +31,9 @@ import {
   getDocumentHref,
   getDocumentTitle,
   eventEmit,
-  createWindow
+  createWindow,
+  getRandomNumber,
+  getShortNumber
 } from "../helpers";
 
 export default {
@@ -44,11 +49,23 @@ export default {
     windowWidth: { type: Number },
     windowHeight: { type: Number },
     hasIcon: { type: Boolean, default: true },
+    hasCounter: { type: Boolean, default: false },
+    digitsCounter: { type: Number, default: 0 },
     isBlank: { type: Boolean, default: true }
   },
+  mounted() {
+    if (this.$props.hasCounter) this.getShareCounter();
+  },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "vk" });
+      if (this.$props.hasCounter) {
+        eventEmit(this, "onShareCounter", {
+          name: "vk",
+          counter: this.counter
+        });
+      } else {
+        eventEmit(this, "onShare", { name: "vk" });
+      }
       const configWindow = createWindow();
       const url = `https://vk.com/share.php?url=${encodeURIComponent(
         this.$props.shareUrl
@@ -61,7 +78,39 @@ export default {
       return this.$props.isBlank
         ? window.open(url, "__blank")
         : window.open(url, "Share this", configWindow);
+    },
+
+    getShareCounter() {
+      if (
+        window.VK &&
+        window.VK.Share &&
+        typeof window.VK.Share.count === "function"
+      ) {
+        return;
+      }
+
+      const script = document.createElement("script");
+      script.src = `https://vk.com/share.php?act=count&index=${getRandomNumber()}&url=${encodeURIComponent(
+        this.$props.shareUrl
+      )}`;
+      document.body.appendChild(script);
+
+      window.VK = Object.assign({}, { Share: {} }, window.VK);
+      window.VK.Share.count = (index, count) => {
+        if (!count) return;
+        this.counter = count;
+        this.shortСounter = getShortNumber(
+          this.counter,
+          this.$props.digitsCounter
+        );
+      };
     }
+  },
+  data() {
+    return {
+      counter: 0,
+      shortСounter: 0
+    };
   }
 };
 </script>

src/components/WeiboButton.vue

@@ -48,8 +48,8 @@ export default {
     isBlank: { type: Boolean, default: true }
   },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "Weibo" });
+      eventEmit(this, "onShare", { name: "Weibo" });
       const configWindow = createWindow();
       const url = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(
         this.$props.shareUrl

src/components/WhatsAppButton.vue

@@ -0,0 +1,69 @@
+<template>
+  <button
+    class="share-button share-button--whatsApp"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareDescription="shareDescription"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="WhatsApp" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M17.498 14.382c-.301-.15-1.767-.867-2.04-.966-.273-.101-.473-.15-.673.15-.197.295-.771.964-.944 1.162-.175.195-.349.21-.646.075-.3-.15-1.263-.465-2.403-1.485-.888-.795-1.484-1.77-1.66-2.07-.174-.3-.019-.465.13-.615.136-.135.301-.345.451-.523.146-.181.194-.301.297-.496.1-.21.049-.375-.025-.524-.075-.15-.672-1.62-.922-2.206-.24-.584-.487-.51-.672-.51-.172-.015-.371-.015-.571-.015-.2 0-.523.074-.797.359-.273.3-1.045 1.02-1.045 2.475s1.07 2.865 1.219 3.075c.149.195 2.105 3.195 5.1 4.485.714.3 1.27.48 1.704.629.714.227 1.365.195 1.88.121.574-.091 1.767-.721 2.016-1.426.255-.705.255-1.29.18-1.425-.074-.135-.27-.21-.57-.345m-5.446 7.443h-.016c-1.77 0-3.524-.48-5.055-1.38l-.36-.214-3.75.975 1.005-3.645-.239-.375c-.99-1.576-1.516-3.391-1.516-5.26 0-5.445 4.455-9.885 9.942-9.885 2.654 0 5.145 1.035 7.021 2.91 1.875 1.859 2.909 4.35 2.909 6.99-.004 5.444-4.46 9.885-9.935 9.885M20.52 3.449C18.24 1.245 15.24 0 12.045 0 5.463 0 .104 5.334.101 11.893c0 2.096.549 4.14 1.595 5.945L0 24l6.335-1.652c1.746.943 3.71 1.444 5.71 1.447h.006c6.585 0 11.946-5.336 11.949-11.896 0-3.176-1.24-6.165-3.495-8.411"
+      />
+    </icon>
+    <span class="share-button__text" v-if="btnText">{{btnText}}</span>
+  </button>
+</template>
+ 
+<script>
+import Icon from "./icon/Icon.vue";
+import {
+  getDocumentHref,
+  getDocumentTitle,
+  eventEmit,
+  createWindow
+} from "../helpers";
+
+export default {
+  name: "WhatsAppShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String, default: "" },
+    shareDescription: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "WhatsApp" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow() {
+      eventEmit(this, "onShare", { name: "WhatsApp" });
+      const configWindow = createWindow();
+      const url = `whatsapp://send?text=${encodeURIComponent(
+        this.$props.shareUrl
+      )}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/whatsAppButton.css";
+</style>

src/components/XingButton.vue

@@ -48,8 +48,8 @@ export default {
     isBlank: { type: Boolean, default: true }
   },
   methods: {
-    openShareWindow: function() {
+    openShareWindow() {
-      eventEmit(this, { name: "Xing" });
+      eventEmit(this, "onShare", { name: "Xing" });
       const configWindow = createWindow();
       const url = `https://www.xing.com/social_plugins/share?url=${encodeURIComponent(
         this.$props.shareUrl

src/helpers/event.js

@@ -2,7 +2,9 @@
  * Trigger an event.
  *
  * @param {object} vm - VueComponent.
+ * @param {string} eventName - Nameof the emitted events.
  * @param {object} option - Custom options.
  * @return {object} - Event.
  */
-export const eventEmit = (vm, option) => vm.$emit("onClick", { ...option });
+export const eventEmit = (vm, eventName = "", option) =>
+  vm.$emit(eventName, { ...option });

src/helpers/getRandomNumber.js

@@ -0,0 +1,9 @@
+/**
+ * Get random number.
+ *
+ * @param {number} min - Lower possible number.
+ * @param {number} max - Largest possible number.
+ * @returns {number} - Random number.
+ */
+export const getRandomNumber = (min = 1, max = 9000) =>
+  Math.floor(Math.random() * (max - min + 1) + min);

src/helpers/getShortNumber.js

@@ -0,0 +1,20 @@
+/**
+ * Format the number in a short record.
+ *
+ * @param {number} number - Initial number.
+ * @param {number} digits - The number of digits to appear after the decimal point.
+ * @returns {number|string} - Formatted number.
+ */
+export const getShortNumber = (number, digits = 0) => {
+  const units = ["k", "m", "g", "t", "p", "e", "z", "y"];
+
+  for (let index = units.length - 1; index >= 0; index--) {
+    const decimal = Math.pow(1000, index + 1);
+
+    if (number <= -decimal || number >= decimal) {
+      return `${Number(number / decimal).toFixed(digits)}${units[index]}`;
+    }
+  }
+
+  return number;
+};

src/helpers/index.js

@@ -1,3 +1,5 @@
 export { getDocumentHref, getDocumentTitle } from "./documentData.js";
 export { eventEmit } from "./event";
 export { createWindow } from "./createWindow";
+export { getRandomNumber } from "./getRandomNumber";
+export { getShortNumber } from "./getShortNumber";

src/icons/facebook.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Facebook icon</title><path fill="#ffffff" d="M22.676 0H1.324C.593 0 0 .593 0 1.324v21.352C0 23.408.593 24 1.324 24h11.494v-9.294H9.689v-3.621h3.129V8.41c0-3.099 1.894-4.785 4.659-4.785 1.325 0 2.464.097 2.796.141v3.24h-1.921c-1.5 0-1.792.721-1.792 1.771v2.311h3.584l-.465 3.63H16.56V24h6.115c.733 0 1.325-.592 1.325-1.324V1.324C24 .593 23.408 0 22.676 0"/></svg>

src/icons/twitter-color.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter icon</title><path fill="#1ca0f1" d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>

src/icons/twitter.svg

@@ -1 +0,0 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Twitter icon</title><path fill="#ffffff" d="M23.954 4.569c-.885.389-1.83.654-2.825.775 1.014-.611 1.794-1.574 2.163-2.723-.951.555-2.005.959-3.127 1.184-.896-.959-2.173-1.559-3.591-1.559-2.717 0-4.92 2.203-4.92 4.917 0 .39.045.765.127 1.124C7.691 8.094 4.066 6.13 1.64 3.161c-.427.722-.666 1.561-.666 2.475 0 1.71.87 3.213 2.188 4.096-.807-.026-1.566-.248-2.228-.616v.061c0 2.385 1.693 4.374 3.946 4.827-.413.111-.849.171-1.296.171-.314 0-.615-.03-.916-.086.631 1.953 2.445 3.377 4.604 3.417-1.68 1.319-3.809 2.105-6.102 2.105-.39 0-.779-.023-1.17-.067 2.189 1.394 4.768 2.209 7.557 2.209 9.054 0 13.999-7.496 13.999-13.986 0-.209 0-.42-.015-.63.961-.689 1.8-1.56 2.46-2.548l-.047-.02z"/></svg>

src/style/bloggerButton.css

@@ -40,3 +40,12 @@
 .share-button--blogger.share-button--outline:hover .share-button__icon path {
   fill: hsla(14, 100%, 57%, 0.9);
 }
+
+.share-button--blogger.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(14, 77%, 47%, 1);
+}
+
+.share-button--blogger.share-button--painted::before {
+  background-color: hsla(14, 100%, 57%, 1);
+}

src/style/diggButton.css

@@ -40,3 +40,12 @@
 .share-button--digg.share-button--outline:hover .share-button__icon path {
   fill: hsla(0, 0%, 0%, 0.9);
 }
+
+.share-button--digg.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(0, 0%, 0%, 1);
+}
+
+.share-button--digg.share-button--painted::before {
+  background-color: hsla(0, 0%, 0%, 1);
+}

src/style/emailButton.css

@@ -0,0 +1,51 @@
+/* Email */
+.share-button--email {
+  background-color: hsla(194, 77%, 56%, 1);
+}
+
+.share-button--email:focus {
+  box-shadow: 0 0 0 3px hsla(194, 77%, 81%, 0.4);
+}
+
+.share-button--email:hover {
+  background-color: hsla(194, 77%, 56%, 0.9);
+}
+
+.share-button--email .share-button__icon path {
+  fill: #fff;
+}
+
+.share-button--email.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(194, 77%, 56%, 1);
+}
+
+.share-button--email.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(194, 77%, 56%, 0.9);
+}
+
+.share-button--email.share-button--outline .share-button__text {
+  color: hsla(194, 77%, 56%, 1);
+}
+
+.share-button--email.share-button--outline:hover .share-button__text {
+  color: hsla(194, 77%, 56%, 0.9);
+}
+
+.share-button--email.share-button--outline .share-button__icon path {
+  fill: hsla(194, 77%, 56%, 1);
+}
+
+.share-button--email.share-button--outline:hover .share-button__icon path {
+  fill: hsla(194, 77%, 56%, 0.9);
+}
+
+.share-button--email.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(193, 54%, 46%, 1);
+}
+
+.share-button--email.share-button--painted::before {
+  background-color: hsla(194, 77%, 56%, 1);
+}

src/style/evernoteButton.css

@@ -40,3 +40,12 @@
 .share-button--evernote.share-button--outline:hover .share-button__icon path {
   fill: hsla(136, 100%, 33%, 0.9);
 }
+
+.share-button--evernote.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(135, 77%, 23%, 1);
+}
+
+.share-button--evernote.share-button--painted::before {
+  background-color: hsla(136, 100%, 33%, 1);
+}

src/style/facebookButton.css

@@ -40,3 +40,26 @@
 .share-button--facebook.share-button--outline:hover .share-button__icon path {
   fill: hsla(221, 44%, 41%, 0.9);
 }
+
+.share-button--facebook.share-button--outline .share-button__counter {
+  color: hsla(221, 44%, 41%, 0.9);
+  border-color: hsla(221, 44%, 41%, 0.9);
+}
+
+.share-button--facebook.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(220, 21%, 31%, 1);
+}
+
+.share-button--facebook.share-button--painted::before {
+  background-color: hsla(221, 44%, 41%, 1);
+}
+
+.share-button--facebook.share-button--painted .share-button__counter {
+  color: #fff;
+  border-color: hsla(220, 21%, 31%, 1);
+}
+
+.share-button--facebook.share-button--painted .share-button__counter::before {
+  background-color: hsla(221, 44%, 41%, 1);
+}

src/style/facebookMessengerButton.css

@@ -0,0 +1,51 @@
+/* Facebook */
+.share-button--facebook {
+  background-color: hsla(221, 44%, 41%, 1);
+}
+
+.share-button--facebook:focus {
+  box-shadow: 0 0 0 3px hsla(221, 38%, 66%, 0.4);
+}
+
+.share-button--facebook:hover {
+  background-color: hsla(221, 44%, 41%, 0.9);
+}
+
+.share-button--facebook .share-button__icon path {
+  fill: #fff;
+}
+
+.share-button--facebook.share-button--outline {
+  background-color: transparent;
+  border-color: hsl(221, 44%, 41%, 1);
+}
+
+.share-button--facebook.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(221, 44%, 41%, 0.9);
+}
+
+.share-button--facebook.share-button--outline .share-button__text {
+  color: hsla(221, 44%, 41%, 1);
+}
+
+.share-button--facebook.share-button--outline:hover .share-button__text {
+  color: hsla(221, 44%, 41%, 0.9);
+}
+
+.share-button--facebook.share-button--outline .share-button__icon path {
+  fill: hsla(221, 44%, 41%, 1);
+}
+
+.share-button--facebook.share-button--outline:hover .share-button__icon path {
+  fill: hsla(221, 44%, 41%, 0.9);
+}
+
+.share-button--facebook.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(220, 21%, 31%, 1);
+}
+
+.share-button--facebook.share-button--painted::before {
+  background-color: hsla(221, 44%, 41%, 1);
+}

src/style/hatenaButton.css

@@ -0,0 +1,51 @@
+/* Hatena */
+.share-button--hatena {
+  background-color: hsla(196, 100%, 44%, 1);
+}
+
+.share-button--hatena:focus {
+  box-shadow: 0 0 0 3px hsla(196, 94%, 69%, 0.4);
+}
+
+.share-button--hatena:hover {
+  background-color: hsla(196, 100%, 44%, 0.9);
+}
+
+.share-button--hatena .share-button__icon path {
+  fill: #fff;
+}
+
+.share-button--hatena.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(196, 100%, 44%, 1);
+}
+
+.share-button--hatena.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(196, 100%, 44%, 0.9);
+}
+
+.share-button--hatena.share-button--outline .share-button__text {
+  color: hsla(196, 100%, 44%, 1);
+}
+
+.share-button--hatena.share-button--outline:hover .share-button__text {
+  color: hsla(196, 100%, 44%, 0.9);
+}
+
+.share-button--hatena.share-button--outline .share-button__icon path {
+  fill: hsla(196, 100%, 44%, 1);
+}
+
+.share-button--hatena.share-button--outline:hover .share-button__icon path {
+  fill: hsla(196, 100%, 44%, 0.9);
+}
+
+.share-button--hatena.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(195, 77%, 34%, 1);
+}
+
+.share-button--hatena.share-button--painted::before {
+  background-color: hsla(196, 100%, 44%, 1);
+}

src/style/index.css

@@ -5,8 +5,9 @@
 
 .share-button {
   display: inline-block;
+  min-width: 42px;
   min-height: 42px;
-  padding: 10px 12px;
+  padding: 10px 8px;
   margin: 4px;
   color: #fff;
   background-color: #fff;
@@ -47,23 +48,32 @@
 
 .share-button__icon {
   display: inline-block;
-  margin: 0 7px;
+  padding: 0 7px;
-  padding: 0;
+  margin: 0;
   font-size: 0;
   vertical-align: middle;
 }
 
 .share-button__icon:last-child {
-  margin: 0;
+  padding: 0;
 }
 
 .share-button__text {
   display: inline-block;
-  margin: 0 7px;
+  padding: 0 7px;
   font-size: 16px;
   vertical-align: middle;
 }
 
+.share-button__counter {
+  display: inline-block;
+  padding: 3px 10px;
+  margin-left: 4px;
+  font-size: 12px;
+  border-left: 1px solid #fff;
+  vertical-align: middle;
+}
+
 /* Circle */
 .share-button--circle {
   min-width: 42px;
@@ -72,8 +82,109 @@
   border-radius: 42px;
 }
 
-/* Circle */
+/* Outline */
 .share-button--outline {
   background-color: transparent;
   border: 1px solid;
 }
+
+/* Painted */
+.share-button--painted {
+  position: relative;
+  min-width: 42px;
+  min-height: 42px;
+  padding: 15px;
+  margin-bottom: 30px;
+  border-radius: 42px;
+  background-color: transparent;
+  border: 3px solid;
+}
+
+.share-button--painted::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.5px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  background-color: #000;
+  border-radius: 50%;
+  transform: translate3d(3px, 2px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+
+.share-button--painted:hover::before {
+  transform: translate3d(0, 0, 0);
+}
+
+.share-button--painted:focus::before {
+  transform: translate3d(0, 0, 0);
+}
+
+.share-button--painted .share-button__icon {
+  width: 30px;
+  height: 30px;
+  padding: 0;
+}
+
+.share-button--painted .share-button__text {
+  display: none;
+}
+
+.share-button--painted .share-button__counter {
+  position: absolute;
+  bottom: -30px;
+  right: -7px;
+  margin: 0;
+  padding: 4px 10px;
+  border: 3px solid;
+  font-size: 8px;
+  border-radius: 15px;
+}
+
+.share-button--painted .share-button__counter::before {
+  content: "";
+  z-index: -1;
+  position: absolute;
+  top: -1.65px;
+  left: -1.5px;
+  display: block;
+  width: calc(100% + 3px);
+  height: calc(100% + 3px);
+  border-radius: 15px;
+  transform: translate3d(-3px, 1.5px, 0);
+  transition: transform 0.2s ease-in-out;
+}
+
+@media (max-width: 768px) {
+  .share-button {
+    min-width: 38px;
+    min-height: 38px;
+    padding: 8px 8px;
+    margin: 2px;
+  }
+
+  .share-button__icon {
+    width: 18px;
+    height: 18px;
+    padding: 0 4px;
+  }
+
+  .share-button__text {
+    padding: 0 4px;
+    font-size: 14px;
+  }
+
+  /* Circle */
+  .share-button--circle {
+    border-radius: 38px;
+  }
+
+  /* Painted */
+  .share-button--painted .share-button__icon {
+    width: 16px;
+    height: 16px;
+  }
+}

src/style/instapaperButton.css

@@ -0,0 +1,51 @@
+/* Instapaper */
+.share-button--instapaper {
+  background-color: hsla(0, 0%, 12%, 1);
+}
+
+.share-button--instapaper:focus {
+  box-shadow: 0 0 0 3px hsla(0, 0%, 37%, 0.4);
+}
+
+.share-button--instapaper:hover {
+  background-color: hsla(0, 0%, 12%, 0.9);
+}
+
+.share-button--instapaper .share-button__icon path {
+  fill: #fff;
+}
+
+.share-button--instapaper.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(0, 0%, 12%, 1);
+}
+
+.share-button--instapaper.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(0, 0%, 12%, 0.9);
+}
+
+.share-button--instapaper.share-button--outline .share-button__text {
+  color: hsla(0, 0%, 12%, 1);
+}
+
+.share-button--instapaper.share-button--outline:hover .share-button__text {
+  color: hsla(0, 0%, 12%, 0.9);
+}
+
+.share-button--instapaper.share-button--outline .share-button__icon path {
+  fill: hsla(0, 0%, 12%, 1);
+}
+
+.share-button--instapaper.share-button--outline:hover .share-button__icon path {
+  fill: hsla(0, 0%, 12%, 0.9);
+}
+
+.share-button--instapaper.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(0, 0%, 0%, 1);
+}
+
+.share-button--instapaper.share-button--painted::before {
+  background-color: hsla(0, 0%, 12%, 1);
+}

src/style/linkedInButton.css

@@ -40,3 +40,26 @@
 .share-button--linkedIn.share-button--outline:hover .share-button__icon path {
   fill: hsla(201, 100%, 35%, 0.9);
 }
+
+.share-button--linkedIn.share-button--outline .share-button__counter {
+  color: hsla(201, 100%, 35%, 0.9);
+  border-color: hsla(201, 100%, 35%, 0.9);
+}
+
+.share-button--linkedIn.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(200, 77%, 25%, 1);
+}
+
+.share-button--linkedIn.share-button--painted::before {
+  background-color: hsla(201, 100%, 35%, 1);
+}
+
+.share-button--linkedIn.share-button--painted .share-button__counter {
+  color: #fff;
+  border-color: hsla(200, 77%, 25%, 1);
+}
+
+.share-button--linkedIn.share-button--painted .share-button__counter::before {
+  background-color: hsla(201, 100%, 35%, 1);
+}

src/style/livejournalButton.css

@@ -42,3 +42,12 @@
   path {
   fill: hsla(195, 100%, 46%, 0.9);
 }
+
+.share-button--livejournal.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(194, 77%, 36%, 1);
+}
+
+.share-button--livejournal.share-button--painted::before {
+  background-color: hsla(195, 100%, 46%, 1);
+}

src/style/odnoklassnikiButton.css

@@ -42,3 +42,27 @@
   path {
   fill: hsla(24, 91%, 53%, 0.9);
 }
+
+.share-button--odnoklassniki.share-button--outline .share-button__counter {
+  color: hsla(24, 91%, 53%, 0.9);
+  border-color: hsla(24, 91%, 53%, 0.9);
+}
+
+.share-button--odnoklassniki.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(23, 68%, 43%, 1);
+}
+
+.share-button--odnoklassniki.share-button--painted::before {
+  background-color: hsla(24, 91%, 53%, 1);
+}
+
+.share-button--odnoklassniki.share-button--painted .share-button__counter {
+  color: #fff;
+  border-color: hsla(23, 68%, 43%, 1);
+}
+
+.share-button--odnoklassniki.share-button--painted
+  .share-button__counter::before {
+  background-color: hsla(24, 91%, 53%, 1);
+}

src/style/pinterestButton.css

@@ -40,3 +40,26 @@
 .share-button--pinterest.share-button--outline:hover .share-button__icon path {
   fill: hsla(353, 92%, 39%, 0.9);
 }
+
+.share-button--pinterest.share-button--outline .share-button__counter {
+  color: hsla(353, 92%, 39%, 0.9);
+  border-color: hsla(353, 92%, 39%, 0.9);
+}
+
+.share-button--pinterest.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(352, 69%, 29%, 1);
+}
+
+.share-button--pinterest.share-button--painted::before {
+  background-color: hsla(353, 92%, 39%, 1);
+}
+
+.share-button--pinterest.share-button--painted .share-button__counter {
+  color: #fff;
+  border-color: hsla(352, 69%, 29%, 1);
+}
+
+.share-button--pinterest.share-button--painted .share-button__counter::before {
+  background-color: hsla(353, 92%, 39%, 1);
+}

src/style/pocketButton.css

@@ -40,3 +40,12 @@
 .share-button--pocket.share-button--outline:hover .share-button__icon path {
   fill: hsla(352, 85%, 59%, 0.9);
 }
+
+.share-button--pocket.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(351, 62%, 49%, 1);
+}
+
+.share-button--pocket.share-button--painted::before {
+  background-color: hsla(352, 85%, 59%, 1);
+}

src/style/redditButton.css

@@ -40,3 +40,12 @@
 .share-button--reddit.share-button--outline:hover .share-button__icon path {
   fill: hsla(16, 100%, 50%, 0.9);
 }
+
+.share-button--reddit.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(15, 77%, 40%, 1);
+}
+
+.share-button--reddit.share-button--painted::before {
+  background-color: hsla(16, 100%, 50%, 1);
+}

src/style/renrenButton.css

@@ -40,3 +40,12 @@
 .share-button--renren.share-button--outline:hover .share-button__icon path {
   fill: hsla(207, 71%, 45%, 0.9);
 }
+
+.share-button--renren.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(206, 48%, 35%, 1);
+}
+
+.share-button--renren.share-button--painted::before {
+  background-color: hsla(207, 71%, 45%, 1);
+}

src/style/telegramButton.css

@@ -0,0 +1,51 @@
+/* Telegram */
+.share-button--telegram {
+  background-color: hsla(200, 74%, 53%, 1);
+}
+
+.share-button--telegram:focus {
+  box-shadow: 0 0 0 3px hsla(200, 68%, 78%, 0.4);
+}
+
+.share-button--telegram:hover {
+  background-color: hsla(200, 74%, 53%, 0.9);
+}
+
+.share-button--telegram .share-button__icon path {
+  fill: #fff;
+}
+
+.share-button--telegram.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(200, 74%, 53%, 1);
+}
+
+.share-button--telegram.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(200, 74%, 53%, 0.9);
+}
+
+.share-button--telegram.share-button--outline .share-button__text {
+  color: hsla(200, 74%, 53%, 1);
+}
+
+.share-button--telegram.share-button--outline:hover .share-button__text {
+  color: hsla(200, 74%, 53%, 0.9);
+}
+
+.share-button--telegram.share-button--outline .share-button__icon path {
+  fill: hsla(200, 74%, 53%, 1);
+}
+
+.share-button--telegram.share-button--outline:hover .share-button__icon path {
+  fill: hsla(200, 74%, 53%, 0.9);
+}
+
+.share-button--telegram.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(199, 51%, 43%, 1);
+}
+
+.share-button--telegram.share-button--painted::before {
+  background-color: hsla(200, 74%, 53%, 1);
+}

src/style/tumblrButton.css

@@ -40,3 +40,26 @@
 .share-button--tumblr.share-button--outline:hover .share-button__icon path {
   fill: hsla(215, 27%, 29%, 0.9);
 }
+
+.share-button--tumblr.share-button--outline .share-button__counter {
+  color: hsla(215, 27%, 29%, 0.9);
+  border-color: hsla(215, 27%, 29%, 0.9);
+}
+
+.share-button--tumblr.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(214, 4%, 19%, 1);
+}
+
+.share-button--tumblr.share-button--painted::before {
+  background-color: hsla(215, 27%, 29%, 1);
+}
+
+.share-button--tumblr.share-button--painted .share-button__counter {
+  color: #fff;
+  border-color: hsla(214, 4%, 19%, 1);
+}
+
+.share-button--tumblr.share-button--painted .share-button__counter::before {
+  background-color: hsla(215, 27%, 29%, 1);
+}

src/style/twitterButton.css

@@ -40,3 +40,26 @@
 .share-button--twitter.share-button--outline:hover .share-button__icon path {
   fill: hsla(203, 89%, 53%, 0.9);
 }
+
+.share-button--twitter.share-button--outline .share-button__counter {
+  color: hsla(203, 89%, 53%, 0.9);
+  border-color: hsla(203, 89%, 53%, 0.9);
+}
+
+.share-button--twitter.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(202, 66%, 43%, 1);
+}
+
+.share-button--twitter.share-button--painted::before {
+  background-color: hsla(203, 89%, 53%, 1);
+}
+
+.share-button--twitter.share-button--painted .share-button__counter {
+  color: #fff;
+  border-color: hsla(202, 66%, 43%, 1);
+}
+
+.share-button--twitter.share-button--painted .share-button__counter::before {
+  background-color: hsla(203, 89%, 53%, 1);
+}

src/style/viberButton.css

@@ -0,0 +1,51 @@
+/* Viber */
+.share-button--viber {
+  background-color: hsla(248, 33%, 52%, 1);
+}
+
+.share-button--viber:focus {
+  box-shadow: 0 0 0 3px hsla(248, 27%, 77%, 0.4);
+}
+
+.share-button--viber:hover {
+  background-color: hsla(248, 33%, 52%, 0.9);
+}
+
+.share-button--viber .share-button__icon path {
+  fill: #fff;
+}
+
+.share-button--viber.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(248, 33%, 52%, 1);
+}
+
+.share-button--viber.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(248, 33%, 52%, 0.9);
+}
+
+.share-button--viber.share-button--outline .share-button__text {
+  color: hsla(248, 33%, 52%, 1);
+}
+
+.share-button--viber.share-button--outline:hover .share-button__text {
+  color: hsla(248, 33%, 52%, 0.9);
+}
+
+.share-button--viber.share-button--outline .share-button__icon path {
+  fill: hsla(248, 33%, 52%, 1);
+}
+
+.share-button--viber.share-button--outline:hover .share-button__icon path {
+  fill: hsla(248, 33%, 52%, 0.9);
+}
+
+.share-button--viber.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(247, 10%, 42%, 1);
+}
+
+.share-button--viber.share-button--painted::before {
+  background-color: hsla(248, 33%, 52%, 1);
+}

src/style/vkontakteButton.css

@@ -40,3 +40,26 @@
 .share-button--vk.share-button--outline:hover .share-button__icon path {
   fill: hsla(212, 28%, 52%, 0.9);
 }
+
+.share-button--vk.share-button--outline .share-button__counter {
+  color: hsla(212, 28%, 52%, 0.9);
+  border-color: hsla(212, 28%, 52%, 0.9);
+}
+
+.share-button--vk.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(211, 5%, 42%, 1);
+}
+
+.share-button--vk.share-button--painted::before {
+  background-color: hsla(212, 28%, 52%, 1);
+}
+
+.share-button--vk.share-button--painted .share-button__counter {
+  color: #fff;
+  border-color: hsla(211, 5%, 42%, 1);
+}
+
+.share-button--vk.share-button--painted .share-button__counter::before {
+  background-color: hsla(212, 28%, 52%, 1);
+}

src/style/weiboButton.css

@@ -40,3 +40,12 @@
 .share-button--weibo.share-button--outline:hover .share-button__icon path {
   fill: hsla(353, 83%, 49%, 0.9);
 }
+
+.share-button--weibo.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(352, 60%, 39%, 1);
+}
+
+.share-button--weibo.share-button--painted::before {
+  background-color: hsla(353, 83%, 49%, 1);
+}

src/style/whatsAppButton.css

@@ -0,0 +1,51 @@
+/* WhatsApp */
+.share-button--whatsApp {
+  background-color: hsla(142, 70%, 49%, 1);
+}
+
+.share-button--whatsApp:focus {
+  box-shadow: 0 0 0 3px hsla(142, 64%, 74%, 0.4);
+}
+
+.share-button--whatsApp:hover {
+  background-color: hsla(142, 70%, 49%, 0.9);
+}
+
+.share-button--whatsApp .share-button__icon path {
+  fill: #fff;
+}
+
+.share-button--whatsApp.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(142, 70%, 49%, 1);
+}
+
+.share-button--whatsApp.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(142, 70%, 49%, 0.9);
+}
+
+.share-button--whatsApp.share-button--outline .share-button__text {
+  color: hsla(142, 70%, 49%, 1);
+}
+
+.share-button--whatsApp.share-button--outline:hover .share-button__text {
+  color: hsla(142, 70%, 49%, 0.9);
+}
+
+.share-button--whatsApp.share-button--outline .share-button__icon path {
+  fill: hsla(142, 70%, 49%, 1);
+}
+
+.share-button--whatsApp.share-button--outline:hover .share-button__icon path {
+  fill: hsla(142, 70%, 49%, 0.9);
+}
+
+.share-button--whatsApp.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(141, 47%, 39%, 1);
+}
+
+.share-button--whatsApp.share-button--painted::before {
+  background-color: hsla(142, 70%, 49%, 1);
+}

src/style/xingButton.css

@@ -40,3 +40,12 @@
 .share-button--xing.share-button--outline:hover .share-button__icon path {
   fill: hsla(181, 100%, 20%, 0.9);
 }
+
+.share-button--xing.share-button--painted {
+  background-color: transparent;
+  border-color: hsla(180, 77%, 10%, 1);
+}
+
+.share-button--xing.share-button--painted::before {
+  background-color: hsla(181, 100%, 20%, 1);
+}