Alexandr Shulaev
6 years ago
committed by
GitHub
1 changed files with 329 additions and 0 deletions
@ -1 +1,330 @@ |
|||||||
# vue-share-buttons |
# 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) |
||||||
|
- [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) |
||||||
|
- [Author](#author) |
||||||
|
- [Link](#link) |
||||||
|
- [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) |
||||||
|
|
||||||
|
## 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 TwitteButton from "vue-share-buttons/src/components/TwitterButton"; |
||||||
|
|
||||||
|
const app = new Vue({ |
||||||
|
el: "#app", |
||||||
|
components: { |
||||||
|
TwitterButton |
||||||
|
} |
||||||
|
}); |
||||||
|
``` |
||||||
|
|
||||||
|
#### Add the button to your template |
||||||
|
|
||||||
|
```html |
||||||
|
<div id="app"> |
||||||
|
<twitter-button |
||||||
|
shareUrl="https://github.com/" |
||||||
|
shareDescription="GitHub is where people build software." |
||||||
|
/> |
||||||
|
</div> |
||||||
|
``` |
||||||
|
|
||||||
|
#### And we get the button |
||||||
|
|
||||||
|
<img width="118" alt="vue-share-buttons-twitter" src="https://user-images.githubusercontent.com/14329906/55573133-50549f00-571a-11e9-9dcb-6aa14e9a04e8.png"> |
||||||
|
|
||||||
|
## 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 |
||||||
|
|
||||||
|
```html |
||||||
|
<twitter-button |
||||||
|
v-bind:isBlank="false" |
||||||
|
btnText |
||||||
|
/> |
||||||
|
``` |
||||||
|
|
||||||
|
<img width="38" alt="Twitter button with icon" src="https://user-images.githubusercontent.com/14329906/55610855-df9e9880-5794-11e9-8fe2-8c0fd86df43d.png"> |
||||||
|
|
||||||
|
[Live Demo](https://codesandbox.io/s/vvyjzw491l?fontsize=14) |
||||||
|
|
||||||
|
```html |
||||||
|
<twitter-button |
||||||
|
class="share-button--circle" |
||||||
|
v-bind:hasIcon="false" |
||||||
|
/> |
||||||
|
``` |
||||||
|
|
||||||
|
<img width="84" alt="Twitter circle button" src="https://user-images.githubusercontent.com/14329906/55610809-c564ba80-5794-11e9-9d85-1130f7ad0881.png"> |
||||||
|
|
||||||
|
[Live Demo](https://codesandbox.io/s/9149y00324?fontsize=14) |
||||||
|
|
||||||
|
```html |
||||||
|
<twitter-button |
||||||
|
v-bind:hasIcon="false" |
||||||
|
class="share-button--outline"> |
||||||
|
/> |
||||||
|
``` |
||||||
|
|
||||||
|
<img width="85" alt="Twitter outline button without icon" src="https://user-images.githubusercontent.com/14329906/55610923-09f05600-5795-11e9-89c3-13a50ab397eb.png"> |
||||||
|
|
||||||
|
[Live Demo]() |
||||||
|
|
||||||
|
```html |
||||||
|
<twitter-button |
||||||
|
class="share-button--circle share-button--outline" |
||||||
|
btnText |
||||||
|
/> |
||||||
|
``` |
||||||
|
|
||||||
|
<img width="45" alt="Twitter outline and circle button with icon" src="https://user-images.githubusercontent.com/14329906/55610998-44f28980-5795-11e9-8c73-6c29249b8a17.png"> |
||||||
|
|
||||||
|
[Live Demo](https://codesandbox.io/s/y01j0my311?fontsize=14) |
||||||
|
|
||||||
|
```html |
||||||
|
<facebook-button |
||||||
|
class="share-button--outline" |
||||||
|
hasCounter |
||||||
|
/> |
||||||
|
``` |
||||||
|
|
||||||
|
<img width="184" alt="Twitter outline button with icon and counter" src="https://user-images.githubusercontent.com/14329906/55611429-88012c80-5796-11e9-9c71-2bf20e52f95f.png"> |
||||||
|
|
||||||
|
[Live Demo](https://codesandbox.io/s/88yq86vzk2?fontsize=14) |
||||||
|
|
||||||
|
```html |
||||||
|
<facebook-button |
||||||
|
class="share-button--painted" |
||||||
|
url="https://github.com/" |
||||||
|
hasCounter |
||||||
|
/> |
||||||
|
``` |
||||||
|
|
||||||
|
<img width="74" alt="Twitter painted button with icon and counter" src="https://user-images.githubusercontent.com/14329906/55611270-1aed9700-5796-11e9-963f-182b572471b3.png"> |
||||||
|
|
||||||
|
[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/) |
||||||
|
|
||||||
|
## License |
||||||
|
|
||||||
|
[The MIT License (MIT)](https://github.com/Alexandrshy/vue-share-buttons/blob/master/LICENSE.md) |
||||||
|
|||||||
Loading…
Reference in new issue