Vue Social Sharing

A renderless components for sharing links on major social networks

Less than 2.5kb gzipped

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

Network properties

Networks

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:

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:

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

3.0.9 (2022-02-06)

• Fix LinkedIn URL

3.0.8 (2021-03-18)

• Fix npm

3.0.7 (2021-03-18)

• Fix dependencies

3.0.6 (2021-03-18)

• Add share to Messenger

3.0.5 (2021-02-15)

• Change SocialSharing nodes href attributes to javascript:void(0) to support Vue-router history
• Update LinkedIn sharing URL

3.0.4 (2020-11-25)

• Add href attribute to SocialSharing nodes with a tag for accessibility

3.0.3 (2020-10-24)

• Update Xing sharing url

3.0.2 (2020-10-07)

• Use a unique name for each network's popup window

3.0.1 (2020-10-06)

• Add props for popup size customization

3.0.0 (2020-10-02)

• Fix error triggered by popup when prevented by AdBlocker or mobile context

3.0.0-beta.11 (2020-06-05)

• Add share to Yammer
• Update Readme.md

3.0.0-beta.10 (2020-05-22)

• Update LinkedIn sharer URL
• Update Readme.md

3.0.0-beta.9 (2020-05-21)

• Fix wrong text displayed on Twitter when sharing without a TwitterUser

3.0.0-beta.8 (2020-05-20)

• Fix Twitter title duplicated

3.0.0-beta.7 (2020-05-19)

• 🐛Fix another error when no custom networks are used

3.0.0-beta.6 (2020-05-19)

• 🐛Fix error when no custom networks are used

3.0.0-beta.5 (2020-05-19)

• Add share to Baidu
• Add share to Buffer
• Add share to EverNote
• Add share to Flipboard
• Add share to HackerNews
• Add share to InstaPaper
• Add share to Pocket
• Add share to Quora
• Add share to StumbleUpon
• Add share to Tumblr
• Add share to Wordpress
• Add share to Xing
• Fix Whatsapp sharing link
• Reduce bundle size
• Simplify network schema in src/network.js
• Events now send the network key as the first parameter
• Improved Readme.md

3.0.0-beta.4 (2020-05-19)

• Make shared properties more consistent between networks
• Improved Readme.md

3.0.0-beta.3 (2020-05-17)

• Make ShareNetwork component tree shakable
• Fix IOS SMS sharing link
• Update Whatsapp sharing link

3.0.0-beta.2 (2020-05-16)

• Fix Nuxt support

3.0.0-beta.1 (2020-05-15)

• Complete rewrite of the package
• Updated Readme.md
• Only one component exported (ShareNetwork)
• New examples yarn run example
• Storybook stories yarn run storybook

2.4.7 (2019-11-07)

• Fix undefined popup error

2.4.6 (2019-08-11)

• Fix IOS Twitter sharing with empty hashtags, again

2.4.5 (2019-05-31)

• Fix IOS Twitter sharing with empty hashtags

2.4.4 (2019-05-29)

• Update Whatsapp share url to use API
• Fix IOS SMS sharing format (using ; instead of ?)
• Add tabindex attribute

2.4.3 (2019-04-09)

• Fix IE11 popup.window bug

2.4.2 (2019-02-21)

• Fix build

2.4.1 (2019-02-20)

• Fix issue #123

2.4.0 (2019-02-19)

• Fix facebook hashtags
• Move rollup-plugin-json to devDependencies
• Improve readme

2.3.4 (2019-02-11)

• Add support for facebook hashtags (PR #120)

2.3.3 (2017-12-11)

• Tag 2.3.3

2.3.2 (2017-12-04)

• Add Viber

2.3.1 (2017-12-03)

• Possibility to add custom networks or override existing ones

2.2.11 (2017-12-03)

• Merge #61 - Add local events
• Silently fail when trying to use a nonexistent network

2.2.10 (2017-10-09)

• Fix dist

2.2.9 (2017-10-09)

• Allow v-bind usage for classes and styles on the network component

2.2.8 (2017-10-05)

• Revert fix twitter sharing

2.2.7 (2017-10-03)

• Add link to SMS and Email sharing
• Fix twitter sharing (missing "via=")

2.2.6 (2017-09-29)

• Add SMS

2.2.5 (2017-08-30)

• Add Email

2.2.4 (2017-08-26)

• Add Odnoklassniki

2.2.3 (2017-06-21)

• Fix telegram sharing

2.2.2 (2017-06-19)

• Add Skype & Line

2.2.1 (2017-06-17)

• Add telegram

2.2.0 (2017-03-29)

• Internal methods refactor
• Rename social_shares_click event to social_shares_open
• Add social_shares_change and social_shares_close event

2.1.5 (2017-03-18)

• Vue 2.2.4 compatibility

2.1.4 (2017-03-18)

• Center popup on dual screen

2.1.3 (2017-03-18)

• Add Weibo and VK
• Refactor unit tests using loops
• Convert networks.js to json format (network.json)

2.1.2 (2017-03-18)

• Encode title / description / code to allow use of special chars

2.1.1 (2017-02-21)

• Update version

2.1.0 (2017-02-21)

• Use of span tag instead of a to prevent history change
• Fix event emission on $root instance

2.0.0 (2017-02-20)

• Add support for server side rendering

1.1.2 (2017-02-18)

• Add media option for pinterest

1.1.1 (2017-01-18)

• Twitter parameter via is now optional

1.1.0 (2017-01-18)

• Fix development build to avoid loading 2 vuejs instance on users production env
• Improve the use of the vue.js 2 API to respect the same component syntax used in v0.0.4

1.0.0 (2017-01-12)

• Migrate the package to Vue.js v2

0.0.4 (2016-11-03)

• Add twitter hashtag property
• Add title description and quote parameters for facebook share

0.0.3 (2016-11-01)

• Add property to fill twitter content

0.0.2 (2016-10-21)

• Small fixes