Vuejs-Vue social sharing v3.0.8: vue-social-sharing - A renderless Vue.js component for sharing links to social networks, compatible with SSR

icon
Latest Release: v3.0.8

Vue Social Sharing

A renderless components for sharing links on major social networks

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

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
Name Data Type Description
tag String HTML tag used to render the network component. Default to "a" tag.
Network properties
Prop Type Description
url String URL to share.
title String Sharing title (if available).
description String Sharing description (if available).
quote String Facebook quote (Facebook only).
hashtags String A list of comma-separated hashtags (Twitter and Facebook).
twitter-user String Twitter user (Twitter only).
media String Url to a media (Pinterest, VK, Weibo, and Wordpress).
Networks
Network url title description Extras/Comments
Baidu ✔️ ✔️
Buffer ✔️ ✔️
Email ✔️ ✔️ ✔️
EverNote ✔️ ✔️
Facebook ✔️ ✔️ ✔️ hashtags A list of comma-separated hashtags, only the first one will used.
quote Facebook quote.
FlipBoard ✔️ ✔️
HackerNews ✔️ ✔️
InstaPaper ✔️ ✔️ ✔️
Line ✔️ ✔️ ✔️
LinkedIn ✔️
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:

Name Data Description
share_network_open Network name, shared url Fired when a sharing popup is open
share_network_change Network name, shared url Fired when the user open a new sharing popup while another is already open
share_network_close Network name, shared url Fired 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:

Name Data Description
open Network name, shared url Fired when a sharing popup is open
change Network name, shared url Fired when the user open a new sharing popup while another is already open
close Network name, shared url Fired 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/[email protected]&[email protected]'
  }
})

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/[email protected]&[email protected]'
    }
  }],
]

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

Comments

  • Incorrect Skype URL
    Incorrect Skype URL

    Aug 20, 2021

    Currently Skype url parameter is malformed:

    https://web.skype.com/[email protected]%0D%[email protected]%0D%[email protected]
    

    There should be 2 parameters, url and text:

    https://web.skype.com/[email protected]&[email protected]%0D%[email protected]%0D%[email protected]
    
    Reply
  • Blocked a frame with origin <some https> from accessing a cross-origin frame
    Blocked a frame with origin from accessing a cross-origin frame

    Sep 14, 2021

    > Uncaught DOMException: Blocked a frame with origin https://ter.com/ from accessing a cross-origin frame.
    >     at Re (https:/ter/js/chunk-vendors.328909a9.js:102:83397)
    >     at Object.get (https://ter/js/chunk-vendors.328909a9.js:102:78690)
    >     at Object.get (https://ter/js/chunk-vendors.328909a9.js:102:118066)
    >     at https://ter/js/chunk-vendors.328909a9.js:120:45774
    > Re @ reactivity.esm-bundler.js:962
    > (anonymous) @ reactivity.esm-bundler.js:438
    > get @ runtime-core.esm-bundler.js:6242
    > (anonymous) @ vue-social-sharing.js:1
    > setInterval (async)
    > share @ vue-social-sharing.js:1
    > onclick @ vue-social-sharing.js:1
    

    I am using Vue 3. What ever social network I share except twitter I get this error in console. Is anyone knows the solution for this problem @nicolasbeauvais

    Reply
  • it still renders an `<a>` tag by default. it's not renderless ?
    it still renders an `` tag by default. it's not renderless ?

    Jan 10, 2022

    I am not sure if I've misunderstood something.

    Based on the article on renderless components, a renderless component is not supposed to have any HTML on its own.

    <!-- Parent/Consumer -->
    <renderless-component-example>
      <h1 slot-scope="{ exampleProp }">
        Hello {{ exampleProp }}!
      </h1>
    </renderless-component-example>
    
    <!-- Renders: -->
    <h1>Hello universe!</h1>
    

    But this vue-social-sharing component still renders an <a> tag by default.

    Am I missing something? How can I avoid the default <a> and make it renderless?

    Reply
  • Bump shelljs from 0.8.4 to 0.8.5
    Bump shelljs from 0.8.4 to 0.8.5

    Jan 15, 2022

    Bumps shelljs from 0.8.4 to 0.8.5.

    Release notes

    Sourced from shelljs's releases.

    v0.8.5

    This was a small security fix for #1058.

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • Bump follow-redirects from 1.13.3 to 1.14.7
    Bump follow-redirects from 1.13.3 to 1.14.7

    Jan 15, 2022

    Bumps follow-redirects from 1.13.3 to 1.14.7.

    Commits
    • 2ede36d Release version 1.14.7 of the npm package.
    • 8b347cb Drop Cookie header across domains.
    • 6f5029a Release version 1.14.6 of the npm package.
    • af706be Ignore null headers.
    • d01ab7a Release version 1.14.5 of the npm package.
    • 40052ea Make compatible with Node 17.
    • 86f7572 Fix: clear internal timer on request abort to avoid leakage
    • 2e1eaf0 Keep Authorization header on subdomain redirects.
    • 2ad9e82 Carry over Host header on relative redirects (#172)
    • 77e2a58 Release version 1.14.4 of the npm package.
    • Additional commits viewable in compare view

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    Reply
  • network component only allows static class list
    network component only allows static class list

    Oct 7, 2017

    the Network component only allows static class lists (i.e. a static string). If providing a class list via a computed property (v-bind:class=".."), no classes get applied:

    Works:

    <network class="foo bar" network="twitter">...</network>
    

    Does not work:

    <network :class="['foo', 'bar']" network="twitter">...</network>
    

    This PR fixes the function <network> component by dealing with both staticClass and class properties

    Reply
  • sharing by sms with iOs and iMessage
    sharing by sms with iOs and iMessage

    Apr 11, 2019

    Hi, Sharing by sms is in trouble on iOs and iMessage. Work fine on android. The 'description' param is push into the recipients phones numbers. You can see in screenshot the issue in iMessage.

    Capture d’écran 2019-04-11 à 10 59 53

    Thanks

    Reply
  • Can I dynamically change buttons names in the template?
    Can I dynamically change buttons names in the template?

    Jul 15, 2017

    Hello. First off all, Thank you for your 'vue-social-sharing'.

    Question: I have multi-language app. Pleas tell, is there any possibility to change buttons names dynamically?

    Reply
  • LinkedIn Sharing doesn't work
    LinkedIn Sharing doesn't work

    Aug 16, 2018

    LinkedIn sharing doesn't provide any result. It opens an empty window, all the content is lost. I tried this on different browsers and met this problem on every one of them.

    image

    Sharing of the same content on Facebook, Twitter and Telegram works well. Are there any possible solutions to this problem?

    Reply
  • Unknown custom element: <ShareNetwork> - did you register the component correctly?
    Unknown custom element: - did you register the component correctly?

    Jun 11, 2020

    when i use my vue component that show in error

    Reply
  • vue 3 support?
    vue 3 support?

    Mar 19, 2021

    could it support vue 3 ?

    app.use(VueSocialSharing) ?

    wontfix 
    Reply