Added new share button: blogger, digg, livejournal, renren, vk, weibo

6 years ago · fe94130607
17 changed files with 846 additions and 8 deletions
--- 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>
--- a/src/components/BloggerButton.vue
+++ 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>
--- a/src/components/DiggButton.vue
+++ 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>
--- a/src/components/LiveJournalButton.vue
+++ 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>
--- a/src/components/RenrenButton.vue
+++ 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>
--- 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")
--- a/src/components/VkontakteButton.vue
+++ 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>
--- a/src/components/WeiboButton.vue
+++ 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>
--- a/src/components/index.js
+++ b/src/components/index.js
--- 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;
--- a/src/style/bloggerButton.css
+++ 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);
+}
--- a/src/style/diggButton.css
+++ 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);
+}
--- a/src/style/livejournalButton.css
+++ 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);
+}
--- a/src/style/renrenButton.css
+++ 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);
+}
--- 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 {
--- a/src/style/vkontakteButton.css
+++ 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);
+}
--- a/src/style/weiboButton.css
+++ 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);
+}