From fe941306077cd1c116110c72ecf1e3a1db8fd279 Mon Sep 17 00:00:00 2001
From: Alexandrshy <alexandrshy@gmail.com>
Date: Wed, 20 Mar 2019 07:56:08 +0400
Subject: [PATCH] Added new share button: blogger, digg, livejournal, renren,
 vk, weibo

---
 src/App.vue                          | 146 ++++++++++++++++++++++++++-
 src/components/BloggerButton.vue     |  71 +++++++++++++
 src/components/DiggButton.vue        |  69 +++++++++++++
 src/components/LiveJournalButton.vue |  69 +++++++++++++
 src/components/RenrenButton.vue      |  72 +++++++++++++
 src/components/TwitterButton.vue     |  20 ++--
 src/components/VkontakteButton.vue   |  72 +++++++++++++
 src/components/WeiboButton.vue       |  71 +++++++++++++
 src/components/index.js              |   0
 src/helpers/documentData.js          |   2 +
 src/style/bloggerButton.css          |  43 ++++++++
 src/style/diggButton.css             |  43 ++++++++
 src/style/livejournalButton.css      |  45 +++++++++
 src/style/renrenButton.css           |  43 ++++++++
 src/style/twitterButton.css          |   2 +-
 src/style/vkontakteButton.css        |  43 ++++++++
 src/style/weiboButton.css            |  43 ++++++++
 17 files changed, 846 insertions(+), 8 deletions(-)
 create mode 100644 src/components/BloggerButton.vue
 create mode 100644 src/components/DiggButton.vue
 create mode 100644 src/components/LiveJournalButton.vue
 create mode 100644 src/components/RenrenButton.vue
 create mode 100644 src/components/VkontakteButton.vue
 create mode 100644 src/components/WeiboButton.vue
 delete mode 100644 src/components/index.js
 create mode 100644 src/style/bloggerButton.css
 create mode 100644 src/style/diggButton.css
 create mode 100644 src/style/livejournalButton.css
 create mode 100644 src/style/renrenButton.css
 create mode 100644 src/style/vkontakteButton.css
 create mode 100644 src/style/weiboButton.css

diff --git a/src/App.vue b/src/App.vue
index 4f36d64..1d89fbd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -6,19 +6,163 @@
     <twitter-button class="share-button--circle"></twitter-button>
     <twitter-button class="share-button--circle" btnText></twitter-button>
     <twitter-button class="share-button--circle" v-bind:hasIcon="false"></twitter-button>
+    <twitter-button class="share-button--outline"></twitter-button>
+    <twitter-button
+      class="share-button--outline"
+      v-bind:isBlank="false"
+      shareText="Twiiter share good work"
+      btnText
+    ></twitter-button>
+    <twitter-button class="share-button--outline" v-bind:hasIcon="false"></twitter-button>
     <twitter-button class="share-button--circle share-button--outline"></twitter-button>
     <twitter-button class="share-button--circle share-button--outline" btnText></twitter-button>
     <twitter-button class="share-button--circle share-button--outline" v-bind:hasIcon="false"></twitter-button>
+    <br>
+    <liveJournal-button></liveJournal-button>
+    <liveJournal-button v-bind:isBlank="false" shareText="Twiiter share good work" btnText></liveJournal-button>
+    <liveJournal-button v-bind:hasIcon="false"></liveJournal-button>
+    <liveJournal-button class="share-button--circle"></liveJournal-button>
+    <liveJournal-button class="share-button--circle" btnText></liveJournal-button>
+    <liveJournal-button class="share-button--circle" v-bind:hasIcon="false"></liveJournal-button>
+    <liveJournal-button class="share-button--outline"></liveJournal-button>
+    <liveJournal-button
+      class="share-button--outline"
+      v-bind:isBlank="false"
+      shareText="Twiiter share good work"
+      btnText
+    ></liveJournal-button>
+    <liveJournal-button class="share-button--outline" v-bind:hasIcon="false"></liveJournal-button>
+    <liveJournal-button class="share-button--circle share-button--outline"></liveJournal-button>
+    <liveJournal-button class="share-button--circle share-button--outline" btnText></liveJournal-button>
+    <liveJournal-button class="share-button--circle share-button--outline" v-bind:hasIcon="false"></liveJournal-button>
+    <br>
+    <digg-button></digg-button>
+    <digg-button v-bind:isBlank="false" shareText="Twiiter share good work" btnText></digg-button>
+    <digg-button v-bind:hasIcon="false"></digg-button>
+    <digg-button class="share-button--circle"></digg-button>
+    <digg-button class="share-button--circle" btnText></digg-button>
+    <digg-button class="share-button--circle" v-bind:hasIcon="false"></digg-button>
+    <digg-button class="share-button--outline"></digg-button>
+    <digg-button
+      class="share-button--outline"
+      v-bind:isBlank="false"
+      shareText="Twiiter share good work"
+      btnText
+    ></digg-button>
+    <digg-button class="share-button--outline" v-bind:hasIcon="false"></digg-button>
+    <digg-button class="share-button--circle share-button--outline"></digg-button>
+    <digg-button class="share-button--circle share-button--outline" btnText></digg-button>
+    <digg-button class="share-button--circle share-button--outline" v-bind:hasIcon="false"></digg-button>
+    <br>
+    <renren-button></renren-button>
+    <renren-button v-bind:isBlank="false" shareText="Twiiter share good work" btnText></renren-button>
+    <renren-button v-bind:hasIcon="false"></renren-button>
+    <renren-button class="share-button--circle"></renren-button>
+    <renren-button class="share-button--circle" btnText></renren-button>
+    <renren-button class="share-button--circle" v-bind:hasIcon="false"></renren-button>
+    <renren-button class="share-button--outline"></renren-button>
+    <renren-button
+      class="share-button--outline"
+      v-bind:isBlank="false"
+      shareText="Twiiter share good work"
+      btnText
+    ></renren-button>
+    <renren-button class="share-button--outline" v-bind:hasIcon="false"></renren-button>
+    <renren-button class="share-button--circle share-button--outline"></renren-button>
+    <renren-button class="share-button--circle share-button--outline" btnText></renren-button>
+    <renren-button class="share-button--circle share-button--outline" v-bind:hasIcon="false"></renren-button>
+    <br>
+    <blogger-button></blogger-button>
+    <blogger-button v-bind:isBlank="false" shareText="Twiiter share good work" btnText></blogger-button>
+    <blogger-button v-bind:hasIcon="false"></blogger-button>
+    <blogger-button class="share-button--circle"></blogger-button>
+    <blogger-button class="share-button--circle" btnText></blogger-button>
+    <blogger-button class="share-button--circle" v-bind:hasIcon="false"></blogger-button>
+    <blogger-button class="share-button--outline"></blogger-button>
+    <blogger-button
+      class="share-button--outline"
+      v-bind:isBlank="false"
+      shareText="Twiiter share good work"
+      btnText
+    ></blogger-button>
+    <blogger-button class="share-button--outline" v-bind:hasIcon="false"></blogger-button>
+    <blogger-button class="share-button--circle share-button--outline"></blogger-button>
+    <blogger-button class="share-button--circle share-button--outline" btnText></blogger-button>
+    <blogger-button class="share-button--circle share-button--outline" v-bind:hasIcon="false"></blogger-button>
+    <br>
+    <weibo-button></weibo-button>
+    <weibo-button v-bind:isBlank="false" shareText="Twiiter share good work" btnText></weibo-button>
+    <weibo-button v-bind:hasIcon="false"></weibo-button>
+    <weibo-button class="share-button--circle"></weibo-button>
+    <weibo-button class="share-button--circle" btnText></weibo-button>
+    <weibo-button class="share-button--circle" v-bind:hasIcon="false"></weibo-button>
+    <weibo-button class="share-button--outline"></weibo-button>
+    <weibo-button
+      class="share-button--outline"
+      v-bind:isBlank="false"
+      shareText="Twiiter share good work"
+      btnText
+    ></weibo-button>
+    <weibo-button class="share-button--outline" v-bind:hasIcon="false"></weibo-button>
+    <weibo-button class="share-button--circle share-button--outline"></weibo-button>
+    <weibo-button class="share-button--circle share-button--outline" btnText></weibo-button>
+    <weibo-button class="share-button--circle share-button--outline" v-bind:hasIcon="false"></weibo-button>
+    <br>
+
+    <vkontakte-button shareTitle="Comment"></vkontakte-button>
+    <vkontakte-button
+      v-bind:isBlank="false"
+      shareText="Twiiter share good work"
+      shareTitle="Comment"
+      btnText
+    ></vkontakte-button>
+    <vkontakte-button v-bind:hasIcon="false" shareTitle="Comment"></vkontakte-button>
+    <vkontakte-button class="share-button--circle" shareTitle="Comment"></vkontakte-button>
+    <vkontakte-button class="share-button--circle" shareTitle="Comment" btnText></vkontakte-button>
+    <vkontakte-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></vkontakte-button>
+    <vkontakte-button class="share-button--outline" shareTitle="Comment"></vkontakte-button>
+    <vkontakte-button
+      class="share-button--outline"
+      v-bind:isBlank="false"
+      shareText="Twiiter share good work"
+      shareTitle="Comment"
+      btnText
+    ></vkontakte-button>
+    <vkontakte-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></vkontakte-button>
+    <vkontakte-button class="share-button--circle share-button--outline" shareTitle="Comment"></vkontakte-button>
+    <vkontakte-button
+      class="share-button--circle share-button--outline"
+      shareTitle="Comment"
+      btnText
+    ></vkontakte-button>
+    <vkontakte-button
+      class="share-button--circle share-button--outline"
+      shareTitle="Comment"
+      v-bind:hasIcon="false"
+    ></vkontakte-button>
+    <br>
   </div>
 </template>
 
 <script>
 import TwitterButton from "./components/TwitterButton";
+import LiveJournalButton from "./components/LiveJournalButton";
+import BloggerButton from "./components/BloggerButton";
+import DiggButton from "./components/DiggButton";
+import RenrenButton from "./components/RenrenButton";
+import WeiboButton from "./components/WeiboButton";
+import VkontakteButton from "./components/VkontakteButton";
 
 export default {
   name: "app-share-buttons",
   components: {
-    TwitterButton
+    TwitterButton,
+    LiveJournalButton,
+    BloggerButton,
+    DiggButton,
+    RenrenButton,
+    WeiboButton,
+    VkontakteButton
   }
 };
 </script>
diff --git a/src/components/BloggerButton.vue b/src/components/BloggerButton.vue
new file mode 100644
index 0000000..572e286
--- /dev/null
+++ b/src/components/BloggerButton.vue
@@ -0,0 +1,71 @@
+<template>
+  <button
+    class="share-button share-button--blogger"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareText="shareText"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Blogger" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M18.09 14.696c-1.512.664-2.726 1.885-3.381 3.399l4.27.883-.886-4.282h-.003zM2.475 8.317L0 5.85C1.125 3.237 3.216 1.14 5.823 0h.006l2.469 2.463c1.368-.591 2.876-.921 4.463-.921C18.967 1.542 24 6.569 24 12.771 24 18.973 18.967 24 12.761 24 6.551 24 1.52 18.976 1.52 12.771c0-1.591.355-3.081.952-4.451l9.143 9.114c1.125-2.613 3.218-4.71 5.823-5.85l-9.135-9.12h-.008c-2.606 1.14-4.695 3.24-5.823 5.85l.003.003z"
+      />
+    </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: "BloggerShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String },
+    shareText: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Blogger" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow: function() {
+      eventEmit(this, { name: "Blogger" });
+      const configWindow = createWindow();
+      const url = `https://www.blogger.com/blog-this.g?u=${
+        this.$props.shareUrl
+      }&n=${encodeURIComponent(this.$props.shareTitle)}&t=${encodeURIComponent(
+        this.$props.shareText
+      )}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/bloggerButton.css";
+</style>
diff --git a/src/components/DiggButton.vue b/src/components/DiggButton.vue
new file mode 100644
index 0000000..cbd1b02
--- /dev/null
+++ b/src/components/DiggButton.vue
@@ -0,0 +1,69 @@
+<template>
+  <button
+    class="share-button share-button--digg"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareText="shareText"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Digg" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M17.76 8.16v8.16h3.84v.96h-3.84v1.92H24V8.16h-6.24zm-7.2 0v8.16h3.84v.96h-3.84v1.92h6.24V8.16h-6.24zM3.84 4.8v3.36H0v8.16h6.24V4.8h-2.4zM9.6 8.16H7.2v8.16h2.4V8.16zm12 6.24h-1.44v-4.32h1.44v4.32zm-17.76 0H2.4v-4.32h1.44v4.32zm10.56 0h-1.44v-4.32h1.44v4.32zM9.6 4.8H7.2v2.4h2.4V4.8z"
+      />
+    </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: "DiggShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String },
+    shareText: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Digg" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow: function() {
+      eventEmit(this, { name: "Digg" });
+      const configWindow = createWindow();
+      const url = `http://digg.com/submit?url=${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/diggButton.css";
+</style>
diff --git a/src/components/LiveJournalButton.vue b/src/components/LiveJournalButton.vue
new file mode 100644
index 0000000..c4e7233
--- /dev/null
+++ b/src/components/LiveJournalButton.vue
@@ -0,0 +1,69 @@
+<template>
+  <button
+    class="share-button share-button--livejournal"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareText="shareText"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="LiveJournal" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M18.09 14.696c-1.512.664-2.726 1.885-3.381 3.399l4.27.883-.886-4.282h-.003zM2.475 8.317L0 5.85C1.125 3.237 3.216 1.14 5.823 0h.006l2.469 2.463c1.368-.591 2.876-.921 4.463-.921C18.967 1.542 24 6.569 24 12.771 24 18.973 18.967 24 12.761 24 6.551 24 1.52 18.976 1.52 12.771c0-1.591.355-3.081.952-4.451l9.143 9.114c1.125-2.613 3.218-4.71 5.823-5.85l-9.135-9.12h-.008c-2.606 1.14-4.695 3.24-5.823 5.85l.003.003z"
+      />
+    </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: "LiveJournalShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String },
+    shareText: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "LiveJournal" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow: function() {
+      eventEmit(this, { name: "LiveJournal" });
+      const configWindow = createWindow();
+      const url = `https://livejournal.com/update.bml?event=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&subject=${encodeURIComponent(this.$props.shareText)}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/livejournalButton.css";
+</style>
diff --git a/src/components/RenrenButton.vue b/src/components/RenrenButton.vue
new file mode 100644
index 0000000..f56f434
--- /dev/null
+++ b/src/components/RenrenButton.vue
@@ -0,0 +1,72 @@
+<template>
+  <button
+    class="share-button share-button--renren"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareText="shareText"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Renren" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M5.661 9.601V5.303a6.793 6.793 0 0 0-4.053 11.084c2.378-1.152 4.041-3.755 4.053-6.786zM6.793 13.715c-.423 1.752-1.687 3.249-3.262 4.244a6.759 6.759 0 0 0 3.261.833 6.771 6.771 0 0 0 3.262-.833c-1.575-.995-2.838-2.493-3.261-4.244zM11.977 7.613a6.789 6.789 0 0 0-4.052-2.31v4.265c0 3.044 1.666 5.662 4.051 6.817a6.766 6.766 0 0 1-1.607-4.386 6.754 6.754 0 0 1 1.608-4.386z"
+      />
+      <path
+        d="M11.977 7.613c1.003 1.183 1.655 2.714 1.655 4.387s-.652 3.202-1.655 4.387l-.001-.001.001.001c2.378-1.151 4.087-3.755 4.099-6.786V5.303a6.9 6.9 0 0 0-4.099 2.31zM18.34 9.568c0 3.045 1.666 5.662 4.052 6.818A6.792 6.792 0 0 0 18.34 5.304v4.264zM17.208 13.715c-.423 1.752-1.687 3.249-3.262 4.244a6.759 6.759 0 0 0 3.261.833 6.771 6.771 0 0 0 3.262-.833c-1.574-.995-2.838-2.493-3.261-4.244z"
+      />
+    </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: "RenrenShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String },
+    shareText: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Renren" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow: function() {
+      eventEmit(this, { name: "Renren" });
+      const configWindow = createWindow();
+      const url = `http://share.renren.com/share/buttonshare.do?link=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&title=${encodeURIComponent(this.$props.shareText)}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/renrenButton.css";
+</style>
diff --git a/src/components/TwitterButton.vue b/src/components/TwitterButton.vue
index ea4509c..c94d40f 100644
--- a/src/components/TwitterButton.vue
+++ b/src/components/TwitterButton.vue
@@ -3,9 +3,13 @@
     class="share-button share-button--twitter"
     type="button"
     :class="className"
-    :pageUrl="pageUrl"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
     :shareText="shareText"
+    :sharePic="sharePic"
     :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -29,13 +33,17 @@ import {
 } from "../helpers";
 
 export default {
-  name: "twitter-button",
+  name: "TwitterShareButton",
   components: { Icon },
   props: {
     className: { type: String },
-    pageUrl: { type: String, deflate: getDocumentHref },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String },
     shareText: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Twitter" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
@@ -43,9 +51,9 @@ export default {
     openShareWindow: function() {
       eventEmit(this, { name: "Twitter" });
       const configWindow = createWindow();
-      const url = `https://twitter.com/share?url=${this.$props.pageUrl}&text=${
-        this.$props.shareText
-      }`;
+      const url = `https://twitter.com/share?url=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&text=${encodeURIComponent(this.$props.shareText)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
diff --git a/src/components/VkontakteButton.vue b/src/components/VkontakteButton.vue
new file mode 100644
index 0000000..5d71462
--- /dev/null
+++ b/src/components/VkontakteButton.vue
@@ -0,0 +1,72 @@
+<template>
+  <button
+    class="share-button share-button--vk"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareText="shareText"
+    :shareTitle="shareTitle"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="vk" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M11.701 18.771h1.437s.433-.047.654-.284c.21-.221.21-.63.21-.63s-.031-1.927.869-2.21c.887-.281 2.012 1.86 3.211 2.683.916.629 1.605.494 1.605.494l3.211-.044s1.682-.105.887-1.426c-.061-.105-.451-.975-2.371-2.76-2.012-1.861-1.742-1.561.676-4.787 1.469-1.965 2.07-3.166 1.875-3.676-.166-.48-1.26-.361-1.26-.361l-3.602.031s-.27-.031-.465.09c-.195.119-.314.391-.314.391s-.572 1.529-1.336 2.82c-1.623 2.729-2.268 2.879-2.523 2.699-.604-.391-.449-1.58-.449-2.432 0-2.641.404-3.75-.781-4.035-.39-.091-.681-.15-1.685-.166-1.29-.014-2.378.01-2.995.311-.405.203-.72.652-.539.675.24.03.779.146 1.064.537.375.506.359 1.636.359 1.636s.211 3.116-.494 3.503c-.495.262-1.155-.28-2.595-2.756-.735-1.26-1.291-2.67-1.291-2.67s-.105-.256-.299-.406c-.227-.165-.557-.225-.557-.225l-3.435.03s-.51.016-.689.24c-.166.195-.016.615-.016.615s2.686 6.287 5.732 9.453c2.79 2.902 5.956 2.715 5.956 2.715l-.05-.055z"
+      />
+    </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: "VkontakteShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String },
+    shareText: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Vkontakte" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow: function() {
+      eventEmit(this, { name: "vk" });
+      const configWindow = createWindow();
+      const url = `https://vk.com/share.php?url=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&title=${encodeURIComponent(
+        this.$props.shareTitle
+      )}&comment=${encodeURIComponent(
+        this.$props.shareText
+      )}&image=${encodeURIComponent(this.$props.sharePic)}&noparse=true`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/vkontakteButton.css";
+</style>
diff --git a/src/components/WeiboButton.vue b/src/components/WeiboButton.vue
new file mode 100644
index 0000000..7b64814
--- /dev/null
+++ b/src/components/WeiboButton.vue
@@ -0,0 +1,71 @@
+<template>
+  <button
+    class="share-button share-button--weibo"
+    type="button"
+    :class="className"
+    :shareUrl="shareUrl"
+    :shareTitle="shareTitle"
+    :shareText="shareText"
+    :sharePic="sharePic"
+    :btnText="btnText"
+    :windowWidth="windowWidth"
+    :windowHeight="windowHeight"
+    :hasIcon="hasIcon"
+    :isBlank="isBlank"
+    @click="openShareWindow"
+  >
+    <icon iconName="Weibo" class="share-button__icon" v-if="hasIcon === true">
+      <path
+        d="M10.098 20.323c-3.977.391-7.414-1.406-7.672-4.02-.259-2.609 2.759-5.047 6.74-5.441 3.979-.394 7.413 1.404 7.671 4.018.259 2.6-2.759 5.049-6.737 5.439l-.002.004zM9.05 17.219c-.384.616-1.208.884-1.829.602-.612-.279-.793-.991-.406-1.593.379-.595 1.176-.861 1.793-.601.622.263.82.972.442 1.592zm1.27-1.627c-.141.237-.449.353-.689.253-.236-.09-.313-.361-.177-.586.138-.227.436-.346.672-.24.239.09.315.36.18.601l.014-.028zm.176-2.719c-1.893-.493-4.033.45-4.857 2.118-.836 1.704-.026 3.591 1.886 4.21 1.983.64 4.318-.341 5.132-2.179.8-1.793-.201-3.642-2.161-4.149zm7.563-1.224c-.346-.105-.57-.18-.405-.615.375-.977.42-1.804 0-2.404-.781-1.112-2.915-1.053-5.364-.03 0 0-.766.331-.571-.271.376-1.217.315-2.224-.27-2.809-1.338-1.337-4.869.045-7.888 3.08C1.309 10.87 0 13.273 0 15.348c0 3.981 5.099 6.395 10.086 6.395 6.536 0 10.888-3.801 10.888-6.82 0-1.822-1.547-2.854-2.915-3.284v.01zm1.908-5.092c-.766-.856-1.908-1.187-2.96-.962-.436.09-.706.511-.616.932.09.42.511.691.932.602.511-.105 1.067.044 1.442.465.376.421.466.977.316 1.473-.136.406.089.856.51.992.405.119.857-.105.992-.512.33-1.021.12-2.178-.646-3.035l.03.045zm2.418-2.195c-1.576-1.757-3.905-2.419-6.054-1.968-.496.104-.812.587-.706 1.081.104.496.586.813 1.082.707 1.532-.331 3.185.15 4.296 1.383 1.112 1.246 1.429 2.943.947 4.416-.165.48.106 1.007.586 1.157.479.165.991-.104 1.157-.586.675-2.088.241-4.478-1.338-6.235l.03.045z"
+      />
+    </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: "WeiboShareButton",
+  components: { Icon },
+  props: {
+    className: { type: String },
+    shareUrl: { type: String, default: getDocumentHref },
+    shareTitle: { type: String },
+    shareText: { type: String, default: getDocumentTitle },
+    sharePic: { type: String, default: "" },
+    btnText: { type: String, default: "Weibo" },
+    windowWidth: { type: Number },
+    windowHeight: { type: Number },
+    hasIcon: { type: Boolean, default: true },
+    isBlank: { type: Boolean, default: true }
+  },
+  methods: {
+    openShareWindow: function() {
+      eventEmit(this, { name: "Weibo" });
+      const configWindow = createWindow();
+      const url = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(
+        this.$props.shareUrl
+      )}&title=${encodeURIComponent(
+        this.$props.shareText
+      )}&pic=${encodeURIComponent(this.$props.sharePic)}`;
+
+      return this.$props.isBlank
+        ? window.open(url, "__blank")
+        : window.open(url, "Share this", configWindow);
+    }
+  }
+};
+</script>
+
+<style>
+@import "../style/index.css";
+@import "../style/weiboButton.css";
+</style>
diff --git a/src/components/index.js b/src/components/index.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/helpers/documentData.js b/src/helpers/documentData.js
index 0741d4b..b34b0fa 100644
--- a/src/helpers/documentData.js
+++ b/src/helpers/documentData.js
@@ -7,5 +7,7 @@ export const getDocumentHref = () => document.location.href;
 
 /**
  * Get title for page.
+ *
+ * @returns {string} - Page title.
  */
 export const getDocumentTitle = () => document.title;
diff --git a/src/style/bloggerButton.css b/src/style/bloggerButton.css
new file mode 100644
index 0000000..cef3629
--- /dev/null
+++ b/src/style/bloggerButton.css
@@ -0,0 +1,43 @@
+/* blogger */
+.share-button--blogger {
+  background-color: hsla(195, 100%, 46%, 1);
+}
+
+.share-button--blogger:focus {
+  box-shadow: 0 0 0 3px hsla(195, 94%, 71%, 0.4);
+}
+
+.share-button--blogger:hover {
+  background-color: hsla(195, 100%, 46%, 0.9);
+}
+
+.share-button--blogger .share-button__icon path {
+  fill: #fff;
+}
+
+/* Circle */
+.share-button--blogger.share-button--outline {
+  background-color: transparent;
+  border-color: hsl(195, 100%, 46%, 1);
+}
+
+.share-button--blogger.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(195, 100%, 46%, 0.9);
+}
+
+.share-button--blogger.share-button--outline .share-button__text {
+  color: hsla(195, 100%, 46%, 1);
+}
+
+.share-button--blogger.share-button--outline:hover .share-button__text {
+  color: hsla(195, 100%, 46%, 0.9);
+}
+
+.share-button--blogger.share-button--outline .share-button__icon path {
+  fill: hsla(195, 100%, 46%, 1);
+}
+
+.share-button--blogger.share-button--outline:hover .share-button__icon path {
+  fill: hsla(195, 100%, 46%, 0.9);
+}
diff --git a/src/style/diggButton.css b/src/style/diggButton.css
new file mode 100644
index 0000000..feb88fa
--- /dev/null
+++ b/src/style/diggButton.css
@@ -0,0 +1,43 @@
+/* digg */
+.share-button--digg {
+  background-color: hsla(0, 0%, 0%, 1);
+}
+
+.share-button--digg:focus {
+  box-shadow: 0 0 0 3px hsla(0, 0%, 25%, 0.4);
+}
+
+.share-button--digg:hover {
+  background-color: hsla(0, 0%, 0%, 0.9);
+}
+
+.share-button--digg .share-button__icon path {
+  fill: #fff;
+}
+
+/* Circle */
+.share-button--digg.share-button--outline {
+  background-color: transparent;
+  border-color: hsl(0, 0%, 0%, 1);
+}
+
+.share-button--digg.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(0, 0%, 0%, 0.9);
+}
+
+.share-button--digg.share-button--outline .share-button__text {
+  color: hsla(0, 0%, 0%, 1);
+}
+
+.share-button--digg.share-button--outline:hover .share-button__text {
+  color: hsla(0, 0%, 0%, 0.9);
+}
+
+.share-button--digg.share-button--outline .share-button__icon path {
+  fill: hsla(0, 0%, 0%, 1);
+}
+
+.share-button--digg.share-button--outline:hover .share-button__icon path {
+  fill: hsla(0, 0%, 0%, 0.9);
+}
diff --git a/src/style/livejournalButton.css b/src/style/livejournalButton.css
new file mode 100644
index 0000000..6e9646f
--- /dev/null
+++ b/src/style/livejournalButton.css
@@ -0,0 +1,45 @@
+/* livejournal */
+.share-button--livejournal {
+  background-color: hsla(195, 100%, 46%, 1);
+}
+
+.share-button--livejournal:focus {
+  box-shadow: 0 0 0 3px hsla(195, 94%, 71%, 0.4);
+}
+
+.share-button--livejournal:hover {
+  background-color: hsla(195, 100%, 46%, 0.9);
+}
+
+.share-button--livejournal .share-button__icon path {
+  fill: #fff;
+}
+
+/* Circle */
+.share-button--livejournal.share-button--outline {
+  background-color: transparent;
+  border-color: hsl(195, 100%, 46%, 1);
+}
+
+.share-button--livejournal.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(195, 100%, 46%, 0.9);
+}
+
+.share-button--livejournal.share-button--outline .share-button__text {
+  color: hsla(195, 100%, 46%, 1);
+}
+
+.share-button--livejournal.share-button--outline:hover .share-button__text {
+  color: hsla(195, 100%, 46%, 0.9);
+}
+
+.share-button--livejournal.share-button--outline .share-button__icon path {
+  fill: hsla(195, 100%, 46%, 1);
+}
+
+.share-button--livejournal.share-button--outline:hover
+  .share-button__icon
+  path {
+  fill: hsla(195, 100%, 46%, 0.9);
+}
diff --git a/src/style/renrenButton.css b/src/style/renrenButton.css
new file mode 100644
index 0000000..966d1db
--- /dev/null
+++ b/src/style/renrenButton.css
@@ -0,0 +1,43 @@
+/* Renren */
+.share-button--renren {
+  background-color: hsla(207, 71%, 45%, 1);
+}
+
+.share-button--renren:focus {
+  box-shadow: 0 0 0 3px hsla(207, 65%, 50%, 0.4);
+}
+
+.share-button--renren:hover {
+  background-color: hsla(207, 71%, 45%, 0.9);
+}
+
+.share-button--renren .share-button__icon path {
+  fill: #fff;
+}
+
+/* Circle */
+.share-button--renren.share-button--outline {
+  background-color: transparent;
+  border-color: hsl(207, 71%, 45%, 1);
+}
+
+.share-button--renren.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(207, 71%, 45%, 0.9);
+}
+
+.share-button--renren.share-button--outline .share-button__text {
+  color: hsla(207, 71%, 45%, 1);
+}
+
+.share-button--renren.share-button--outline:hover .share-button__text {
+  color: hsla(207, 71%, 45%, 0.9);
+}
+
+.share-button--renren.share-button--outline .share-button__icon path {
+  fill: hsla(207, 71%, 45%, 1);
+}
+
+.share-button--renren.share-button--outline:hover .share-button__icon path {
+  fill: hsla(207, 71%, 45%, 0.9);
+}
diff --git a/src/style/twitterButton.css b/src/style/twitterButton.css
index ec929b9..158506a 100644
--- a/src/style/twitterButton.css
+++ b/src/style/twitterButton.css
@@ -1,6 +1,6 @@
 /* Twitter */
 .share-button--twitter {
-  background-color: hsla(203, 88%, 53%, 1);
+  background-color: hsla(203, 89%, 53%, 1);
 }
 
 .share-button--twitter:focus {
diff --git a/src/style/vkontakteButton.css b/src/style/vkontakteButton.css
new file mode 100644
index 0000000..5a88d33
--- /dev/null
+++ b/src/style/vkontakteButton.css
@@ -0,0 +1,43 @@
+/* vk */
+.share-button--vk {
+  background-color: hsla(212, 28%, 52%, 1);
+}
+
+.share-button--vk:focus {
+  box-shadow: 0 0 0 3px hsla(212, 22%, 77%, 0.4);
+}
+
+.share-button--vk:hover {
+  background-color: hsla(212, 28%, 52%, 0.9);
+}
+
+.share-button--vk .share-button__icon path {
+  fill: #fff;
+}
+
+/* Circle */
+.share-button--vk.share-button--outline {
+  background-color: transparent;
+  border-color: hsla(212, 28%, 52%, 1);
+}
+
+.share-button--vk.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(212, 28%, 52%, 0.9);
+}
+
+.share-button--vk.share-button--outline .share-button__text {
+  color: hsla(212, 28%, 52%, 1);
+}
+
+.share-button--vk.share-button--outline:hover .share-button__text {
+  color: hsla(212, 28%, 52%, 0.9);
+}
+
+.share-button--vk.share-button--outline .share-button__icon path {
+  fill: hsla(212, 28%, 52%, 1);
+}
+
+.share-button--vk.share-button--outline:hover .share-button__icon path {
+  fill: hsla(212, 28%, 52%, 0.9);
+}
diff --git a/src/style/weiboButton.css b/src/style/weiboButton.css
new file mode 100644
index 0000000..bfd4005
--- /dev/null
+++ b/src/style/weiboButton.css
@@ -0,0 +1,43 @@
+/* weibo */
+.share-button--weibo {
+  background-color: hsl(353, 83%, 49%);
+}
+
+.share-button--weibo:focus {
+  box-shadow: 0 0 0 3px hsla(353, 100%, 74%, 0.4);
+}
+
+.share-button--weibo:hover {
+  background-color: hsla(353, 83%, 49%, 0.9);
+}
+
+.share-button--weibo .share-button__icon path {
+  fill: #fff;
+}
+
+/* Circle */
+.share-button--weibo.share-button--outline {
+  background-color: transparent;
+  border-color: hsl(353, 83%, 49%, 1);
+}
+
+.share-button--weibo.share-button--outline:hover {
+  background-color: transparent;
+  border-color: hsla(353, 83%, 49%, 0.9);
+}
+
+.share-button--weibo.share-button--outline .share-button__text {
+  color: hsla(353, 83%, 49%, 1);
+}
+
+.share-button--weibo.share-button--outline:hover .share-button__text {
+  color: hsla(353, 83%, 49%, 0.9);
+}
+
+.share-button--weibo.share-button--outline .share-button__icon path {
+  fill: hsla(353, 83%, 49%, 1);
+}
+
+.share-button--weibo.share-button--outline:hover .share-button__icon path {
+  fill: hsla(353, 83%, 49%, 0.9);
+}