Alexandr Shulaev
6 years ago
committed by
GitHub
1 changed files with 329 additions and 0 deletions
@ -1 +1,330 @@
|
||||
# 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