目次
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/vue-social-sharing@2.4.7/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>
サンプル
さいごに
主要なソーシャルネットワークを共有できるリンクコンポーネントライブラリでした。
今日はこの辺でー