nicolasbeauvais / vue-social-sharing

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

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

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	✔️	❌	❌
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:

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/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

vue-social-sharing's Issues

Update the demo to 2.0

Facebook Messenger

Hi, any chance of including send to messenger?

https://developers.facebook.com/docs/plugins/send-button#example

Thanks!

please add weibo support

just add below code in src/network.js

weibo: {
    sharer: 'http://service.weibo.com/share/share.php?url=@url&title=@title',
    type: 'popup'
  }

thanks.

😃

Is it possible to know if the user has complete/cancelled the facebook share action ?

Hello,

All is in the title, is there a way to actually know if the user has completed/cancelled the facebook share action ?

Thanks

stopped working dynamic facebook title and description

Tell me, only I have stopped working dynamic facebook title and description? Or is this a problem with updates for facebook Open Graph API?

P.S. Checked the changes in your project

Via NPM version still 2.3.1

Hello. Thank you for adding Viber, but via npm - version is still 2.3.1 and viber not available (((

please add ok (ok.ru) support

https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&st.shareUrl={url}&st.comments={comments}

[feature] Fire an event when share has been posted

Hi,

Is it possible to add an event when the share has been validated?

Thanks for your work dude!

how to change dynamically field of social-sharing ?

find
thanks regards

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.

Facebook Send button

Facebook (being the main social media outlet) has many ways to share. One of the many is via a SEND button - https://developers.facebook.com/docs/plugins/send-button

This way a link can be shared directly with a friend.

Would be nice if this came out of the box with the plugin.

Good work with this so far btw, very useful.

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

Server side rendering support for Vue 2.x

While using it with SSR in Vue 2.x window is not defined error is thrown.

Unknown custom element: <network>

First of all this module looks promising to me! But when I try to use it I'm getting the following error in the Chrome developer console:

[Vue warn]: Unknown custom element: <network> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I created a component named 'social-sharing' and included the vue social sharing in my app.js. In my component I used the syntax from the example that resulted in the error above. Any idea?

I'm on Vue 2 and I installed vue social sharing 1.1.2 via npm. Thanks!!

Can we get an interface to change the sharer url prefix for each social network?

For example, the prefix for pinterest is hardcoded as

https://pinterest.com/pin/create/button/?url=@url&media=@media&description=@title

However, this url will complain that there is no image for the pin if I don't pass a media value.

There is another URL which is https://www.pinterest.com/pin/find/?url=@url
It can load all the images in the page and let customer to choose one image and then create the pin.
This fits our use case and it exactly what we want.

But if I use this module, I find there is no way that I can change the hardcoded url to the "find" url above.

How do I get callbacks for success and failure sharing on 'Facebook Sharing'?

         function(response) {
              if (response && !response.error_message) {
                // response.post_id
                alert('share it!')
              } else {
                alert('cancel.')
              }
          }

The Facebook API introduces the above.

What's in this library?

Please add Instagram

Thanks! :) 👍

social_shares_click

Can you explain please what is this line for this.$emit('social_shares_click', network, this.url);
If I understood the purpose, it must be rather:
this.$root.$emit('social_shares_click', network, this.url);
to be able to use it as:
this.$root.$on('social_shares_click', callback)

Make it work without an root element?

Hi,

I have a structure like this and would like to remove the root in the component to not break the styling with my non-social settings. Is this possible somehow? When I try I can only see my first component and others are not there. Maybe we could make it possible to initiate my social-sharing elements in javascript instead or remove the requirement for a root element. Thanks for an awesome library.

<div class="settings">
    <div class="setting" @click="editProduct"> <!--v-if="isCuratorProduct(product)">-->
        <svg class="setting-icon edit" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <polygon points="16 3 21 8 8 21 3 21 3 16 16 3" fill="none" stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
        </svg>
    </div>
    <div class="setting" @click="deleteProduct" v-if="isCuratorProduct(product)">
        <svg class="setting-icon trash" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <polyline points="3 6 5 6 21 6"/>
            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
        </svg>
    </div>
    <div class="setting" @click="editProductLinks" v-if="isCuratorProduct(product)">
        <svg class="setting-icon link" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" fill="none" stroke="#000" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2"/>
        </svg>
    </div>

    <social-sharing url="test.com"
        :title="this.shortTitle"
        :description="this.shortDescription"
        quote="Cool!"
        hashtags="quality, product, curated"
        twitter-user="test"
        v-cloak inline-template>
        <div> <!-- WANT TO REMOVE THIS ROOT -->
            <div class="setting facebook-share">
                <network network="facebook">
                    <i class="facebook f icon"></i>
                </network>
            </div>
            <div class="setting pinterest-share">
                <network network="pinterest">
                    <i class="pinterest icon"></i>
                </network>
            </div>
            <div class="setting twitter-share">
                <network network="twitter">
                    <i class="twitter icon"></i>
                </network>
            </div>
        </div>
    </social-sharing>
</div>

Use vue-social-sharing & Vuetify

Hi Nicolas,
Thank you for your great library.

There's a way to use your library with Vuetify? I don't understand how to mix 2 different component. I want to take vuetify appearance and your logic.

Sorry if my question is a part of vuejs logic, but in this real case i'm lost.

EXAMPLE: https://jsfiddle.net/menteora/1vgudqxw/4/
VUETIFY BUTTON COMPONENT: https://vuetifyjs.com/components/buttons

Update SocialSharing when route changed

Hello,

I would like to use SocialSharing on different components, but the url used is the one of the first view rendered.

Example : If i land to the homepage, then i navigate to a single project, the share url will be the homepage one and not the single project one.

Is it a way to update/refresh/unmount-mount SocialSharing in this situation ?

Thanks a lot.

Unknown custom element

Hi there,

I would like to add social network custom element icons in the Network tap i.e.

<network network="facebook">
  <facebook-icon size="30"></facebook-icon>
</network>

I import the cusotm element correctly. When i use it outside of network it works. Any help?

Email mailto: link

Any chance of also adding a regular old, but well formed email link?

Many thanks!

Error when network isn't in the list

Hello,

I encounter an error when the social network does't exist:
TypeError: Cannot read property 'type' of undefined
is it possible that it silently fail instead of trowing an error?

thanks in advance

Please add Viber

Thank you.

dynamic list of networks

Hello,

its not possible for me to loop the network list dynamically. how is it possible to read out the list of networks from p. e. vuex, and then render the list through v-for?

thanks for help

update Demo to 2.1.1

mailto option should include URL in message body

Sharing just the title and description is kind of useless. The URL needs to be in the email body, just before the description.

The URL would need to be percent encoded, followed by a percent encoded CRLF, then followed by the description

Ability to extends networks list

Please add method to push custom networks to default network list.

Add Image to social sharing

hello i would like to know how to add an image in the social sharing since it's not described on the documentation

How to detect window popup are opened or closed?

Hi, sorry i'm newbie in vue.js and javascript, i need to add some stuff when the social sharing popup window are closed.
I need to detect the popup are closed, then i execute some function :)

Use component inside network comp.

Is it possible to use other components inside the network component?
e.g.

<network network="facebook">
    <my-custom-icon></my-custom-icon>
</network>

Share with URL, title, and description not shown title and description.

Expectation : URL was shown and there is content with title and description too

Dynamic props not working with webpack and single page components?

I have a SPA and in the socialshare component of my app I'm using vue-social-sharing plugin.
I have set inline-template and the props that I specify in the social-sharing tag are ok.
Inside the component I'm not able to reference any property of the vue component itself (for example my icons width and height that are stored as a data property and isMobileRequest that is a computed property).
Do you know if are there issues with this kind of setup or should it work as expected?

Google+

How to update after data in component loads?

Hi love the plugin so far.

I want to update the twitter title, etc after the data from my vue-resource call loads.

In another plugin (vue-head) I can emit an .updateHead() method that will update the plugin to essentially resync the data.

Is there anything I can do here?

Thanks so much!

Impossible to change &noParse param to false

Can't to set &noParse param in VK share url to false value.

How to share to facebook with featured Image?

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?

Cannot use special characters

When using <social-sharing :title="'C#'"> or :title="'C++'", the characters + or # are not there in the sharing windows for both twitter and facebook.

Styling network span

I'm trying to style the network span here and it's not working. How can I style it?

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" }

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!

Socialize's counter

Nicolas, you did an amazing job. Thank you.
Of course, the beautiful example should be socialize.js. Can you add styles similar to them? Because for this moment people use more socialize.js only because of styles and counters.

update npm to the new updated 2.1.0

Dynamic binding of url not working on facebook share

Want to bind url property to a different page, and setting it via (v-bind:url ="shareUrl"). Its works on twitter but not on Facebook

Don't Work twitter-user... just appear "via @"

Support to pass custom data/methods

It would be nice to pass custom methods from my component to social sharing components. Let's say I have a custom click condition or something that needs to be trigged on the network tag.

I could do something like this:

<social-sharing url="example.com" :customMethods="myCustomMethods" inline-template>
   <network @click="customMethods.doSomethingCustom()">
   [....]

im a vue newbie so maybe that's not the best approach

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

Possibility to add image caption

hello, i just started using these library and i wanted to ask if there is a possibility of adding an image.

Popup doesn't open in center on dual monitor setup.

If I open popup on my main screen its working absolutely fine. However, the same popup opens on the left of screen.

I have used this as a solution for a similar problem: http://stackoverflow.com/questions/4068373/center-a-popup-window-on-screen/32261263.