alexandrshy/vue-share-buttons

🔗A set of social buttons for Vue.js

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
  • Install using Yarn
• Icons
• Usage
  • Import component
  • Add the button to your template
  • And we get the button
• Options
  • Buttons with a counter
  • Buttons without a counter
  • Buttons for instant messengers
  • Send a message via email
  • Full list of social networks
  • Not worked
• Example
• Author
• Link
• Roadmap
• License

Installation

Install using npm

npm i vue-share-buttons

Link to NPM

Install using Yarn

yarn add vue-share-buttons

Link to Yarn

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

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

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

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

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

License

The MIT License (MIT)

vue-share-buttons's Issues

Cannot read property 'share_count' of undefined

Expected Behavior

All the examples should work without errors

Actual Behavior

Some of the examples does not work and return the error below:

TypeError
Cannot read property 'share_count' of undefined
window.<computed>
https://88yq86vzk2.csb.app/node_modules/vue-share-buttons/src/components/FacebookButton.vue?3fb6e918:77:36
(anonymous function)
https://graph.facebook.com/?id=https%3A%2F%2F88yq86vzk2.csb.app%2F&callback=Facebook_172:1:6

Steps to Reproduce the Problem

From one of the examples at https://www.npmjs.com/package/vue-share-buttons , the one with <facebook-button class="share-button--outline" hasCounter />:

1. https://codesandbox.io/s/88yq86vzk2?fontsize=14&file=/src/main.js

Request For Medium Button

This is not acutually a problem but a feature request.
I Want a Button for Medium, it will really go well.
Thanks

Whatsappbutton wrong documentation

Code from WhatsAppButton.vue

props: {
    shareUrl: { type: String, default: getDocumentHref },
    btnText: { type: String, default: "WhatsApp" },
    hasIcon: { type: Boolean, default: true }
  },

Issue

the whatsapp button has the property shareUrl instead of the url property like almost every other share button.

In the README it says that it has the url property. This is wrong as the code above shows

So in the README the documentation for Whatsapp should be changed to shareUrl

Need to wrap each button in span?

Hello @Alexandrshy

I tried to implement your lib in a project of mine. I've noticed, I had to wrap each button in a span to work correctly. Without, only the first button was displayed. Any idea what is causing this?

My code:

    <facebook-button
        isBlank="false"
        btnText="Post"
    />
    <twitter-button
        isBlank="false"
        btnText="Tweet"
    />
    <reddit-button
        isBlank="false"
        btnText="Post"
    />

Expected Behavior

Actual Behavior

Work around:

        <span>
          <facebook-button
            isBlank="false"
            btnText="Post"
        />
        </span>
        <span>
          <twitter-button
            isBlank="false"
            btnText="Tweet"
        />
        </span>
        <span>
          <reddit-button
            isBlank="false"
            btnText="Post"
        />
        </span>

Maybe I'm doing something wrong? While it looks pretty straight forward I'm not sure...

Cheers,
Peter

This is not work in nuxt

Expected Behavior

Work in nuxtjs

Actual Behavior

Doesn't work in nuxtjs, display error Cannot find module

Steps to Reproduce the Problem

IsBlank doesn't work proper - all open in the same new window

Hello @Alexandrshy

all isBlank seem to open in the same (new) window.

Expected Behavior

Open a new window for each link.

Actual Behavior

Opens one window and all follow are opened in the same window.

Peter

Non unique ID when using multiple buttons

Expected Behavior

Multiple of same button will have unique aria ids

Actual Behavior

Steps to Reproduce the Problem

1. Add 2 or more of the same button and run a lighthouse check

Additional info:

Fixed this myself with intention to create a PR but not authorized so see https://github.com/Eric-Brennan/vue-share-buttons for fix

Wrong file name

Expected Behavior

File path: src/VueShareButtons.vue

Actual Behavior

File path: src/VueShareBttons.vue

Instagram social network

Add share to Instagram.