Nuxt.jsで作成したWebサイトやアプリ内に、外部SNSシェアボタンを作成する方法について、この記事では書いています。
Nuxt.jsで外部SNSシェアボタンを作成する
今回は、「Facebook・Twiiter・LINE」のシェアボタンを作っていきます。
外部SNSシェアボタン用のコンポーネントを作成
外部SNSシェアボタン用のコンポーネントを作成します。components/common配下にSnsShareButton.vueファイルを作成していきます。
<template>
<div>
<div>
<h2>SNSシェア</h2>
<ul>
<!-- Twitter -->
<li>
<a :href="this.twitterURL" target="_blank">
<span><img v-lazy="require('~/assets/images/twitter.png')" alt="Twitter"></span>
<span>ツイート</span>
</a>
</li>
<!-- Facebook -->
<li>
<a :href="this.facebookURL" target="_blank">
<span><img v-lazy="require('~/assets/images/facebook.png')" alt="Facebook"></span>
<span>シェア</span>
</a>
</li>
<!-- LINE -->
<li>
<a :href="this.lineURL" target="_blank">
<span><img v-lazy="require('~/assets/images/line.png')" alt="LINE"></span>
<span>送る</span>
</a>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
name: "SnsShareButton",
props: {
text: String,
hashTag: String
},
computed: {
url() {
return `https://ja.nuxtjs.org${this.$route.path}`;
},
textAndHashTag() {
return encodeURIComponent(`${this.text} ${this.hashTag}`);
},
content() {
return encodeURIComponent(`${this.text} ${this.url}`);
},
twitterURL() {
return `https://twitter.com/intent/tweet?url=${this.url}&text=${this.textAndHashTag}`;
},
facebookURL() {
return `https://www.facebook.com/sharer/sharer.php?u=${this.url}`;
},
lineURL() {
return `https://line.me/R/msg/text/?${this.content}`;
}
}
}
</script>
今回は、computed(算出プロパティ)にて、「Twitter・Facebook・LINE」のURLを生成し、aタグのhref属性にURLを渡しています。
Twitterシェア
<!-- Twitter -->
<li>
<a :href="this.twitterURL" target="_blank">
<span><img v-lazy="require('~/assets/images/twitter.png')" alt="Twitter"></span>
<span>ツイート</span>
</a>
</li>
twitterURL() {
return `https://twitter.com/intent/tweet?url=${this.url}&text=${this.textAndHashTag}`;
},
Twitterに関しては、投稿文とハッシュタグをつけてシェアさせたいので、propsには、text(投稿文)とhashTag(ハッシュタグ)を記述しています。
textとhashTagに関しては、親コンポーネントから以下のように記述しています。今後他で使うことになり、投稿文やハッシュタグが違うものになることも考え、親コンポーネントから子コンポーネントに値を渡しています。
index.vue
<sns-share-button text="nuxtアプリ" hashTag="#nuxt"></sns-share-button>
Twitterの画像に関しては、遅延読み込みを行いたいので、v-lazyを使っています。詳細は下記の記事を参考に。
Facebookシェア
<!-- Facebook -->
<li>
<a :href="this.facebookURL" target="_blank">
<span><img v-lazy="require('~/assets/images/facebook.png')" alt="Facebook"></span>
<span>シェア</span>
</a>
</li>
facebookURL() {
return `https://www.facebook.com/sharer/sharer.php?u=${this.url}`;
},
Facebookに関しては、Twitterのように投稿文を渡すことができなかったので、URLのみ渡しています。
LINEシェア
<!-- LINE -->
<li>
<a :href="this.lineURL" target="_blank">
<span><img v-lazy="require('~/assets/images/line.png')" alt="LINE"></span>
<span>送る</span>
</a>
</li>
lineURL() {
return `https://line.me/R/msg/text/?${this.content}`;
}
LINEでは、投稿文とURLを渡しています。
ただし、この場合PCブラウザで開いた場合のみ、HTTP HeaderのRefererに設定されたURLも共有されるようになり、送信した際にURLが2つ送信されてしまいます。
そこで、social-pluginsの方を使ってあげると、この問題が解消しました。
lineURL() {
return `https://social-plugins.line.me/lineit/share?url={url}&text={text}`
}
ただし、こちらも注意が必要で、アプリで開いた場合に、textパラメータが無視され、URLのみが表示されてしまいます。
そのため、最終的にはSPとPCでURLを出し分けるように修正しました。
nuxt.config.jsファイル内でOGPを設定する
上記のままでは、シェアをしたときにシェア画像やタイトル、説明文が表示されないので、OGPの設定を行っていきます。
以前に、下記の記事でNuxt.jsでOGPを設定する方法を記載したので、こちらを参考に設定。
nuxt.config.js
export default {
head: {
title: 'nuxtアプリ',
htmlAttrs: {
lang: 'ja',
// topページ以外にogpを設定する場合は、website部分をarticleに置換
prefix: 'og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# website: http://ogp.me/ns/website#”',
},
meta: [
{ charset: 'utf-8' }, // 文字コードにutf-8を指定
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }, // スマホ等のモバイル端末で最適なWeb表示をさせるために設定
{ name: 'description', content: 'これはnuxtアプリです' }, // ページの説明文
{ name: 'keywords', content: 'Nuxt.js,Nuxt,nuxt' }, // ページのキーワード
{ name: 'format-detection', content: 'telephone=no' }, // 電話番号の自動リンク機能を制御
// ogp設定
{ name: 'og:url', content: 'https://ja.nuxtjs.org/' }, // ページのURL。絶対パスで記述
{ name: 'og:type', content: 'website' }, // ページの種類。website以外にもblogやarticle,productなどがある
{ name: 'og:site_name', content: 'nuxtアプリ' }, // ページのサイト名
{ name: 'og:title', content: '【nuxtアプリ】nuxtアプリについて' }, // ページのタイトル
{ name: 'og:description', content: 'これはnuxtアプリです' }, // ページの説明文
{ name: 'og:image', content: 'https://res.cloudinary.com/nuxt/image/upload/w_1200,h_675,c_fill,f_auto/remote/nuxt-org/blog/case-study-livementor/main.png' }, // SNS上でシェアされた際に表示する画像。絶対パスで記述
// facebookのogp設定
{ name: 'fb:app_id', content: '111111111111111' }, // サイトやブログの管理者をfacebookに伝えるためのタグ。facebookのogp設定には、app_idという15桁の数字を使用。Facebook for Developersに登録して取得する
// twitterのogp設定
{ name: 'twitter:card', content: 'summary_large_image' }, // twitterでの表示タイプ。summary_large_image以外にもsummaryやapp,playerなどがある
{ name: 'twitter:site', content: '@twitter_user_id' }, // @から始まるサイトやブログの管理者のtwitterユーザーIDを指定
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},
plugins: [
{ src: 'plugins/lazyload.js' }
],
}
これでOGPの設定も完了です。今回はURL等の設定値は適当なものを使用しているので、実際に設定する際は、適宜変更する必要があります。
コメント