Awesome
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 for me
Menu
Installation
Install using npm
npm i vue-share-buttons
Install using Yarn
yarn add vue-share-buttons
Icons
For icons, I use simpleicons
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
import TwitterButton from "vue-share-buttons/src/components/TwitterButton";
const app = new Vue({
el: "#app",
components: {
TwitterButton,
},
});
Add the button to your template
<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 |
| 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 |
| 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
- Facebook Messenger
- Hatena
- Instapaper
- LiveJournal
- Odnoklassniki
- Renren
- Telegram
- Tumblr
- Viber
- Vkontakte
Not worked
- Facebook counter
- LinkedIn counter
Example
<twitter-button v-bind:isBlank="false" btnText />
<twitter-button class="share-button--circle" v-bind:hasIcon="false" />
<twitter-button v-bind:hasIcon="false" class="share-button--outline" />
<twitter-button class="share-button--circle share-button--outline" btnText />
<facebook-button class="share-button--outline" hasCounter />
<facebook-button
class="share-button--painted"
url="https://github.com/"
hasCounter
/>
Author
This component was developed by Alexander Shulaev 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
Roadmap
- Implement a workflow with automatic version update and automatic publication of changes in npm via GitHub action