スクリーンショット_2019-02-10_0

Nuxtで制作したページにSNSウィジェットを埋め込む

今日は、Nuxt.js=を使って制作したWebページにFacebook,Twitter,LINEのシェアボタンを埋め込む方法についてメモを残しておきたいと思います。

それぞれ公式サイトで提供されているhtmlのコードをそのまま使うこともできるのですが、ここでは、公式サイトのscriptを利用して、よりNuxtに適した形で自分でカスタマイズもできる方法について書きたいと思います。

ディレクトリ構成は以下のようである場合です。

- src
    L assets
    L components
        L atoms
            L shareButtons.vue
        L molecules
            L buttonBlock.vue
        L organisms
        L pages
            L index.vue

2つのコンポーネント(shareButtons, buttonBLock)を用意しています。全体のページの中の、SNSシェアボタンをコンポーネントとして切り出しているイメージです。

現在のURLをエンコードするようにしてあるので、コンポーネント内であればどこでも実装可能です。

<- parent: buttonBlock.vue !->

<template>
  <share-buttons :title="title" />
</template>

<script>
import shareButtons from '~/components/atoms/shareButtons'

export default {
  components: {
    shareButtons
  },
  data: function() {
    return {
      title: 'sns-widget'
    }
  }
}
</script>
<- child: shareButtons.vue !->

<template>
  <section>
    <ul>
      <li>
        <a :href="twitterUrl()"
           class="twitter-share-button"
           target="_blank"
           title="twitter-tweet"
           data-show-count="false"
           data-lang="ja"/>
      </li>
      <li class="widget__item">
        <a :href="facebookUrl()"
           class="fb-share-button"
           target="_blank"
           title="facebook-share"
           data-layout="button_count"/>
      </li>
      <li>
        <a :href="lineUrl"
           class="line-share-button"
           target="_blank"
           <- 今回は、LINEは画像を用意してはめ込んでみます !->
           title="line-send"><img class="image" src="~images/linebutton.png"></a>
      </li>
    </ul>
  </section>
</template>

<script>
export default {
  name: 'ShareButtons',

  props: {
    title: String
  },

  data: function() {
    return {
      url: `(ここには置いてあるサーバーのURLを入れます。 e.g. https://note.mu)${this.$route.path}`,
      twitter_url: 'https://twitter.com/intent/tweet?url={0}&text={1}',
      facebook_url: 'https://www.facebook.com/sharer/sharer.php?u={0}&text={1}',
      line_url: 'https://social-plugins.line.me/lineit/share?url={0}&text={1}'
    }
  },

  mounted() {
    if (!document.getElementById('facebook-jssdk')) {
      ;(function(d, s, id) {
        var js,
          fjs = d.getElementsByTagName(s)[0]
        if (d.getElementById(id)) return
        js = d.createElement(s)
        js.id = id
        js.src = 'https://connect.facebook.net/ja_JP/sdk.js#xfbml=1&version=v3.2'
        fjs.parentNode.insertBefore(js, fjs)
      })(document, 'script', 'facebook-jssdk')
    }

    if (!document.getElementById('twitter-wjs')) {
      ;(function(d, s, id) {
        var js,
          fjs = d.getElementsByTagName(s)[0]
        if (d.getElementById(id)) return
        js = d.createElement(s)
        js.id = id
        js.src = 'https://platform.twitter.com/widgets.js'
        fjs.parentNode.insertBefore(js, fjs)
      })(document, 'script', 'twitter-wjs')
    }
  },

  methods: {
    formatByArr(msg) {
      var args = []
      for (var i = 1; i < arguments.length; i++) {
        args[i - 1] = arguments[i]
      }
      args = args.map(x => encodeURIComponent(x))
      return msg.replace(/\{(\d+)\}/g, function(m, k) {
        return args[k]
      })
    },

    createSnsUrl: function() {
      var url = encodeURIComponent(location.href)
      var text = encodeURIComponent(document.querySelector("meta[name='description']").getAttribute('content'))
      this.twitterUrl = 'https://twitter.com/intent/tweet?text=' + text + '&hashtags=' + text + '&url=' + url
      this.facebookUrl = 'https://www.facebook.com/sharer/sharer.php?u=' + url
      this.lineUrl = 'https://social-plugins.line.me/lineit/share?url=' + url
    },

    twitterUrl() {
      return this.formatByArr(this.twitter_url, this.url, this.title)
    },
    facebookUrl() {
      return this.formatByArr(this.facebook_url, this.url, this.title)
    },
    lineUrl() {
      return this.formatByArr(this.line_url, this.url, this.title)
    }
  }
}
</script>

<style lang="scss" scoped>
<- お好みでスタイルを !->
@import '~/assets/css/hogehoge.scss';
</style>

最後に、参考にさせていただいた公式のサイトを載せておきます。

facebook
Twitter
LINE


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
ありがとうございます!
2
人の役には立たない雑考日記です | 人間の行動や意思決定のあり方にとても興味があります | 僕が後日思い起こせるように僕のために書いています