diff --git a/README.md b/README.md index 65c4bcc..4a1f7d1 100644 --- a/README.md +++ b/README.md @@ -1 +1,330 @@ # vue-share-buttons + +> Vue component for placing buttons in your project using which you can share anything. If vue-share-buttons doesn't have a social network for you, just make a Pull request or [create new issue](https://github.com/Alexandrshy/vue-share-buttons/issues/new) for me + +## Menu + +- [Installation](#installation) + - [Install using npm](#install-using-npm) + - [Install using Yarn](#install-using-yarn) +- [Usage](#usage) + - [Import component](#import-component) + - [Add the button to your template](#add-the-button-to-your-template) + - [And we get the button](#and-we-get-the-button) +- [Options](#options) + - [Buttons with a counter](#buttons-with-a-counter) + - [Buttons without a counter](#buttons-without-a-counter) + - [Buttons for instant messengers](#buttons-for-instant-messengers) + - [Send a message via email](#send-a-message-via-email) + - [Full list of social networks](#full-list-of-social-networks) +- [Author](#author) +- [Link](#link) +- [License](#license) + +## Installation + +#### Install using npm + +```bash +npm i vue-share-buttons +``` +[Link to NPM](https://www.npmjs.com/package/vue-share-buttons) + +#### Install using Yarn + +```bash +yarn add vue-share-buttons +``` +[Link to Yarn](https://yarn.pm/vue-share-buttons) + +## 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: + +#### Import component + +```js +import TwitteButton from "vue-share-buttons/src/components/TwitterButton"; + +const app = new Vue({ + el: "#app", + components: { + TwitterButton + } +}); +``` + +#### Add the button to your template + +```html +
+ +
+``` + +#### And we get the button + +vue-share-buttons-twitter + +## Options + +Below are the options you can pass to create your own button. + +### Buttons with a counter + +> 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) + +> 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) + +> 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) + +### 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" + +> 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" + +> 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" + +> 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" + +> 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" + +### 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 + +> 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 + +> 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 + +### 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 + +### Full list of social networks + +- Blogger +- Digg +- Evernote +- Facebook +- Hatena +- Instapaper +- LinkedIn +- LiveJournal +- Odnoklassniki +- Pinterest +- Pocket +- Reddit +- Renren +- Tumblr +- Twitter +- Vkontakte +- Weibo +- Xing +- Telegram +- Viber +- WhatsApp + +## Example + +```html + +``` + +Twitter button with icon + +[Live Demo](https://codesandbox.io/s/vvyjzw491l?fontsize=14) + +```html + +``` + +Twitter circle button + +[Live Demo](https://codesandbox.io/s/9149y00324?fontsize=14) + +```html +