vss

vue-social-sharing

A renderless Vue.js component for sharing links to social networks, compatible with SSR

Showing:

Popularity

Downloads/wk

45.9K

GitHub Stars

1.2K

Maintenance

Last Commit

4mos ago

Contributors

38

Package

Dependencies

0

License

MIT

Type Definitions

Built-In

Tree-Shakeable

No?

Categories

Reviews

Average Rating

4.0/51
Read All Reviews

Top Feedback

1Great Documentation

Readme

Vue Social Sharing

Less than 2.5kb gzipped


Release Build Status Downloads License Vue 1 Vue 2 gzip size


Demo

What is a renderless component?

Renderless components give you the highest possible control over your markup and styling. This means that vue-social-sharing ship with minimal HTML and no CSS to let you adapt the look and feel of the components to your needs. You can learn more about renderless components in this blog article by @adamwathan.

Understanding social sharing

Before using this package it is important to understand how Social Networks handle sharing links on their platform. When you share a link on a Social Network, the Social Network will crawl the link to detect Open Graph meta tags. If you share links that do not contain Open Graph meta tags, the Social Network will not be able to display a rich content for your link. You can refer to the Available properties section of the documentation to check which Social Network accept which properties without Open Graph tags.

Installation

# Yarn
yarn add vue-social-sharing

# NPM
npm install --save vue-social-sharing

Vue 3 support

Vue 3 support is available in Alpha build, you can try it with the following command:

# Yarn
yarn add vue-social-sharing@next

# NPM
npm install --save vue-social-sharing@next

Remember that this is an alpha build, not all feature are available yet and you will certainly encounter some bugs.

Usage

Loading the library

Browserify / Webpack
import VueSocialSharing from 'vue-social-sharing'

Vue.use(VueSocialSharing);
Nuxt
// In your nuxt.config.js file:
modules: [
  'vue-social-sharing/nuxt'
]
HTML
<script src="/dist/vue-social-sharing.js"></script>

Using the Share Network component

<ShareNetwork
    network="facebook"
    url="https://news.vuejs.org/issues/180"
    title="Say hi to Vite! A brand new, extremely fast development setup for Vue."
    description="This week, I’d like to introduce you to 'Vite', which means 'Fast'. It’s a brand new development setup created by Evan You."
    quote="The hot reload is so fast it\'s near instant. - Evan You"
    hashtags="vuejs,vite"
  >
    Share on Facebook
</ShareNetwork>

Available networks and properties

The url is the only property required for all networks.

General properties
NameData TypeDescription
tagStringHTML tag used to render the network component. Default to "a" tag.
popup.widthNumberCustom width of the popup window. Default to 626px.
popup.heightNumberCustom height of the popup window. Default to 426px.      
Network properties
PropTypeDescription
urlStringURL to share.
titleStringSharing title (if available).
descriptionStringSharing description (if available).
quoteStringFacebook quote (Facebook only).
hashtagsStringA list of comma-separated hashtags (Twitter and Facebook).
twitter-userStringTwitter user (Twitter only).
mediaStringUrl to a media (Pinterest, VK, Weibo, and Wordpress).
Networks
NetworkurltitledescriptionExtras/Comments
Baidu✔️✔️
Buffer✔️✔️
Email✔️✔️✔️
EverNote✔️✔️
Facebook✔️✔️✔️hashtags A list of comma-separated hashtags, only the first one will be used.
quote Facebook quote.
FlipBoard✔️✔️
HackerNews✔️✔️
InstaPaper✔️✔️✔️
Line✔️✔️✔️
LinkedIn✔️
Messenger✔️
Odnoklassniki✔️✔️
Pinterest✔️✔️media URL of an image describing the content.
Pocket✔️✔️
Reddit✔️✔️
Skype✔️✔️✔️
SMS✔️✔️✔️
StumbleUpon✔️✔️
Telegram✔️✔️✔️
Tumblr✔️✔️✔️
Twitter✔️✔️hashtags A list of comma-separated hashtags.
twitter-user Twitter user to mention.
Viber✔️✔️✔️
VK✔️✔️✔️media URL of an image describing the content.
Weibo✔️✔️media URL of an image describing the content.
WhatsApp✔️✔️✔️
Wordpress✔️✔️✔️media URL of an image describing the content.
Xing✔️✔️
Yammer✔️✔️✔️

For the networks: Line, Skype, SMS, Telegram, Viber, WhatsApp and Yammer; the shared content is a string of the form: "$title $url $description"

Available events

Events that are emitted on the vue $root instance:

NameDataDescription
share_network_openNetwork name, shared urlFired when a sharing popup is open
share_network_changeNetwork name, shared urlFired when the user open a new sharing popup while another is already open
share_network_closeNetwork name, shared urlFired when a sharing popup is closed or changed by another popup

You can listen to a vue-social-sharing $root event by using the following code:

Vue.$root.$on('share_network_open', function (network, url) {
  // your event code
});

Events that are emitted on the local vue-social-sharing instance:

NameDataDescription
openNetwork name, shared urlFired when a sharing popup is open
changeNetwork name, shared urlFired when the user open a new sharing popup while another is already open
closeNetwork name, shared urlFired when a sharing popup is closed or changed by another popup

You can listen to a ShareNetwork local event by using the following code:

<ShareNetwork @open="open" @change="change" @close="close" />

Note that the share_network_close event will not be fired for the WhatsApp, SMS and Email sharers.

Extending the network list

In version 3.x you can extend and override the list of available networks. You can see a working example of the feature in the examples/index.js file:

import Vue from 'vue'
import VueSocialSharing from '@/vue-social-sharing'

Vue.use(VueSocialSharing, {
  networks: {
    fakeblock: 'https://fakeblock.com/share?url=@url&title=@title'
  }
})

new Vue({
  el: '#app',
})

Extending the network list in Nuxt

You can extend the list of available networks directly in your nuxt.config.js file:

modules: [
  ['vue-social-sharing/nuxt', {
    networks: {
      fakeblock: 'https://fakeblock.com/share?url=@url&title=@title'
    }
  }],
]

Customizing the popup window size

If needed, you can set a custom width and height for the popup window:

<ShareNetwork :popup="{width: 400, height: 200}" />

Feature request

Feel free to open an issue to ask for a new social network support.

Changelog

Detailed changes for each release can be found in CHANGELOG.md.

Issues

Please make sure to read the Issue Reporting Checklist before opening an issue. Issues not conforming to the guidelines may be closed immediately.

Contribution

Please make sure to read the Contributing Guide before making a pull request.

License

MIT

Rate & Review

Great Documentation1
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Mohammad Mustakim HassanBangladesh10 Ratings0 Reviews
5 months ago
Athav1 Rating0 Reviews
9 months ago
Great Documentation

Alternatives

No alternatives found

Tutorials

No tutorials found
Add a tutorial