A Vue.js component for sharing links to social networks, work with Vue.js 1.X and 2.X
Branch: master
Clone or download
Latest commit 2965741 Feb 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config Use rollup json parser Mar 18, 2017
dist Tag 2.3.4 Feb 10, 2019
examples Add viber Dec 4, 2017
src Tag 2.3.4 Feb 10, 2019
test Fix tests Feb 11, 2019
.babelrc Initial commit Oct 20, 2016
.eslintrc Center popup on dual screen Mar 18, 2017
.gitignore Remove yarn.lock file Oct 22, 2016
.npmignore Initial commit Oct 20, 2016
.travis.yml Update travis node version Apr 6, 2018
CHANGELOG.md Tag 2.3.4 Feb 10, 2019
CODE_OF_CONDUCT.md Create CODE_OF_CONDUCT.md Jun 23, 2017
CONTRIBUTING.md Update md files Oct 21, 2016
LICENSE Initial commit Oct 20, 2016
README.md Update README.md (#115) Dec 10, 2018
bower.json Tag 2.3.4 Feb 10, 2019
package-lock.json fix facebook hashtag (#120) Feb 10, 2019
package.json Tag 2.3.4 Feb 10, 2019

README.md

vue-social-sharing


Release Build Status Coverage Status Downloads License vue1 vue2

A Vue.js component for sharing links to social networks

For Vue.js prior to < V2 use vue-social-sharing v0.x
For SSR and Vue.js 2 support use vue-social-sharing v2.x

Demo

Installation

# Yarn
yarn add vue-social-sharing

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

# Bower
bower install vue-social-sharing

Usage

Loading the library

Browserify / Webpack
var SocialSharing = require('vue-social-sharing');

Vue.use(SocialSharing);
HTML
<script src="/dist/vue-social-sharing.min.js"></script>

Using the social sharing component

 <social-sharing url="https://vuejs.org/"
                      title="The Progressive JavaScript Framework"
                      description="Intuitive, Fast and Composable MVVM for building interactive interfaces."
                      quote="Vue is a progressive framework for building user interfaces."
                      hashtags="vuejs,javascript,framework"
                      twitter-user="vuejs"
                      inline-template>
  <div>
      <network network="email">
          <i class="fa fa-envelope"></i> Email
      </network>
      <network network="facebook">
        <i class="fa fa-facebook"></i> Facebook
      </network>
      <network network="googleplus">
        <i class="fa fa-google-plus"></i> Google +
      </network>
      <network network="line">
        <i class="fa fa-line"></i> Line
      </network>
      <network network="linkedin">
        <i class="fa fa-linkedin"></i> LinkedIn
      </network>
      <network network="odnoklassniki">
        <i class="fa fa-odnoklassniki"></i> Odnoklassniki
      </network>
      <network network="pinterest">
        <i class="fa fa-pinterest"></i> Pinterest
      </network>
      <network network="reddit">
        <i class="fa fa-reddit"></i> Reddit
      </network>
      <network network="skype">
        <i class="fa fa-skype"></i> Skype
      </network>
      <network network="sms">
        <i class="fa fa-commenting-o"></i> SMS
      </network>
      <network network="telegram">
        <i class="fa fa-telegram"></i> Telegram
      </network>
      <network network="twitter">
        <i class="fa fa-twitter"></i> Twitter
      </network>
      <network network="vk">
        <i class="fa fa-vk"></i> VKontakte
      </network>
      <network network="weibo">
        <i class="fa fa-weibo"></i> Weibo
      </network> 
      <network network="whatsapp">
        <i class="fa fa-whatsapp"></i> Whatsapp
      </network>
  </div>
</social-sharing>

Available properties

List of available props to use in the component:

Prop Data Type Default Description
url String current URL to share.
title String Sharing title (when available).
description String Sharing description (when available).
quote String Facebook quote (Facebook only).
hashtags String A list of comma-separated hashtags (Twitter only).
twitter-user String Twitter user (Twitter only).
media String Url to a media (Pinterest only).
network-tag String "span" Tag the network component should render.

Available events

Events are emitted on the vue $root instance:

Name Data Description
social_shares_open Network object, shared url Fired when a sharing popup is open
social_shares_change Network object, shared url Fired when the user open a new sharing popup while another is already open
social_shares_close Network object, 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('social_shares_open', function (network, url) {
  // your event code
});

And on the Local Vue-social-sharing instance:

Name Data Description
open Network object, shared url Fired when a sharing popup is open
change Network object, shared url Fired when the user open a new sharing popup while another is already open
close Network object, shared url Fired when a sharing popup is closed or changed by another popup

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

<some-component>
    <social-sharing @open="open()" @change="change()" @close="close()">
    </social-sharing>
</some-component>

Note that the social_shares_close event is not fired for the Whatsapp, SMS and Email sharers.

Extending the network list

Since version 2.3.1 you can extend and override the list of available networks by passing the additional networks as attribute. You can see a working example of the feature in the examples/vue2-example.html file:

<social-sharing :networks="overriddenNetworks" inline-template>
    <div>
        <network network="custom">
            Custom network
        </network>
    </div>
</social-sharing>

<script>
    ...
    
    new Vue({
      data: {
        overriddenNetworks: {
          "custom": {
            "sharer": "https://mycustomdomain.com",
            "type": "popup"
          },
        }
      }
    });
</script>

There are two available network types:

Type Effect
popup Open the sharing link in a new popup
direct Open directly the sharing link (suitable for mobile apps sharing, emails, sms, ...)

Feature request

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

Changelog

Details changes for each release are documented in the 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