主要なソーシャルネットワークをリンク共有する「vue-social-sharing」

2019年12月24日

vue-social-sharingとは

vue-social-sharingは、主要なソーシャルネットワークを共有できるリンクコンポーネントライブラリです。

TwitterやFacebookなどはもちろんLineやSkypeなども備えています。

ライブラリは非常に軽く、驚異の2kb未満を誇っています。

環境

Vue	2.6.10
vue-social-sharing	2.4.7

インストール

以下のnpm、yarn、CDNを使ってインストールします。

npm

npm install --save vue-social-sharing

yarn

yarn add vue-social-sharing

CDN

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-social-sharing.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

gitリポジトリは以下から取得できます。

https://github.com/nicolasbeauvais/vue-social-sharing

導入手順

1. ライブラリの取り込み

（1）webpack等の場合 [注意]モジュール版は未検証です。

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

（2）WEBページの場合

const SocialSharing  = window['VueSocialSharing'];

2.メソッドを設定

上記で取得したSocialSharingを Vue.use に取り込みます。

Vue.use(SocialSharing);

new Vue({
  el: '#app'
});

3. テンプレートを準備

<social-sharing> で <network> を囲みます。

social-sharing のプロパティにソーシャルの情報を設定します。
プロパティの設定はこちらを参照

network の network プロパティにソーシャル情報を設定します。

今回はソーシャルアイコンにfontawesomeを使用しています。

<div id="app">
  <social-sharing id="social" url="https://www.kabanoki.net/"
                      title="主要なソーシャルネットワークをリンク共有する「vue-social-sharing」|カバの樹"
                      description="vue-social-sharingは、主要なソーシャルネットワークを共有できるリンクコンポーネントライブラリです。"
                      quote="vue-social-sharingは、主要なソーシャルネットワークを共有できるリンクコンポーネントライブラリです。"
                      hashtags="カバの樹,vue-social-sharing,vuejs,javascript,framework"
                      twitter-user="dikkbsw"
                      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>
</div>