From b1d322d1e81662dcecad6580c06a38c13bf90052 Mon Sep 17 00:00:00 2001
From: Alexandrshy <alexandrshy@gmail.com>
Date: Fri, 5 Apr 2019 11:33:01 +0400
Subject: [PATCH] Changed property name

---
 .gitignore                                 |  4 ++
 package.json                               |  2 +-
 src/VueShareBttons.vue                     | 78 ++++++++++++++++++++--
 src/components/BloggerButton.vue           | 35 +++++-----
 src/components/DiggButton.vue              | 29 +++-----
 src/components/EmailButton.vue             | 34 ++--------
 src/components/EvernoteButton.vue          | 30 ++++-----
 src/components/FacebookButton.vue          | 29 ++++----
 src/components/FacebookMessengerButton.vue | 36 +++-------
 src/components/HatenaButton.vue            | 31 ++++-----
 src/components/InstapaperButton.vue        | 31 ++++-----
 src/components/LinkedInButton.vue          | 29 ++++----
 src/components/LiveJournalButton.vue       | 31 ++++-----
 src/components/OdnoklassnikiButton.vue     | 33 +++++----
 src/components/PinterestButton.vue         | 37 +++++-----
 src/components/PocketButton.vue            | 34 ++++------
 src/components/RedditButton.vue            | 38 +++++------
 src/components/RenrenButton.vue            | 38 +++++------
 src/components/TelegramButton.vue          | 38 +++--------
 src/components/TumblrButton.vue            | 39 +++++------
 src/components/TwitterButton.vue           | 31 ++++-----
 src/components/ViberButton.vue             | 36 ++--------
 src/components/VkontakteButton.vue         | 35 +++++-----
 src/components/WeiboButton.vue             | 37 +++++-----
 src/components/WhatsAppButton.vue          | 28 +-------
 src/components/XingButton.vue              | 34 ++++------
 src/style/facebookMessengerButton.css      | 31 +++++----
 27 files changed, 387 insertions(+), 501 deletions(-)

diff --git a/.gitignore b/.gitignore
index 185e663..e00e2e4 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,7 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw*
+
+# Customer
+/src/main.js
+/public
\ No newline at end of file
diff --git a/package.json b/package.json
index 76779a0..75cea85 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-share-buttons",
-  "version": "0.1.7",
+  "version": "1.0.0",
   "private": false,
   "license": "MIT",
   "homepage": "https://github.com/Alexandrshy/vue-share-buttons",
diff --git a/src/VueShareBttons.vue b/src/VueShareBttons.vue
index 25e3a89..38bc218 100644
--- a/src/VueShareBttons.vue
+++ b/src/VueShareBttons.vue
@@ -188,31 +188,93 @@
         shareTitle="Comment"
         btnText
       ></facebook-button>
-      <facebook-button v-bind:hasIcon="false" shareTitle="Comment"></facebook-button>
-      <facebook-button class="share-button--circle" shareTitle="Comment"></facebook-button>
-      <facebook-button class="share-button--circle" shareTitle="Comment" btnText></facebook-button>
-      <facebook-button class="share-button--circle" shareTitle="Comment" v-bind:hasIcon="false"></facebook-button>
-      <facebook-button class="share-button--outline" shareTitle="Comment"></facebook-button>
+      <facebook-button v-bind:hasIcon="false" shareTitle="Comment" hasCounter></facebook-button>
+      <facebook-button class="share-button--circle" shareTitle="Comment" hasCounter></facebook-button>
+      <facebook-button class="share-button--circle" shareTitle="Comment" btnText hasCounter></facebook-button>
+      <facebook-button
+        class="share-button--circle"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+        hasCounter
+      ></facebook-button>
+      <facebook-button class="share-button--outline" shareTitle="Comment" hasCounter></facebook-button>
       <facebook-button
         class="share-button--outline"
         v-bind:isBlank="false"
         shareText="Twiiter share good work"
         shareTitle="Comment"
         btnText
+        hasCounter
+      ></facebook-button>
+      <facebook-button
+        class="share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+        hasCounter
+      ></facebook-button>
+      <facebook-button class="share-button--outline" hasCounter></facebook-button>
+      <facebook-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        hasCounter
       ></facebook-button>
-      <facebook-button class="share-button--outline" shareTitle="Comment" v-bind:hasIcon="false"></facebook-button>
-      <facebook-button class="share-button--circle share-button--outline" shareTitle="Comment"></facebook-button>
       <facebook-button
         class="share-button--circle share-button--outline"
         shareTitle="Comment"
         btnText
+        hasCounter
       ></facebook-button>
       <facebook-button
         class="share-button--circle share-button--outline"
         shareTitle="Comment"
         v-bind:hasIcon="false"
+        hasCounter
       ></facebook-button>
     </div>
+    <div class="share-buttons-group">
+      <facebook-messenger-button shareTitle="Comment"></facebook-messenger-button>
+      <facebook-messenger-button
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></facebook-messenger-button>
+      <facebook-messenger-button v-bind:hasIcon="false" shareTitle="Comment"></facebook-messenger-button>
+      <facebook-messenger-button class="share-button--circle" shareTitle="Comment"></facebook-messenger-button>
+      <facebook-messenger-button class="share-button--circle" shareTitle="Comment" btnText></facebook-messenger-button>
+      <facebook-messenger-button
+        class="share-button--circle"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></facebook-messenger-button>
+      <facebook-messenger-button class="share-button--outline" shareTitle="Comment"></facebook-messenger-button>
+      <facebook-messenger-button
+        class="share-button--outline"
+        v-bind:isBlank="false"
+        shareText="Twiiter share good work"
+        shareTitle="Comment"
+        btnText
+      ></facebook-messenger-button>
+      <facebook-messenger-button
+        class="share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></facebook-messenger-button>
+      <facebook-messenger-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+      ></facebook-messenger-button>
+      <facebook-messenger-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        btnText
+      ></facebook-messenger-button>
+      <facebook-messenger-button
+        class="share-button--circle share-button--outline"
+        shareTitle="Comment"
+        v-bind:hasIcon="false"
+      ></facebook-messenger-button>
+    </div>
     <div class="share-buttons-group">
       <linkedIn-button shareTitle="Comment"></linkedIn-button>
       <linkedIn-button
@@ -676,6 +738,7 @@ import WeiboButton from "./components/WeiboButton";
 import EvernoteButton from "./components/EvernoteButton";
 import VkontakteButton from "./components/VkontakteButton";
 import FacebookButton from "./components/FacebookButton";
+import FacebookMessengerButton from "./components/FacebookMessengerButton";
 import LinkedInButton from "./components/LinkedInButton";
 import TumblrButton from "./components/TumblrButton";
 import PinterestButton from "./components/PinterestButton";
@@ -702,6 +765,7 @@ export default {
     EvernoteButton,
     VkontakteButton,
     FacebookButton,
+    FacebookMessengerButton,
     LinkedInButton,
     TumblrButton,
     PinterestButton,
diff --git a/src/components/BloggerButton.vue b/src/components/BloggerButton.vue
index f980d41..4f2cedc 100644
--- a/src/components/BloggerButton.vue
+++ b/src/components/BloggerButton.vue
@@ -2,14 +2,12 @@
   <button
     class="share-button share-button--blogger"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
+    :title="title"
+    :description="description"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -36,25 +34,26 @@ export default {
   name: "BloggerShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
+    title: { type: String, default: "" },
+    description: { type: String, default: getDocumentTitle },
     btnText: { type: String, default: "Blogger" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Blogger" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.blogger.com/blog-this.g?u=${
-        this.$props.shareUrl
-      }&n=${encodeURIComponent(this.$props.shareTitle)}&t=${encodeURIComponent(
-        this.$props.shareDescription
+        this.$props.url
+      }&n=${encodeURIComponent(this.$props.title)}&t=${encodeURIComponent(
+        this.$props.description
       )}`;
 
       return this.$props.isBlank
diff --git a/src/components/DiggButton.vue b/src/components/DiggButton.vue
index 55ca5ba..4e8fbc9 100644
--- a/src/components/DiggButton.vue
+++ b/src/components/DiggButton.vue
@@ -2,14 +2,10 @@
   <button
     class="share-button share-button--digg"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -25,25 +21,16 @@
 
 <script>
 import Icon from "./icon/Icon.vue";
-import {
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
+import { getDocumentHref, eventEmit, createWindow } from "../helpers";
 
 export default {
   name: "DiggShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
     btnText: { type: String, default: "Digg" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
@@ -52,7 +39,7 @@ export default {
       eventEmit(this, "onShare", { name: "Digg" });
       const configWindow = createWindow();
       const url = `http://digg.com/submit?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
 
       return this.$props.isBlank
diff --git a/src/components/EmailButton.vue b/src/components/EmailButton.vue
index a7295ec..03eee79 100644
--- a/src/components/EmailButton.vue
+++ b/src/components/EmailButton.vue
@@ -2,16 +2,9 @@
   <button
     class="share-button share-button--email"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
     :hasIcon="hasIcon"
-    :isBlank="isBlank"
     @click="openShareWindow"
   >
     <icon
@@ -31,39 +24,24 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
+import { getDocumentHref, eventEmit } 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: "" },
+    url: { type: String, default: getDocumentHref },
     btnText: { type: String, default: "Email" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
-    hasIcon: { type: Boolean, default: true },
-    isBlank: { type: Boolean, default: true }
+    hasIcon: { 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
+        this.$props.url
       )}`;
 
-      return this.$props.isBlank
-        ? window.open(url, "__blank")
-        : window.open(url, "Share this", configWindow);
+      return window.open(url);
     }
   }
 };
diff --git a/src/components/EvernoteButton.vue b/src/components/EvernoteButton.vue
index 6abe6ee..60379ef 100644
--- a/src/components/EvernoteButton.vue
+++ b/src/components/EvernoteButton.vue
@@ -2,13 +2,11 @@
   <button
     class="share-button share-button--evernote"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareDescription="shareDescription"
-    :shareTitle="shareTitle"
+    :url="url"
+    :description="description"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -35,24 +33,24 @@ export default {
   name: "EvernoteShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
     btnText: { type: String, default: "Evernote" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Evernote" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.evernote.com/clip.action?url=${encodeURIComponent(
-        this.$props.shareUrl
-      )}&title=${encodeURIComponent(this.$props.shareDescription)}`;
+        this.$props.url
+      )}&title=${encodeURIComponent(this.$props.description)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
diff --git a/src/components/FacebookButton.vue b/src/components/FacebookButton.vue
index c158575..073c828 100644
--- a/src/components/FacebookButton.vue
+++ b/src/components/FacebookButton.vue
@@ -2,13 +2,10 @@
   <button
     class="share-button share-button--facebook"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareDescription="shareDescription"
-    :shareTitle="shareTitle"
+    :url="url"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :hasCounter="hasCounter"
     :digitsCounter="digitsCounter"
@@ -30,7 +27,6 @@
 import Icon from "./icon/Icon.vue";
 import {
   getDocumentHref,
-  getDocumentTitle,
   eventEmit,
   createWindow,
   getRandomNumber,
@@ -41,14 +37,10 @@ export default {
   name: "FacebookShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
     btnText: { type: String, default: "Facebook" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     hasCounter: { type: Boolean, default: false },
     digitsCounter: { type: Number, default: 0 },
@@ -68,9 +60,12 @@ export default {
       } else {
         eventEmit(this, "onShare", { name: "Facebook" });
       }
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
 
       return this.$props.isBlank
@@ -83,7 +78,7 @@ export default {
         this.$props.keyCounter || `Facebook_${getRandomNumber()}`;
       const script = document.createElement("script");
       script.src = `https://graph.facebook.com?id=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&callback=${callback}`;
       document.body.appendChild(script);
 
diff --git a/src/components/FacebookMessengerButton.vue b/src/components/FacebookMessengerButton.vue
index ab0397b..9c10561 100644
--- a/src/components/FacebookMessengerButton.vue
+++ b/src/components/FacebookMessengerButton.vue
@@ -2,15 +2,10 @@
   <button
     class="share-button share-button--facebookMessenger"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareDescription="shareDescription"
-    :shareTitle="shareTitle"
+    :appID="appID"
+    :url="url"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
     :hasIcon="hasIcon"
-    :isBlank="isBlank"
     @click="openShareWindow"
   >
     <icon iconName="FacebookMessenger" class="share-button__icon" v-if="hasIcon === true">
@@ -24,40 +19,25 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
+import { getDocumentHref, eventEmit } 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 }
+    url: { type: String, default: getDocumentHref },
+    btnText: { type: String, default: "Messenger" },
+    hasIcon: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "FacebookMessenger" });
-      const configWindow = createWindow();
       const url = `fb-messenger://share/?link=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&app_id=${this.$props.appID}`;
 
-      return this.$props.isBlank
-        ? window.open(url, "__blank")
-        : window.open(url, "Share this", configWindow);
+      return window.open(url);
     }
   }
 };
diff --git a/src/components/HatenaButton.vue b/src/components/HatenaButton.vue
index 4de17e2..844c5a5 100644
--- a/src/components/HatenaButton.vue
+++ b/src/components/HatenaButton.vue
@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--hatena"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
+    :description="description"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -36,24 +33,24 @@ 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: "" },
+    url: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
     btnText: { type: String, default: "Hatena" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Hatena" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `http://b.hatena.ne.jp/bookmarklet?url=${encodeURIComponent(
-        this.$props.shareUrl
-      )}&btitle=${encodeURIComponent(this.$props.shareDescription)}`;
+        this.$props.url
+      )}&btitle=${encodeURIComponent(this.$props.description)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
diff --git a/src/components/InstapaperButton.vue b/src/components/InstapaperButton.vue
index c121fac..cb7448b 100644
--- a/src/components/InstapaperButton.vue
+++ b/src/components/InstapaperButton.vue
@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--instapaper"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
+    :description="description"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -36,24 +33,24 @@ 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: "" },
+    url: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
     btnText: { type: String, default: "Instapaper" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Instapaper" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.instapaper.com/edit?url=${encodeURIComponent(
-        this.$props.shareUrl
-      )}&title=${encodeURIComponent(this.$props.shareDescription)}`;
+        this.$props.url
+      )}&title=${encodeURIComponent(this.$props.description)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
diff --git a/src/components/LinkedInButton.vue b/src/components/LinkedInButton.vue
index 5acebc3..dc9a70d 100644
--- a/src/components/LinkedInButton.vue
+++ b/src/components/LinkedInButton.vue
@@ -2,13 +2,10 @@
   <button
     class="share-button share-button--linkedIn"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareDescription="shareDescription"
-    :shareTitle="shareTitle"
+    :url="url"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :hasCounter="hasCounter"
     :digitsCounter="digitsCounter"
@@ -30,7 +27,6 @@
 import Icon from "./icon/Icon.vue";
 import {
   getDocumentHref,
-  getDocumentTitle,
   eventEmit,
   createWindow,
   getRandomNumber,
@@ -41,14 +37,10 @@ export default {
   name: "LinkedInShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
     btnText: { type: String, default: "LinkedIn" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     hasCounter: { type: Boolean, default: false },
     digitsCounter: { type: Number, default: 0 },
@@ -68,9 +60,12 @@ export default {
       } else {
         eventEmit(this, "onShare", { name: "LinkedIn" });
       }
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.linkedin.com/shareArticle?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
 
       return this.$props.isBlank
@@ -83,7 +78,7 @@ export default {
         this.$props.keyCounter || `LinkedIn_${getRandomNumber()}`;
       const script = document.createElement("script");
       script.src = `https://www.linkedin.com/countserv/count/share?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&callback=${callback}`;
       document.body.appendChild(script);
 
diff --git a/src/components/LiveJournalButton.vue b/src/components/LiveJournalButton.vue
index f762cb3..543c4b7 100644
--- a/src/components/LiveJournalButton.vue
+++ b/src/components/LiveJournalButton.vue
@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--livejournal"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
+    :description="description"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -36,24 +33,24 @@ export default {
   name: "LiveJournalShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
     btnText: { type: String, default: "LiveJournal" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "LiveJournal" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://livejournal.com/update.bml?event=${encodeURIComponent(
-        this.$props.shareDescription
-      )}&subject=${encodeURIComponent(this.$props.shareUrl)}`;
+        this.$props.description
+      )}&subject=${encodeURIComponent(this.$props.url)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
diff --git a/src/components/OdnoklassnikiButton.vue b/src/components/OdnoklassnikiButton.vue
index bbb1472..4b50ecf 100644
--- a/src/components/OdnoklassnikiButton.vue
+++ b/src/components/OdnoklassnikiButton.vue
@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--odnoklassniki"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
+    :description="description"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :hasCounter="hasCounter"
     :digitsCounter="digitsCounter"
@@ -40,14 +37,11 @@ export default {
   name: "OdnoklassnikiShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
     btnText: { type: String, default: "Odnoklassniki" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     hasCounter: { type: Boolean, default: false },
     digitsCounter: { type: Number, default: 0 },
@@ -66,10 +60,13 @@ export default {
       } else {
         eventEmit(this, "onShare", { name: "Odnoklassniki" });
       }
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=${encodeURIComponent(
-        this.$props.shareUrl
-      )}&st.comments=${encodeURIComponent(this.$props.shareTitle)}`;
+        this.$props.url
+      )}&st.comments=${encodeURIComponent(this.$props.description)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
@@ -83,7 +80,7 @@ export default {
 
       const script = document.createElement("script");
       script.src = `https://connect.ok.ru/dk?st.cmd=extLike&uid=1&ref=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
       document.body.appendChild(script);
 
diff --git a/src/components/PinterestButton.vue b/src/components/PinterestButton.vue
index a319768..9d9ccb3 100644
--- a/src/components/PinterestButton.vue
+++ b/src/components/PinterestButton.vue
@@ -2,14 +2,12 @@
   <button
     class="share-button share-button--pinterest"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
+    :description="description"
+    :picture="picture"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :hasCounter="hasCounter"
     :digitsCounter="digitsCounter"
@@ -42,14 +40,12 @@ export default {
   name: "PinterestShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
+    picture: { type: String, default: "" },
     btnText: { type: String, default: "Pinterest" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number },
+    modalHeight: { type: Number },
     hasIcon: { type: Boolean, default: true },
     hasCounter: { type: Boolean, default: false },
     digitsCounter: { type: Number, default: 0 },
@@ -69,12 +65,15 @@ export default {
       } else {
         eventEmit(this, "onShare", { name: "Pinterest" });
       }
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.pinterest.com/pin/create/button/?canonicalUrl=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&description=${encodeURIComponent(
-        this.$props.shareDescription
-      )}&media=${encodeURIComponent(this.$props.sharePic)}`;
+        this.$props.description
+      )}&media=${encodeURIComponent(this.$props.picture)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
@@ -86,7 +85,7 @@ export default {
         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
+        this.$props.url
       )}&callback=${callback}`;
       document.body.appendChild(script);
 
diff --git a/src/components/PocketButton.vue b/src/components/PocketButton.vue
index e61c038..3837109 100644
--- a/src/components/PocketButton.vue
+++ b/src/components/PocketButton.vue
@@ -2,14 +2,10 @@
   <button
     class="share-button share-button--pocket"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -25,34 +21,28 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
+import { getDocumentHref, eventEmit, createWindow } from "../helpers";
 
 export default {
   name: "PocketShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
     btnText: { type: String, default: "Pocket" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number },
+    modalHeight: { type: Number },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Pocket" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://getpocket.com/edit?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
 
       return this.$props.isBlank
diff --git a/src/components/RedditButton.vue b/src/components/RedditButton.vue
index 9c7cfe1..3e37153 100644
--- a/src/components/RedditButton.vue
+++ b/src/components/RedditButton.vue
@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--reddit"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
+    :title="title"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -25,35 +22,30 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
+import { getDocumentHref, eventEmit, createWindow } from "../helpers";
 
 export default {
   name: "RedditShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
+    title: { type: String, default: "" },
     btnText: { type: String, default: "Reddit" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number },
+    modalHeight: { type: Number },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Reddit" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://reddit.com/submit?url=${encodeURIComponent(
-        this.$props.shareUrl
-      )}&title=${encodeURIComponent(this.$props.shareTitle)}`;
+        this.$props.url
+      )}&title=${encodeURIComponent(this.$props.title)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
diff --git a/src/components/RenrenButton.vue b/src/components/RenrenButton.vue
index 1411b77..b5846b1 100644
--- a/src/components/RenrenButton.vue
+++ b/src/components/RenrenButton.vue
@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--renren"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
+    :title="title"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -28,35 +25,30 @@
 
 <script>
 import Icon from "./icon/Icon.vue";
-import {
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
+import { getDocumentHref, eventEmit, createWindow } from "../helpers";
 
 export default {
   name: "RenrenShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
+    title: { type: String, default: "" },
     btnText: { type: String, default: "Renren" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Renren" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `http://share.renren.com/share/buttonshare.do?link=${encodeURIComponent(
-        this.$props.shareUrl
-      )}&title=${encodeURIComponent(this.$props.shareTitle)}`;
+        this.$props.url
+      )}&title=${encodeURIComponent(this.$props.title)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
diff --git a/src/components/TelegramButton.vue b/src/components/TelegramButton.vue
index 86eb450..3705924 100644
--- a/src/components/TelegramButton.vue
+++ b/src/components/TelegramButton.vue
@@ -2,16 +2,10 @@
   <button
     class="share-button share-button--telegram"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
+    :description="description"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
     :hasIcon="hasIcon"
-    :isBlank="isBlank"
     @click="openShareWindow"
   >
     <icon iconName="Telegram" class="share-button__icon" v-if="hasIcon === true">
@@ -27,39 +21,25 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
+import { getDocumentHref, getDocumentTitle, eventEmit } 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: "" },
+    url: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
     btnText: { type: String, default: "Telegram" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
-    hasIcon: { type: Boolean, default: true },
-    isBlank: { type: Boolean, default: true }
+    hasIcon: { 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)}`;
+        this.$props.url
+      )}&text=${encodeURIComponent(this.$props.description)}`;
 
-      return this.$props.isBlank
-        ? window.open(url, "__blank")
-        : window.open(url, "Share this", configWindow);
+      return window.open(url);
     }
   }
 };
diff --git a/src/components/TumblrButton.vue b/src/components/TumblrButton.vue
index 545a4f1..de15d28 100644
--- a/src/components/TumblrButton.vue
+++ b/src/components/TumblrButton.vue
@@ -2,14 +2,12 @@
   <button
     class="share-button share-button--tumblr"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
+    :title="title"
+    :description="description"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :hasCounter="hasCounter"
     :digitsCounter="digitsCounter"
@@ -42,14 +40,12 @@ export default {
   name: "TumblrShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
+    title: { type: String, default: "" },
+    description: { type: String, default: getDocumentTitle },
     btnText: { type: String, default: "Tumblr" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     hasCounter: { type: Boolean, default: false },
     digitsCounter: { type: Number, default: 0 },
@@ -69,14 +65,15 @@ export default {
       } else {
         eventEmit(this, "onShare", { name: "Tumblr" });
       }
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.tumblr.com/widgets/share/tool?canonicalUrl=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&title=${encodeURIComponent(
-        this.$props.shareTitle
-      )}&caption=${encodeURIComponent(
-        this.$props.shareDescription
-      )}&posttype=link`;
+        this.$props.title
+      )}&caption=${encodeURIComponent(this.$props.description)}&posttype=link`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
@@ -87,7 +84,7 @@ export default {
       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
+        this.$props.url
       )}&callback=${callback}`;
       document.body.appendChild(script);
 
diff --git a/src/components/TwitterButton.vue b/src/components/TwitterButton.vue
index 6552652..3e26b46 100644
--- a/src/components/TwitterButton.vue
+++ b/src/components/TwitterButton.vue
@@ -2,14 +2,11 @@
   <button
     class="share-button share-button--twitter"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
+    :description="description"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -36,24 +33,24 @@ export default {
   name: "TwitterShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
+    description: { type: String, default: getDocumentTitle },
     btnText: { type: String, default: "Twitter" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Twitter" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://twitter.com/share?url=${encodeURIComponent(
-        this.$props.shareUrl
-      )}&text=${encodeURIComponent(this.$props.shareDescription)}`;
+        this.$props.url
+      )}&text=${encodeURIComponent(this.$props.description)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
diff --git a/src/components/ViberButton.vue b/src/components/ViberButton.vue
index a811247..9391b6b 100644
--- a/src/components/ViberButton.vue
+++ b/src/components/ViberButton.vue
@@ -2,16 +2,9 @@
   <button
     class="share-button share-button--viber"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
     :hasIcon="hasIcon"
-    :isBlank="isBlank"
     @click="openShareWindow"
   >
     <icon iconName="Viber" class="share-button__icon" v-if="hasIcon === true">
@@ -37,39 +30,22 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
+import { getDocumentHref, eventEmit } 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: "" },
+    url: { type: String, default: getDocumentHref },
     btnText: { type: String, default: "Viber" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
-    hasIcon: { type: Boolean, default: true },
-    isBlank: { type: Boolean, default: true }
+    hasIcon: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Viber" });
-      const configWindow = createWindow();
-      const url = `viber://forward?text=${encodeURIComponent(
-        this.$props.shareUrl
-      )}`;
+      const url = `viber://forward?text=${encodeURIComponent(this.$props.url)}`;
 
-      return this.$props.isBlank
-        ? window.open(url, "__blank")
-        : window.open(url, "Share this", configWindow);
+      return window.open(url);
     }
   }
 };
diff --git a/src/components/VkontakteButton.vue b/src/components/VkontakteButton.vue
index facfd97..63b1fac 100644
--- a/src/components/VkontakteButton.vue
+++ b/src/components/VkontakteButton.vue
@@ -2,13 +2,12 @@
   <button
     class="share-button share-button--vk"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareDescription="shareDescription"
-    :shareTitle="shareTitle"
+    :url="url"
+    :description="description"
+    :title="title"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :hasCounter="hasCounter"
     :digitsCounter="digitsCounter"
@@ -40,14 +39,13 @@ export default {
   name: "VkontakteShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
+    url: { type: String, default: getDocumentHref },
+    title: { type: String, default: "" },
+    description: { type: String, default: getDocumentTitle },
     sharePic: { type: String, default: "" },
     btnText: { type: String, default: "Vkontakte" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     hasCounter: { type: Boolean, default: false },
     digitsCounter: { type: Number, default: 0 },
@@ -66,13 +64,16 @@ export default {
       } else {
         eventEmit(this, "onShare", { name: "vk" });
       }
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://vk.com/share.php?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&title=${encodeURIComponent(
-        this.$props.shareTitle
+        this.$props.title
       )}&comment=${encodeURIComponent(
-        this.$props.shareDescription
+        this.$props.description
       )}&image=${encodeURIComponent(this.$props.sharePic)}&noparse=true`;
 
       return this.$props.isBlank
@@ -91,7 +92,7 @@ export default {
 
       const script = document.createElement("script");
       script.src = `https://vk.com/share.php?act=count&index=${getRandomNumber()}&url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
       document.body.appendChild(script);
 
diff --git a/src/components/WeiboButton.vue b/src/components/WeiboButton.vue
index c4f51bc..b6521f8 100644
--- a/src/components/WeiboButton.vue
+++ b/src/components/WeiboButton.vue
@@ -2,14 +2,13 @@
   <button
     class="share-button share-button--weibo"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
+    :title="title"
+    :description="description"
+    :picture="picture"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -36,26 +35,28 @@ export default {
   name: "WeiboShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
+    title: { type: String, default: "" },
+    description: { type: String, default: getDocumentTitle },
+    picture: { type: String, default: "" },
     btnText: { type: String, default: "Weibo" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Weibo" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `http://service.weibo.com/share/share.php?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}&title=${encodeURIComponent(
-        this.$props.shareTitle
-      )}&pic=${encodeURIComponent(this.$props.sharePic)}`;
+        this.$props.title
+      )}&pic=${encodeURIComponent(this.$props.picture)}`;
 
       return this.$props.isBlank
         ? window.open(url, "__blank")
diff --git a/src/components/WhatsAppButton.vue b/src/components/WhatsAppButton.vue
index 3292bb8..c3ac657 100644
--- a/src/components/WhatsAppButton.vue
+++ b/src/components/WhatsAppButton.vue
@@ -2,16 +2,9 @@
   <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">
@@ -25,39 +18,24 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
+import { getDocumentHref, eventEmit } 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 }
+    hasIcon: { 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);
+      return window.open(url);
     }
   }
 };
diff --git a/src/components/XingButton.vue b/src/components/XingButton.vue
index 8fffe13..2b6ddb3 100644
--- a/src/components/XingButton.vue
+++ b/src/components/XingButton.vue
@@ -2,14 +2,10 @@
   <button
     class="share-button share-button--xing"
     type="button"
-    :class="className"
-    :shareUrl="shareUrl"
-    :shareTitle="shareTitle"
-    :shareDescription="shareDescription"
-    :sharePic="sharePic"
+    :url="url"
     :btnText="btnText"
-    :windowWidth="windowWidth"
-    :windowHeight="windowHeight"
+    :modalWidth="modalWidth"
+    :modalHeight="modalHeight"
     :hasIcon="hasIcon"
     :isBlank="isBlank"
     @click="openShareWindow"
@@ -25,34 +21,28 @@
  
 <script>
 import Icon from "./icon/Icon.vue";
-import {
-  getDocumentHref,
-  getDocumentTitle,
-  eventEmit,
-  createWindow
-} from "../helpers";
+import { getDocumentHref, eventEmit, createWindow } from "../helpers";
 
 export default {
   name: "XingShareButton",
   components: { Icon },
   props: {
-    className: { type: String },
-    shareUrl: { type: String, default: getDocumentHref },
-    shareTitle: { type: String, default: "" },
-    shareDescription: { type: String, default: getDocumentTitle },
-    sharePic: { type: String, default: "" },
+    url: { type: String, default: getDocumentHref },
     btnText: { type: String, default: "Xing" },
-    windowWidth: { type: Number },
-    windowHeight: { type: Number },
+    modalWidth: { type: Number, default: 500 },
+    modalHeight: { type: Number, default: 500 },
     hasIcon: { type: Boolean, default: true },
     isBlank: { type: Boolean, default: true }
   },
   methods: {
     openShareWindow() {
       eventEmit(this, "onShare", { name: "Xing" });
-      const configWindow = createWindow();
+      const configWindow = createWindow(
+        this.$props.modalWidth,
+        this.$props.modalHeight
+      );
       const url = `https://www.xing.com/social_plugins/share?url=${encodeURIComponent(
-        this.$props.shareUrl
+        this.$props.url
       )}`;
 
       return this.$props.isBlank
diff --git a/src/style/facebookMessengerButton.css b/src/style/facebookMessengerButton.css
index 9c9bd42..46c8e12 100644
--- a/src/style/facebookMessengerButton.css
+++ b/src/style/facebookMessengerButton.css
@@ -1,51 +1,56 @@
-/* Facebook */
-.share-button--facebook {
+/* facebookMessenger */
+.share-button--facebookMessenger {
   background-color: hsla(221, 44%, 41%, 1);
 }
 
-.share-button--facebook:focus {
+.share-button--facebookMessenger:focus {
   box-shadow: 0 0 0 3px hsla(221, 38%, 66%, 0.4);
 }
 
-.share-button--facebook:hover {
+.share-button--facebookMessenger:hover {
   background-color: hsla(221, 44%, 41%, 0.9);
 }
 
-.share-button--facebook .share-button__icon path {
+.share-button--facebookMessenger .share-button__icon path {
   fill: #fff;
 }
 
-.share-button--facebook.share-button--outline {
+.share-button--facebookMessenger.share-button--outline {
   background-color: transparent;
   border-color: hsl(221, 44%, 41%, 1);
 }
 
-.share-button--facebook.share-button--outline:hover {
+.share-button--facebookMessenger.share-button--outline:hover {
   background-color: transparent;
   border-color: hsla(221, 44%, 41%, 0.9);
 }
 
-.share-button--facebook.share-button--outline .share-button__text {
+.share-button--facebookMessenger.share-button--outline .share-button__text {
   color: hsla(221, 44%, 41%, 1);
 }
 
-.share-button--facebook.share-button--outline:hover .share-button__text {
+.share-button--facebookMessenger.share-button--outline:hover
+  .share-button__text {
   color: hsla(221, 44%, 41%, 0.9);
 }
 
-.share-button--facebook.share-button--outline .share-button__icon path {
+.share-button--facebookMessenger.share-button--outline
+  .share-button__icon
+  path {
   fill: hsla(221, 44%, 41%, 1);
 }
 
-.share-button--facebook.share-button--outline:hover .share-button__icon path {
+.share-button--facebookMessenger.share-button--outline:hover
+  .share-button__icon
+  path {
   fill: hsla(221, 44%, 41%, 0.9);
 }
 
-.share-button--facebook.share-button--painted {
+.share-button--facebookMessenger.share-button--painted {
   background-color: transparent;
   border-color: hsla(220, 21%, 31%, 1);
 }
 
-.share-button--facebook.share-button--painted::before {
+.share-button--facebookMessenger.share-button--painted::before {
   background-color: hsla(221, 44%, 41%, 1);
 }