diff --git a/README.md b/README.md index 90a6fbd..4d368de 100644 --- a/README.md +++ b/README.md @@ -21,6 +21,7 @@ - [Example](#example) - [Author](#author) - [Link](#link) +- [Roadmap](#roadmap) - [License](#license) ## Installation @@ -30,6 +31,7 @@ ```bash npm i vue-share-buttons ``` + [Link to NPM](https://www.npmjs.com/package/vue-share-buttons) #### Install using Yarn @@ -37,6 +39,7 @@ npm i vue-share-buttons ```bash yarn add vue-share-buttons ``` + [Link to Yarn](https://yarn.pm/vue-share-buttons) ## Icons @@ -45,7 +48,7 @@ For icons, I use [simpleicons](https://simpleicons.org/) ## Usage -You need to import each social button separately. For example, you want to use the share button on Twitter. To do this you need: +You need to import each social button separately. For example, you want to use the share button on Twitter. To do this you need: #### Import component @@ -55,8 +58,8 @@ import TwitterButton from "vue-share-buttons/src/components/TwitterButton"; const app = new Vue({ el: "#app", components: { - TwitterButton - } + TwitterButton, + }, }); ``` @@ -83,152 +86,152 @@ Below are the options you can pass to create your own button. > Facebook, LinkedIn, Odnoklassniki -**Option**|**Type's**|**Default**|**Description** ------|-----|-----|----- -url|String|`document.location.href`|URL-address you want to share -description|String|`document.title`|Messages you want to share -btnText|String|`Facebook`, `LinkedIn`, `Odnoklassniki`, etc.|Text to be written on your button -hasIcon|Boolean|`true`|Presence of social network icon in the button -isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window -modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" -modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" -hasCounter|Boolean|`false`|Presence of a counter with the number of share -digitsCounter|Number|`0`|The number of decimal places in the counter -keyCounter|String|`''`|Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) +| **Option** | **Type's** | **Default** | **Description** | +| ------------- | ---------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | +| url | String | `document.location.href` | URL-address you want to share | +| description | String | `document.title` | Messages you want to share | +| btnText | String | `Facebook`, `LinkedIn`, `Odnoklassniki`, etc. | Text to be written on your button | +| hasIcon | Boolean | `true` | Presence of social network icon in the button | +| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window | +| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | +| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | +| hasCounter | Boolean | `false` | Presence of a counter with the number of share | +| digitsCounter | Number | `0` | The number of decimal places in the counter | +| keyCounter | String | `''` | Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) | > Tumblr, Vkontakte -**Option**|**Type's**|**Default**|**Description** ------|-----|-----|----- -url|String|`document.location.href`|URL-address you want to share -description|String|`document.title`|Messages you want to share -title|String|`''`|Title you want to share -btnText|String|`Tumblr`, `Vkontakte`|Text to be written on your button -hasIcon|Boolean|`true`|Presence of social network icon in the button -isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window -modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" -modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" -hasCounter|Boolean|`false`|Presence of a counter with the number of share -digitsCounter|Number|`0`|The number of decimal places in the counter -keyCounter|String|`''`|Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) +| **Option** | **Type's** | **Default** | **Description** | +| ------------- | ---------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- | +| url | String | `document.location.href` | URL-address you want to share | +| description | String | `document.title` | Messages you want to share | +| title | String | `''` | Title you want to share | +| btnText | String | `Tumblr`, `Vkontakte` | Text to be written on your button | +| hasIcon | Boolean | `true` | Presence of social network icon in the button | +| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window | +| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | +| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | +| hasCounter | Boolean | `false` | Presence of a counter with the number of share | +| digitsCounter | Number | `0` | The number of decimal places in the counter | +| keyCounter | String | `''` | Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) | > Pinterest -**Option**|**Type's**|**Default**|**Description** ------|-----|-----|----- -url|String|`document.location.href`|URL-address you want to share -description|String|`document.title`|Messages you want to share -picture|String|`''`|Picture you want to share -btnText|String|`Pinterest`|Text to be written on your button -hasIcon|Boolean|`true`|Presence of social network icon in the button -isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window -modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" -modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" -hasCounter|Boolean|`false`|Presence of a counter with the number of share -digitsCounter|Number|`0`|The number of decimal places in the counter -keyCounter|String|`''`|Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) +| **Option** | **Type's** | **Default** | **Description** | +| ------------- | ---------- | ------------------------ | --------------------------------------------------------------------------------------------------------------------------- | +| url | String | `document.location.href` | URL-address you want to share | +| description | String | `document.title` | Messages you want to share | +| picture | String | `''` | Picture you want to share | +| btnText | String | `Pinterest` | Text to be written on your button | +| hasIcon | Boolean | `true` | Presence of social network icon in the button | +| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window | +| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | +| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | +| hasCounter | Boolean | `false` | Presence of a counter with the number of share | +| digitsCounter | Number | `0` | The number of decimal places in the counter | +| keyCounter | String | `''` | Counter ID (note, it must be unique if you use several buttons with a counter for the same social network on the same page) | ### Buttons without a counter > Twitter, Evernote, Hatena, Instapaper, LiveJournal -**Option**|**Type's**|**Default**|**Description** ------|-----|-----|----- -url|String|`document.location.href`|URL-address you want to share -description|String|`document.title`|Messages you want to share -btnText|String|`Twitter`, `Evernote`, `Hatena`, `Instapaper`, `LiveJournal`|Text to be written on your button -hasIcon|Boolean|`true`|Presence of social network icon in the button -isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window -modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" -modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" +| **Option** | **Type's** | **Default** | **Description** | +| ----------- | ---------- | ------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ | +| url | String | `document.location.href` | URL-address you want to share | +| description | String | `document.title` | Messages you want to share | +| btnText | String | `Twitter`, `Evernote`, `Hatena`, `Instapaper`, `LiveJournal` | Text to be written on your button | +| hasIcon | Boolean | `true` | Presence of social network icon in the button | +| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window | +| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | +| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | > Digg, Xing, Pocket -**Option**|**Type's**|**Default**|**Description** ------|-----|-----|----- -url|String|`document.location.href`|URL-address you want to share -btnText|String|`Digg`, `Xing`, `Pocket`|Text to be written on your button -hasIcon|Boolean|`true`|Presence of social network icon in the button -isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window -modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" -modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" +| **Option** | **Type's** | **Default** | **Description** | +| ----------- | ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ | +| url | String | `document.location.href` | URL-address you want to share | +| btnText | String | `Digg`, `Xing`, `Pocket` | Text to be written on your button | +| hasIcon | Boolean | `true` | Presence of social network icon in the button | +| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window | +| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | +| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | > Blogger -**Option**|**Type's**|**Default**|**Description** ------|-----|-----|----- -url|String|`document.location.href`|URL-address you want to share -description|String|`document.title`|Messages you want to share -title|String|`''`|Title you want to share -btnText|String|`Blogger`|Text to be written on your button -hasIcon|Boolean|`true`|Presence of social network icon in the button -isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window -modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" -modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" +| **Option** | **Type's** | **Default** | **Description** | +| ----------- | ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ | +| url | String | `document.location.href` | URL-address you want to share | +| description | String | `document.title` | Messages you want to share | +| title | String | `''` | Title you want to share | +| btnText | String | `Blogger` | Text to be written on your button | +| hasIcon | Boolean | `true` | Presence of social network icon in the button | +| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window | +| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | +| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | > Reddit, Renren -**Option**|**Type's**|**Default**|**Description** ------|-----|-----|----- -url|String|`document.location.href`|URL-address you want to share -title|String|`''`|Title you want to share -btnText|String|`Reddit`, `Renren`|Text to be written on your button -hasIcon|Boolean|`true`|Presence of social network icon in the button -isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window -modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" -modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" +| **Option** | **Type's** | **Default** | **Description** | +| ----------- | ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ | +| url | String | `document.location.href` | URL-address you want to share | +| title | String | `''` | Title you want to share | +| btnText | String | `Reddit`, `Renren` | Text to be written on your button | +| hasIcon | Boolean | `true` | Presence of social network icon in the button | +| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window | +| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | +| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | > Weibo -**Option**|**Type's**|**Default**|**Description** ------|-----|-----|----- -url|String|`document.location.href`|URL-address you want to share -description|String|`document.title`|Messages you want to share -picture|String|`''`|Picture you want to share -title|String|`''`|Title you want to share -btnText|String|`Weibo`|Text to be written on your button -hasIcon|Boolean|`true`|Presence of social network icon in the button -isBlank|Boolean|`true`|Open the "share on social networks" frame in a new window -modalWidth|Number|500|If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" -modalHeight|Number|500|If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" +| **Option** | **Type's** | **Default** | **Description** | +| ----------- | ---------- | ------------------------ | ------------------------------------------------------------------------------------------------------------------------ | +| url | String | `document.location.href` | URL-address you want to share | +| description | String | `document.title` | Messages you want to share | +| picture | String | `''` | Picture you want to share | +| title | String | `''` | Title you want to share | +| btnText | String | `Weibo` | Text to be written on your button | +| hasIcon | Boolean | `true` | Presence of social network icon in the button | +| isBlank | Boolean | `true` | Open the "share on social networks" frame in a new window | +| modalWidth | Number | 500 | If the property "isBlank" is set to `false`, you can set the `width` of the modal window the "share on social networks" | +| modalHeight | Number | 500 | If the property "isBlank" is set to `false`, you can set the `height` of the modal window the "share on social networks" | ### Buttons for instant messengers > Facebook -**Option**|**Type's**|**Default**|**Description** ------|-----|-----|----- -appID|String|`''`|A unique identifier for the application -url|String|`document.location.href`|URL-address you want to share -btnText|String|`Facebook`|Text to be written on your button -hasIcon|Boolean|`true`|Presence of social network icon in the button +| **Option** | **Type's** | **Default** | **Description** | +| ---------- | ---------- | ------------------------ | --------------------------------------------- | +| appID | String | `''` | A unique identifier for the application | +| url | String | `document.location.href` | URL-address you want to share | +| btnText | String | `Facebook` | Text to be written on your button | +| hasIcon | Boolean | `true` | Presence of social network icon in the button | > Viber, WhatsApp -**Option**|**Type's**|**Default**|**Description** ------|-----|-----|----- -url|String|`document.location.href`|URL-address you want to share -btnText|String|`Viber`, `WhatsApp`|Text to be written on your button -hasIcon|Boolean|`true`|Presence of social network icon in the button +| **Option** | **Type's** | **Default** | **Description** | +| ---------- | ---------- | ------------------------ | --------------------------------------------- | +| url | String | `document.location.href` | URL-address you want to share | +| btnText | String | `Viber`, `WhatsApp` | Text to be written on your button | +| hasIcon | Boolean | `true` | Presence of social network icon in the button | > Telegram -**Option**|**Type's**|**Default**|**Description** ------|-----|-----|----- -url|String|`document.location.href`|URL-address you want to share -description|String|`document.title`|Messages you want to share -btnText|String|`Telegram`|Text to be written on your button -hasIcon|Boolean|`true`|Presence of social network icon in the button +| **Option** | **Type's** | **Default** | **Description** | +| ----------- | ---------- | ------------------------ | --------------------------------------------- | +| url | String | `document.location.href` | URL-address you want to share | +| description | String | `document.title` | Messages you want to share | +| btnText | String | `Telegram` | Text to be written on your button | +| hasIcon | Boolean | `true` | Presence of social network icon in the button | ### Send a message via email > This isn't really a share button, this is a button that allows you to open the software to send an email message, but it may be useful for you 🙃 -**Option**|**Type's**|**Default**|**Description** ------|-----|-----|----- -url|String|`document.location.href`|URL-address you want to share -btnText|String|`Email`|Text to be written on your button -hasIcon|Boolean|`true`|Presence of social network icon in the button +| **Option** | **Type's** | **Default** | **Description** | +| ---------- | ---------- | ------------------------ | --------------------------------------------- | +| url | String | `document.location.href` | URL-address you want to share | +| btnText | String | `Email` | Text to be written on your button | +| hasIcon | Boolean | `true` | Presence of social network icon in the button | ### Full list of social networks @@ -257,10 +260,7 @@ hasIcon|Boolean|`true`|Presence of social network icon in the button ## Example ```html - + ``` Twitter button with icon @@ -268,10 +268,7 @@ hasIcon|Boolean|`true`|Presence of social network icon in the button [Live Demo](https://codesandbox.io/s/vvyjzw491l?fontsize=14) ```html -