Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Alexandrshy/vue-share-buttons
🔗A set of social buttons for Vue.js
https://github.com/Alexandrshy/vue-share-buttons
component share share-buttons share-link social-buttons vue vue-components vue2 vuejs vuejs2
Last synced: 2 months ago
JSON representation
🔗A set of social buttons for Vue.js
- Host: GitHub
- URL: https://github.com/Alexandrshy/vue-share-buttons
- Owner: Alexandrshy
- License: mit
- Created: 2019-03-15T18:50:05.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-08-04T12:21:23.000Z (almost 2 years ago)
- Last Synced: 2024-03-24T22:01:13.447Z (3 months ago)
- Topics: component, share, share-buttons, share-link, social-buttons, vue, vue-components, vue2, vuejs, vuejs2
- Language: Vue
- Homepage:
- Size: 2.61 MB
- Stars: 51
- Watchers: 1
- Forks: 16
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Lists
- awesome-vue - vue-share-buttons - Vue.js component for placing buttons in your project using which you can share anything (Components & Libraries / UI Components)
- awesome-vue - vue-share-buttons - Vue.js component for placing buttons in your project using which you can share anything (Components & Libraries / UI Components)
- awesome-vue - vue-share-buttons - Vue.js component for placing buttons in your project using which you can share anything (Components & Libraries / UI Components)
- awesome-vue - vue-share-buttons - Vue.js component for placing buttons in your project using which you can share anything (Components & Libraries / UI Components)
- awesome-vue - vue-share-buttons - Vue.js component for placing buttons in your project using which you can share anything (Components & Libraries / UI Components)
- awesome-vue - vue-share-buttons - Vue.js component for placing buttons in your project using which you can share anything (Components & Libraries / UI Components)
- awesome-vue - vue-share-buttons - Vue.js component for placing buttons in your project using which you can share anything (Components & Libraries / UI Components)
- awesome-vue - vue-share-buttons - Vue.js component for placing buttons in your project using which you can share anything (Components & Libraries / UI Components)
- awesome-vue - vue-share-buttons - Vue.js component for placing buttons in your project using which you can share anything (Components & Libraries / UI Components)
- awesome-vue - vue-share-buttons - A set of social buttons for Vue.js ` 📝 a year ago` (UI Components [🔝](#readme))
- awesome-vue - vue-share-buttons - Vue.js component for placing buttons in your project using which you can share anything (UI Components / Social Sharing)
- awesome-vue - vue-share-buttons - Vue.js component for placing buttons in your project using which you can share anything (Components & Libraries / UI Components)
README
# 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](https://github.com/Alexandrshy/vue-share-buttons/issues/new) for me
## Menu
- [Installation](#installation)
- [Install using npm](#install-using-npm)
- [Install using Yarn](#install-using-yarn)
- [Icons](#icons)
- [Usage](#usage)
- [Import component](#import-component)
- [Add the button to your template](#add-the-button-to-your-template)
- [And we get the button](#and-we-get-the-button)
- [Options](#options)
- [Buttons with a counter](#buttons-with-a-counter)
- [Buttons without a counter](#buttons-without-a-counter)
- [Buttons for instant messengers](#buttons-for-instant-messengers)
- [Send a message via email](#send-a-message-via-email)
- [Full list of social networks](#full-list-of-social-networks)
- [Not worked](#not-worked)
- [Example](#example)
- [Author](#author)
- [Link](#link)
- [Roadmap](#roadmap)
- [License](#license)
## Installation
#### Install using npm
```bash
npm i vue-share-buttons
```
[Link to NPM](https://www.npmjs.com/package/vue-share-buttons)
#### Install using Yarn
```bash
yarn add vue-share-buttons
```
[Link to Yarn](https://yarn.pm/vue-share-buttons)
## Icons
For icons, I use [simpleicons](https://simpleicons.org/)
## 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
```js
import TwitterButton from "vue-share-buttons/src/components/TwitterButton";
const app = new Vue({
el: "#app",
components: {
TwitterButton,
},
});
```
#### Add the button to your template
```html
```
#### 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
```html
```
[Live Demo](https://codesandbox.io/s/vvyjzw491l?fontsize=14)
```html
```
[Live Demo](https://codesandbox.io/s/9149y00324?fontsize=14)
```html
```
[Live Demo](https://codesandbox.io/s/9149y00-cu6tf?fontsize=14)
```html
```
[Live Demo](https://codesandbox.io/s/y01j0my311?fontsize=14)
```html
```
[Live Demo](https://codesandbox.io/s/88yq86vzk2?fontsize=14)
```html
```
[Live Demo](https://codesandbox.io/s/qkk7k6m0q?fontsize=14)
## Author
This component was developed by [Alexander Shulaev](https://github.com/Alexandrshy) 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](https://simpleicons.org/)
## Roadmap
- Implement a workflow with automatic version update and automatic publication of changes in npm via GitHub action
## License
[The MIT License (MIT)](https://github.com/Alexandrshy/vue-share-buttons/blob/master/LICENSE.md)