» TechAcademyの無料体験

【Nuxt.js】外部SNSシェアボタンを作成する

【Nuxt.js】外部SNSシェアボタンを作成するNuxt.js

Nuxt.jsで作成したWebサイトやアプリ内に、外部SNSシェアボタンを作成する方法について、この記事では書いています。

外部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を使っています。詳細は下記の記事を参考に。

【Nuxt.js】画像遅延読み込みを「Vue-Lazyload」を使って実装する

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を出し分けるように修正しました。spとpcでurlを出し分ける方法については後日、改めて記事を書きます。

nuxt.config.js内でOGPを設定する

上記のままでは、シェアをしたときにシェア画像やタイトル、説明文が表示されないので、OGPの設定を行っていきます。

以前に、下記の記事でNuxtで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等の設定値は適当なものを使用しているので、実際に設定する際は、適宜変更する必要があります。

コメント

タイトルとURLをコピーしました