A social network button component for vue.js

vue-share-buttons

Vue component for placing buttons in your project using which you can share anything.

Installation

Install using npm

npm i vue-share-buttons

Install using Yarn

yarn add vue-share-buttons

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
    shareUrl="https://github.com/"
    shareDescription="GitHub is where people build software."
  />
</div>

And we get the button

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

<twitter-button v-bind:isBlank="false" btnText />

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

Author

Alexander Shulaev

GitHub

https://github.com/Alexandrshy/vue-share-buttons