vue-share-buttons

# 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) - [Not worked](#not-worked) - [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 url="https://github.com/" description="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 | **Option** | **Type's** | **Default** | **Description** | |---------------|------------|------------------------------|-----------------------------------------------------------------------------------------------------------------------------| | url | String | `document.location.href` | URL-address you want to share | | btnText | String | `Facebook`, `LinkedIn`, 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) | | customIcon | String | `''` | Custom imag | > 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 | `Odnoklassniki` | 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 | | customIcon | String | `''` | Custom image | | sharePic | String | `''` | Link to image instead of favicon | > Tumblr | **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) | | customIcon | String | `''` | Custom image | > 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 | | sharePic | String | `''` | Link to image instead of favicon | | customIcon | String | `''` | Custom image | > 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) | | customIcon | String | `''` | Custom image | ### Buttons without a counter > Twitter, 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`, `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" | | customIcon | String | `''` | Custom image | > 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" | | customIcon | String | `''` | Custom image | > 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" | | customIcon | String | `''` | Custom image | > 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" | | customIcon | String | `''` | Custom image | > 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" | | customIcon | String | `''` | Custom image | ### Buttons for instant messengers > Facebook Messenger | **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 | | customIcon | String | `''` | Custom image | > 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 | | customIcon | String | `''` | Custom image | > 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 | | customIcon | String | `''` | Custom image | ### 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 | | subject | String | `document.title` | Email subject | | customIcon | String | `''` | Custom image | ### Full list of social networks - Blogger - Digg - Email - Facebook - Facebook Messenger - Hatena - Instapaper - LinkedIn - LiveJournal - Odnoklassniki - Pinterest - Pocket - Reddit - Renren - Telegram - Tumblr - Twitter - Viber - Vkontakte - Weibo - WhatsApp - Xing ### Not worked - Facebook counter - LinkedIn counter ## 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](https://codesandbox.io/s/9149y00-cu6tf?fontsize=14) ```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)