Socket
Socket
Sign inDemoInstall

vue-share-buttons

Package Overview
Dependencies
Maintainers
1
Versions
15
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-share-buttons

🔗A set of social buttons for Vue.js


Version published
Weekly downloads
148
increased by1.37%
Maintainers
1
Weekly downloads
 
Created
Source

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

Link to NPM

Install using Yarn
yarn add vue-share-buttons

Link to Yarn

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 TwitteButton 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
vue-share-buttons-twitter

Options

Below are the options you can pass to create your own button.

Buttons with a counter

Facebook, LinkedIn, Odnoklassniki

OptionType'sDefaultDescription
urlStringdocument.location.hrefURL-address you want to share
descriptionStringdocument.titleMessages you want to share
btnTextStringFacebook, LinkedIn, Odnoklassniki, etc.Text to be written on your button
hasIconBooleantruePresence of social network icon in the button
isBlankBooleantrueOpen the "share on social networks" frame in a new window
modalWidthNumber500If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeightNumber500If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"
hasCounterBooleanfalsePresence of a counter with the number of share
digitsCounterNumber0The number of decimal places in the counter
keyCounterString''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

OptionType'sDefaultDescription
urlStringdocument.location.hrefURL-address you want to share
descriptionStringdocument.titleMessages you want to share
titleString''Title you want to share
btnTextStringTumblr, VkontakteText to be written on your button
hasIconBooleantruePresence of social network icon in the button
isBlankBooleantrueOpen the "share on social networks" frame in a new window
modalWidthNumber500If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeightNumber500If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"
hasCounterBooleanfalsePresence of a counter with the number of share
digitsCounterNumber0The number of decimal places in the counter
keyCounterString''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

OptionType'sDefaultDescription
urlStringdocument.location.hrefURL-address you want to share
descriptionStringdocument.titleMessages you want to share
pictureString''Picture you want to share
btnTextStringPinterestText to be written on your button
hasIconBooleantruePresence of social network icon in the button
isBlankBooleantrueOpen the "share on social networks" frame in a new window
modalWidthNumber500If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeightNumber500If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"
hasCounterBooleanfalsePresence of a counter with the number of share
digitsCounterNumber0The number of decimal places in the counter
keyCounterString''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

OptionType'sDefaultDescription
urlStringdocument.location.hrefURL-address you want to share
descriptionStringdocument.titleMessages you want to share
btnTextStringTwitter, Evernote, Hatena, Instapaper, LiveJournalText to be written on your button
hasIconBooleantruePresence of social network icon in the button
isBlankBooleantrueOpen the "share on social networks" frame in a new window
modalWidthNumber500If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeightNumber500If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"

Digg, Xing, Pocket

OptionType'sDefaultDescription
urlStringdocument.location.hrefURL-address you want to share
btnTextStringDigg, Xing, PocketText to be written on your button
hasIconBooleantruePresence of social network icon in the button
isBlankBooleantrueOpen the "share on social networks" frame in a new window
modalWidthNumber500If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeightNumber500If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"

Blogger

OptionType'sDefaultDescription
urlStringdocument.location.hrefURL-address you want to share
descriptionStringdocument.titleMessages you want to share
titleString''Title you want to share
btnTextStringBloggerText to be written on your button
hasIconBooleantruePresence of social network icon in the button
isBlankBooleantrueOpen the "share on social networks" frame in a new window
modalWidthNumber500If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeightNumber500If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"

Reddit, Renren

OptionType'sDefaultDescription
urlStringdocument.location.hrefURL-address you want to share
titleString''Title you want to share
btnTextStringReddit, RenrenText to be written on your button
hasIconBooleantruePresence of social network icon in the button
isBlankBooleantrueOpen the "share on social networks" frame in a new window
modalWidthNumber500If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeightNumber500If the property "isBlank" is set to false, you can set the height of the modal window the "share on social networks"

Weibo

OptionType'sDefaultDescription
urlStringdocument.location.hrefURL-address you want to share
descriptionStringdocument.titleMessages you want to share
pictureString''Picture you want to share
titleString''Title you want to share
btnTextStringWeiboText to be written on your button
hasIconBooleantruePresence of social network icon in the button
isBlankBooleantrueOpen the "share on social networks" frame in a new window
modalWidthNumber500If the property "isBlank" is set to false, you can set the width of the modal window the "share on social networks"
modalHeightNumber500If 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

OptionType'sDefaultDescription
appIDString''A unique identifier for the application
urlStringdocument.location.hrefURL-address you want to share
btnTextStringFacebookText to be written on your button
hasIconBooleantruePresence of social network icon in the button

Viber, WhatsApp

OptionType'sDefaultDescription
urlStringdocument.location.hrefURL-address you want to share
btnTextStringViber, WhatsAppText to be written on your button
hasIconBooleantruePresence of social network icon in the button

Telegram

OptionType'sDefaultDescription
urlStringdocument.location.hrefURL-address you want to share
descriptionStringdocument.titleMessages you want to share
btnTextStringTelegramText to be written on your button
hasIconBooleantruePresence 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 🙃

OptionType'sDefaultDescription
urlStringdocument.location.hrefURL-address you want to share
btnTextStringEmailText to be written on your button
hasIconBooleantruePresence 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
/>
Twitter button with icon

Live Demo

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

Live Demo

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

Live Demo

<twitter-button 
  class="share-button--circle share-button--outline"
  btnText
/>
Twitter outline and circle button with icon

Live Demo

<facebook-button 
  class="share-button--outline" 
  hasCounter
/>
Twitter outline button with icon and counter

Live Demo

<facebook-button 
  class="share-button--painted"
  url="https://github.com/"
  hasCounter
/>
Twitter painted button with icon and counter

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😊

SVG-icon by Simple Icons

License

The MIT License (MIT)

Keywords

FAQs

Package last updated on 09 Apr 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc