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
npm i vue-share-buttons
yarn add vue-share-buttons
For icons, I use simpleicons
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 TwitterButton from "vue-share-buttons/src/components/TwitterButton";
const app = new Vue({
el: "#app",
components: {
TwitterButton,
},
});
<div id="app">
<twitter-button
url="https://github.com/"
description="GitHub is where people build software."
/>
</div>
Below are the options you can pass to create your own button.
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 |
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 |
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 |
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 |
- Blogger
- Digg
- Facebook Messenger
- Hatena
- Instapaper
- LiveJournal
- Odnoklassniki
- Renren
- Telegram
- Tumblr
- Viber
- Vkontakte
- Facebook counter
- LinkedIn counter
<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
/>
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๐
SVG-icon by Simple Icons
- Implement a workflow with automatic version update and automatic publication of changes in npm via GitHub action