# 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)
- [Icons](#icons)
- [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)
- [Example](#example)
- [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)

## Icons

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: 

#### Import component

```js
import TwitterButton from "vue-share-buttons/src/components/TwitterButton";

const app = new Vue({
  el: "#app",
  components: {
    TwitterButton
  }
});
```

#### Add the button to your template

```html
<div id="app">
  <twitter-button
    shareUrl="https://github.com/"
    shareDescription="GitHub is where people build software."
  />
</div>
```

#### And we get the button

<img width="118" alt="vue-share-buttons-twitter" src="https://user-images.githubusercontent.com/14329906/55573133-50549f00-571a-11e9-9dcb-6aa14e9a04e8.png">

## 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 
  v-bind:isBlank="false"
  btnText
/>
```

<img width="38" alt="Twitter button with icon" src="https://user-images.githubusercontent.com/14329906/55610855-df9e9880-5794-11e9-8fe2-8c0fd86df43d.png">

[Live Demo](https://codesandbox.io/s/vvyjzw491l?fontsize=14)

```html
<twitter-button 
  class="share-button--circle"
  v-bind:hasIcon="false"
/>
```

<img width="84" alt="Twitter circle button" src="https://user-images.githubusercontent.com/14329906/55610809-c564ba80-5794-11e9-9d85-1130f7ad0881.png">

[Live Demo](https://codesandbox.io/s/9149y00324?fontsize=14)

```html
<twitter-button 
  v-bind:hasIcon="false"
  class="share-button--outline">
/>
```

<img width="85" alt="Twitter outline button without icon" src="https://user-images.githubusercontent.com/14329906/55610923-09f05600-5795-11e9-89c3-13a50ab397eb.png">

[Live Demo]()

```html
<twitter-button 
  class="share-button--circle share-button--outline"
  btnText
/>
```

<img width="45" alt="Twitter outline and circle button with icon" src="https://user-images.githubusercontent.com/14329906/55610998-44f28980-5795-11e9-8c73-6c29249b8a17.png">

[Live Demo](https://codesandbox.io/s/y01j0my311?fontsize=14)

```html
<facebook-button 
  class="share-button--outline" 
  hasCounter
/>
```

<img width="184" alt="Twitter outline button with icon and counter" src="https://user-images.githubusercontent.com/14329906/55611429-88012c80-5796-11e9-9c71-2bf20e52f95f.png">

[Live Demo](https://codesandbox.io/s/88yq86vzk2?fontsize=14)

```html
<facebook-button 
  class="share-button--painted"
  url="https://github.com/"
  hasCounter
/>
```

<img width="74" alt="Twitter painted button with icon and counter" src="https://user-images.githubusercontent.com/14329906/55611270-1aed9700-5796-11e9-963f-182b572471b3.png">

[Live Demo](https://codesandbox.io/s/qkk7k6m0q?fontsize=14)

## Author

This component was developed by [Alexander Shulaev](https://github.com/Alexandrshy) for personal purposes and submitted to Open Source, if it will help someone I will be very happy about it😊

## Link

SVG-icon by [Simple Icons](https://simpleicons.org/)

## License

[The MIT License (MIT)](https://github.com/Alexandrshy/vue-share-buttons/blob/master/LICENSE.md)