【Vue.js】Vue.jsアプリケーションにSNSシェアボタンを導入する【Facabook/Twitter/Hatena】
今回は、Vue.jsを使って作成したアプリケーションにFacebook,Twitter,Hatenaのシェアやブックマークボタンを設置する方法を解説します。
それぞれ公式サイトで用意されたボタンなどを使うこともできますが、ここでは自分で作成する方法で実装します。
公式サイトで用意されている方法については以下を参照して下さい。
シェアボタン - ソーシャルプラグイン - ドキュメンテーション - 開発者向けFacebook
Tweet Button — Twitter Developers
はてなブックマークボタンの作成・設置について - はてなブックマーク
また、ここではページタイトルやメタタグのdescriptionが動的に変更される実装が既にあるということを前提に進めてきますのでご注意下さい。
Vue.jsを使ってアプリケーションで動的にページタイトルを変更する方法は以下のページを参照して下さい。
ogタグについても適切に設定されているものとして進めます。
元となる環境
ここではvuecliを使って作成したVue.js + webpackのアプリケーションを使います。
この環境構築に関しては以下のページをご覧ください。
解説のためにこの環境を使いますが、この環境とは異なる環境でも実装方法に大きな違いはありませんので、ご自分の環境に合わせて読み替えていただければと思います。
例えば、ここでは以下のようなディレクトリ構成であるとして解説を進めます。
src/
├── App.vue
├── assets
├── components
│ ├── Home.vue
│ ├── Page1.vue
│ └── Page2.vue
├── main.js
└── router
└── index.js
3つのコンポーネント(Home,Page1,Page2)を用意していて、vue-routerでそれらの切り替えをします。
そして、以下のページで解説している方法のいずれかを利用して、ページタイトルやdescriptionを動的に変更しましょう。
早速シェアボタンなどを実装しますが、注意点が2点ほどあります。
画像はご自分で用意して下さい
シェアボタンなどに使用するボタンはご自分で用意をお願いします。
この際に各サービスの利用規約などをよく読み、規約違反にならないように注意してご利用ください。
規約違反にならないように画像利用をする
実装箇所
上記の例ではApp.vueに実装しますが、常に使用されるコンポーネント内であればどこでも実装可能です。
例えば、共通ヘッダーを実装している場合はそのヘッダーコンポーネント内でも実装可能です。
また単一ファイルコンポーネントを使っていない場合も同様で、共通で使用されるコンポーネント内で実装しましょう。
Vueインスタンス作成箇所での記述でもOKです。
もちろんSNSシェアボタンだけをコンポーネントとして切り出すのもいいと思います。
共通で使われる箇所に実装する
念のため、実装前のApp.vueの内容を確認しておきましょう。
<template> <div id="app"> <!-- 画面切り替え用のリンク --> <router-link to="/">home</router-link> <router-link to="/page1">page1</router-link> <router-link to="/page2">page2</router-link> <!-- vue-routerでの画面切り替え --> <router-view/> <!-- 以下にシェアボタン追加 --> </div> </template> <script> export default { name: 'App' } </script>
スタイルは省略しました。ここに実装を加えていきましょう。
Facebookのシェアボタン実装方法
ではFacebookのシェアボタンを実装していきます。
シェア用のurl
まずはFacebook用のシェア用urlを作成します。シェアするためのurlは以下を使います。
Facebookの場合は、このurlの後ろにシェアしたいURLを貼り付けます。
これをApp.vueで組み立てましょう。
シェア用のurlを保持するデータと作成するメソッドを実装します。
<script> export default { name: 'App', data : function(){ return { // Facebookのシェア用URL 空でもOK fbUrl : '', } }, methods : { /** * シェア用のURLを作成します。 */ createSnsUrl : function(){ // 現在のurlをエンコード var url = encodeURIComponent(location.href); // Facebook用のurl作成 this.fbUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + url; } } } </script>
続いて、このurlを使ってボタンを設置しましょう。
ボタン設置
<template> <div id="app"> <!-- 画面切り替え用のリンク --> <router-link to="/">home</router-link> <router-link to="/page1">page1</router-link> <router-link to="/page2">page2</router-link> <!-- vue-routerでの画面切り替え --> <router-view/> <!-- 以下にシェアボタン追加 --> <ul> <!-- Facebook --> <li> <a :href="fbUrl" target="_blank"><img src="fb.png"></a> </li> </ul> </div> </template>
hrefに先ほど作成したurlをバインディングします。
これで完成です。Facebook場合は、ローカル環境だとうまく動かなかったの注意して下さい。
以下のような画面のエラーが出ました。
Twitterのシェアボタン実装方法
続いてTwitterです。
シェア用のurl
まずはTwitter用のシェア用urlを作成します。シェアするためのurlは以下を使います。
Twitterの場合は、このurlの後ろに表示したい文言、ハッシュタグ、シェアしたいURLを追記します。
https://twitter.com/intent/tweet?text=文言&hashtags=ハッシュタグ&url=シェアしたいURL
シェア用のurlを保持するデータを追加し、先程作成したメソッドにtwitter分も追加します。
Facebookの記述は邪魔なので省略します。
<script> export default { name: 'App', data : function(){ return { // Twitterのシェア用URL 空でもOK twUrl : '', } }, methods : { /** * シェア用のURLを作成します。 */ createSnsUrl : function(){ // 現在のurlをエンコード var url = encodeURIComponent(location.href); // ページ文言(タイトルとかdescription) ここではdescriptionを使用 var txt = encodeURIComponent(document.querySelector("meta[name='description']").getAttribute('content'));; // Twitter用のurl作成 ハッシュタグもtxtを使用 this.twUrl = 'https://twitter.com/intent/tweet?text=' txt + '&hashtags=' + txt + '&url=' + url; } } } </script>
これでシェア用のURLが作成されました
ボタン設置
こちらはFacebookと同様の実装です。
<template> <div id="app"> <!-- 画面切り替え用のリンク --> <router-link to="/">home</router-link> <router-link to="/page1">page1</router-link> <router-link to="/page2">page2</router-link> <!-- vue-routerでの画面切り替え --> <router-view/> <!-- 以下にシェアボタン追加 --> <ul> <!-- Twitter --> <li> <a :href="twUrl" target="_blank"><img src="tw.png"></a> </li> </ul> </div> </template>
はてなブックマークボタンの実装方法
続いてはてブの実装です。
シェア用のurl
はてブ用のシェア用urlを作成します。シェアするためのurlは以下を使います。
はてブの場合は、このurlの後ろに表示したい文言、シェアしたいURLを追記します。
https://b.hatena.ne.jp/add?mode=confirm&title=文言&url=シェアしたいURL
シェア用のurlを保持するデータを追加し、先程作成したメソッドにtwitter分も追加します。
FacebookやTwitterの記述は邪魔なので省略します。
<script> export default { name: 'App', data : function(){ return { // Twitterのシェア用URL 空でもOK hbUrl : '', } }, methods : { /** * シェア用のURLを作成します。 */ createSnsUrl : function(){ // 現在のurlをエンコード var url = encodeURIComponent(location.href); // ページ文言(タイトルとかdescription) ここではdescriptionを使用 var txt = encodeURIComponent(document.querySelector("meta[name='description']").getAttribute('content'));; // Twitter用のurl作成 ハッシュタグもtxtを使用 this.hbUrl = 'https://b.hatena.ne.jp/add?mode=confirm&title=' txt + '&url=' + url; } } } </script>
これでシェア用のURLが作成されました
ボタン設置
ボタンの設置は先ほど同様です。
<template> <div id="app"> <!-- 画面切り替え用のリンク --> <router-link to="/">home</router-link> <router-link to="/page1">page1</router-link> <router-link to="/page2">page2</router-link> <!-- vue-routerでの画面切り替え --> <router-view/> <!-- 以下にシェアボタン追加 --> <ul> <!-- はてブ --> <li> <a :href="hbUrl" target="_blank"><img src="hb.png"></a> </li> </ul> </div> </template>
あとは、上記で作成したメソッドを呼び出して終わりです。
最後に
作成したcreateSnsUrl( )を呼び出します。
呼び出す箇所は、ページ初期表示時(mounted)とページ切り替え時(ルートウォッチャー)です。
以下のようにします。
<script> export default { name: 'App', data : function(){ return { // 省略 } }, methods : { /** * シェア用のURLを作成します。 */ createSnsUrl : function(){ // 省略 } }, mounted : { // 初期表示時 this.createSnsUrl(); }, watch: { // 画面切り替え時 '$route' (to, from) { this.createSnsUrl(); } } } </script>
これで完成です。
ページタイトルやメタタグの上書きが終わってからこのメソッドを呼ぶようにしないと、正しくタイトルなどが反映されないので注意して下さい。
以上で終わります。
