lunar-social-sharing

Vue Social Sharing

A Vue.js component for sharing links on major social networks. Less than 2kb gzipped.

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 and Facebook).
`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>