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

Nuxt.js で外部 SNS シェアボタンを作成する Nuxt.js
記事内に広告が含まれています。

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

Nuxt.js関連のおすすめUdemy講座
Nuxt.js関連のおすすめ書籍

コメント

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