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

Overview

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.
popup.width Number Custom width of the popup window. Default to 626px.
popup.height Number Custom height of the popup window. Default to 426px.      
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 be 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]'
    }
  }],
]

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

Comments
  • Blocked a frame with origin <some https> from accessing a cross-origin frame

    Blocked a frame with origin from accessing a cross-origin frame

    > 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

    wontfix 
    opened by ra79sta 13
  • Share to Linkedin not working (desktop)

    Share to Linkedin not working (desktop)

    Hi, I'm currently using your component and it works very nice, but some months ago the Linkedin option is not working, it just says: Something went wrong. Refresh the page, I have everything configured well as the docs say.

    I have been looking for andI found that the sharing url that you open is in the following format: https://www.linkedin.com/shareArticle?url={url}&title={title}&summary={text}&source={provider}

    But the 2020 way to directly open a sharing window is: https://www.linkedin.com/sharing/share-offsite/?url={url}

    Can you please solve the issue? Or do you want me to do a PR?

    wontfix 
    opened by jonalxh 9
  • LinkedIn Sharing doesn't work

    LinkedIn Sharing doesn't work

    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?

    opened by Lyncis 9
  • Can I dynamically change buttons names in the template?

    Can I dynamically change buttons names in the template?

    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?

    opened by CodeLookBook 9
  • sharing by sms with iOs and iMessage

    sharing by sms with iOs and iMessage

    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

    opened by tpin85 8
  • network component only allows static class list

    network component only allows static class list

    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

    opened by tmorehouse 8
  • Unknown custom element: <ShareNetwork>

    Unknown custom element:

    : Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. How to solve this?

    main.js import VueSocialSharing from 'vue-social-sharing'; Vue.use( VueSocialSharing, ); and in component

    <ShareNetwork network="twitter" 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,javascript" twitterUser="youyuxi" > <i class="fab fah fa-lg fa-twitter"></i> <span>Share on Twitter</span> </ShareNetwork>

    bug wontfix 
    opened by gogs85 7
  • Facebook sharer url breaks

    Facebook sharer url breaks

    Hi guys. Currently I'm implementing the vue-social-sharing component on a project with Nuxt. My problem is if I don't set any hashtags, the facebook sharer url breaks. Have you test this?

    opened by angelgbi 7
  • Failed to mount component: template or render function not defined.

    Failed to mount component: template or render function not defined.

    Hi @nicolasbeauvais, today I try install vue-social-sharing to my project on vue-webpack template. But get this: [Vue warn]: Failed to mount component: template or render function not defined. And this is not related to Runtime-Compiler-vs-Runtime-only

    opened by fsanano 7
  • Using with nuxt.js - The client-side rendered virtual DOM tree is not matching server-rendered content.

    Using with nuxt.js - The client-side rendered virtual DOM tree is not matching server-rendered content.

    Hi!

    My configuration: nuxt.config.js:

      plugins: [
        { src: '~plugins/social.js', ssr: false },
      ],
    

    social.js:

    import Vue from 'vue'
    import SocialSharing from 'vue-social-sharing'
    
    Vue.use(SocialSharing)
    

    And then in a .vue file pasted <social-sharing url="https://vuejs.org/" inline-template>[...]

    When entering the page I get on the console:

    [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render. 
    

    I understand the error but don't know how to fix it.

    bug 
    opened by awronski 6
  • Cannot read property 'extend' of undefined

    Cannot read property 'extend' of undefined

    I'm getting this error when clicking on the share button.

    It works but it throws this error..

    My dependencies: "devDependencies": { "bootstrap-vue": "^0.16.1", "element-theme-default": "^1.3.4", "element-ui": "^1.2.8", "laravel-mix": "^0.8.3", "moment": "^2.18.1", "vue": "^2.1.10", "vue-blu": "^0.1.9", "vue-cookie-law": "^1.0.2", "vue-progressbar": "^0.7.1", "vue-resource": "^1.3.1", "vue-router": "^2.4.0", "vue-social-sharing": "^2.*", "vuex": "^2.2.1" }

    image

    As i said, it still works but it throws this strange error, i tryied to update my dependencies but im still having the same error...

    Thanks for you help!

    bug 
    opened by Ismaaa 6
  • Bump deep-object-diff from 1.1.7 to 1.1.9

    Bump deep-object-diff from 1.1.7 to 1.1.9

    Bumps deep-object-diff from 1.1.7 to 1.1.9.

    Release notes

    Sourced from deep-object-diff's releases.

    v1.1.9

    Vulnerability patch

    Details outlined here: #85. TLDR: The prototype of the returned diff object could be polluted but not globally on all objects.

    Fix: mattphillips/deep-object-diff#87

    Thanks @​Retr02332 for highlighting the issue and validating the fix.

    This vulnerability was introduced in https://github.com/mattphillips/deep-object-diff/releases/tag/v1.1.6

    v1.1.8

    Patch

    • Fix typings resolution when using TypeScript 4.7+ with ESM #83
    • improve return type for detailedDiff #72

    Credits

    Thanks @​Nitive and @​icholy for your PRs

    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 
    opened by dependabot[bot] 0
  • LinkedIn share on mobile opens the App but doesnt share content

    LinkedIn share on mobile opens the App but doesnt share content

    When I click to share via LinkedIn on mobile, it opens the App but doesn't open the sharing content. Is LinkedIn's sharing URL out of date?

    iOS: Opens the App but doesnt share content; Android: Opens the browser to share the content;

    opened by gnpedroso 0
  • Issue Uncaught DOMException: Permission denied to access property

    Issue Uncaught DOMException: Permission denied to access property "__v_isRef" on cross-origin object

    Hello.

    I was using this tutorial https://nicolasbeauvais.github.io/vue-social-sharing/?path=/story/vuesocialsharing--multiple-share-networks as example on my project, but I got the following error : "Uncaught DOMException: Permission denied to access property "__v_isRef" on cross-origin object"

    image

    At the ui level it seems that it is working but the console has the error previously shown

    data networks: [ { network: 'email', name: 'Email', icon: 'mdi-email-outline', color: '#333333', }, { network: 'facebook', name: 'Facebook', icon: 'mdi-facebook', color: '#1877f2', }, { network: 'linkedin', name: 'LinkedIn', icon: 'mdi-linkedin', color: '#007bb5', }, { network: 'skype', name: 'Skype', icon: 'mdi-skype-business', color: '#00aff0', }, { network: 'telegram', name: 'Telegram', icon: 'mdi-send-circle', color: '#0088cc', }, { network: 'tumblr', name: 'Tumblr', icon: 'mdi-alpha-t-box-outline', color: '#35465c', }, { network: 'twitter', name: 'Twitter', icon: 'mdi-twitter', color: '#1da1f2', }, { network: 'whatsapp', name: 'Whatsapp', icon: 'mdi-whatsapp', color: '#25d366', }, { network: 'wordpress', name: 'Wordpress', icon: 'mdi-wordpress', color: '#21759b', }, ],

            `{
                url: this.link,
                title: `Perfil de ${this.user.name}`,
                description: `BUO: Revolucioná la forma de certificar tus habilidades y experiencias`,
                quote: 'BUO: Revolucioná la forma de certificar tus habilidades y experiencias',
                hashtags: `Buo Shareable Link`,
            }`
    

    Template

    <ShareNetwork v-for="network in networks" :network="network.network" :key="network.network" :url="sharing.url" :title="sharing.title" :description="sharing.description" :quote="sharing.quote" :hashtags="sharing.hashtags" twitterUser="BuoSupport" > <v-tooltip top> <template v-slot:activator="{ on, attrs }"> <v-btn class="ma-2" fab x-small outlined :color="network.color" v-bind="attrs" v-on="on" > <v-icon :color="network.color"> {{ network.icon }} </v-icon> </v-btn> </template> <span>{{ network.network }}</span> </v-tooltip> </ShareNetwork>

    Version "vue": "^2.6.11", "vue-social-sharing": "^3.0.9",

    Browser

    Firefox 105

    Could you please help me and tell me how I could solve the problem?

    opened by pmadrigal95 0
  • Pinterest Share Button Can't Work After Closing the Tab Open (Mobile Safari)

    Pinterest Share Button Can't Work After Closing the Tab Open (Mobile Safari)

    After clicking Pinterest share button mobile safari, the browser start printing security error

    image

    I am thinking the way Pinterest share for mobile is like a modal popup, thinking whether we can have the option to choose between open new tab with staying in the same page. It is great if you have better solution to prevent the security error.

    Thank you!

    opened by tommy9690 0
Releases(v3.0.9)
Owner
Nicolas Beauvais
Full stack developer, PHP / Python / JavaScript - Marathon runner
Nicolas Beauvais
🔊 Vue component for social sharing of links - https://codesandbox.io/s/kk0mqj11lv

vue-socialmedia-share Vue component for social sharing vue-socialmedia-share is a vue component for sharing links to social networks Demo Features No

Mohit kumar Bajoria 66 Nov 24, 2022
🍿 Vue.js component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks. Powered by goodshare.js project.

?? vue-goodshare Vue.js component for share link to social networks and mobile messangers A simple way to share a link on the pages of your website in

Vic Shóstak 425 Nov 11, 2022
🧞‍♀️🧞‍♂️ One easy-to-use button component for Vue.js with 65+ social networks.

Documentation You can browse the documentation for Vue Social on the website. Installation npm install @growthbunker/vuesocial # Or if you prefer usi

Julien Le Coupanec 51 Oct 2, 2022
🔗A set of social buttons for Vue.js

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 net

Alexandr Shulaev 48 Nov 14, 2022
💬 Social media share buttons and counts for Vue.js.

Vue Socials ?? Social media share buttons and counts for Vue.js. Explore website » Key Features • Installation • Documentation • Browsers support • Li

Alexey Istomin 20 Nov 4, 2022
Test sobre el estilo social de relación interpersonal de acuerdo al modelo de Bolton.

estilos-sociales Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build

Francisco Marfull 0 Jan 9, 2022
Social login and authentication module for all typescripts projects which supports authentication with Google and Facebook.

Social Login for all Typescript Projects like Angular 2 & above, reactJS, VueJS etc .., Social login and authentication which supports authentication

Mariselvam 4 Aug 24, 2021
A Vue Picture Sharesheet Component heavily inspired by the Image Sharesheet in Apple's Newsroom

Vue Picture Sharesheet Compoenent vue-picture-sharesheet provides an easy and beautiful sharesheet when hovering over images. Currently supported main

onatcer 31 Nov 24, 2022
Vue component for Telegram passport

vue-telegram-passport is a Vue component for Telegram Passport

Viktor Chaptsev 5 Oct 7, 2022
Vue Component that lets you drop it into your existing project and get the benefits of Facebook Login quickly.

Vue Component that lets you drop it into your existing project and get the benefits of Facebook Login quickly.

Liran Cohen 55 Jul 6, 2022
SignIn or Signup with Facebook and Google using Vue without any external packages

Signup with Facebook / Google using Vue Handling SignUp or SignIn with Google and Facebook using Pure VueJS applications without any external package.

Jebasuthan 67 Oct 31, 2022
Vue-компонент для блока «Поделиться» от Яндекса

Vue Yandex Share Vue-компонент для блока «Поделиться» от Яндекса. Если разместить блок на вашем сайте, посетители смогут быстро публиковать в своих со

Alexey Litovchenko 4 Aug 6, 2022
Vue 3 (Typescript), Tailwind CSS, Headless UI

Vue 3 + Typescript + Vite This template should help get you started developing with Vue 3 and Typescript in Vite. The template uses Vue 3 <script setu

Rido Ananda 2 Mar 31, 2022
A Vue.js component for sharing links to social networks

vue-share-it A highly customizable Vue.js component for sharing links on social networks. Features Easy install Highly customizable Extensive document

Hemant Rai 20 Nov 24, 2022
🔊 Vue component for social sharing of links - https://codesandbox.io/s/kk0mqj11lv

vue-socialmedia-share Vue component for social sharing vue-socialmedia-share is a vue component for sharing links to social networks Demo Features No

Mohit kumar Bajoria 66 Nov 24, 2022
🍿 Vue.js component for social share. A simple way to share a link on the pages of your website in the most popular (and not so) social networks. Powered by goodshare.js project.

?? vue-goodshare Vue.js component for share link to social networks and mobile messangers A simple way to share a link on the pages of your website in

Vic Shóstak 425 Nov 11, 2022
Instant File Sharing powered by IPFS Networks. Build with Vue 3 and ViteJS

InstaShare Instant File Sharing Apps powered by IPFS Networks. Build with Vue 3 and ViteJS. Description InstaShare (Instant Share) is a simple web-bas

Ryan Aunur Rassyid 47 Aug 10, 2022
Instant File Sharing Apps powered by IPFS Networks Build with Vue 3 and ViteJS

InstaShare Instant File Sharing Apps powered by IPFS Networks. Build with Vue 3 and ViteJS. Description InstaShare (Instant Share) is a simple web-bas

Uvacoder 20 Aug 15, 2022
Share-button-links - Share buttons links for websites, blogs and more

Share Button Links Installation You can install using npm install share-button-l

Israel De Castro A. 14 Aug 7, 2022
🧞‍♀️🧞‍♂️ One easy-to-use button component for Vue.js with 65+ social networks.

Documentation You can browse the documentation for Vue Social on the website. Installation npm install @growthbunker/vuesocial # Or if you prefer usi

Julien Le Coupanec 51 Oct 2, 2022