# 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)
- [Roadmap](#roadmap)
- [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">
  /></twitter-button
>
```

<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/)

## Roadmap

- Implement a workflow with automatic version update and automatic publication of changes in npm via GitHub action

## License

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