nuxtでSNSボタンを自分で実装した

twtitter, facebook, lineのsnsボタンを実装した。
ogpの設定できていればページで使われてる画像がタイムライン上に表示されます。
hoge.com部分を書き換えればそのまま使えると思います。

components/Sns.vue

<style scoped>
ul.sns {
  display: flex;
  flex-wrap: wrap;
}

ul.sns li {
  list-style-type: none;
  padding: 0.5em 0.5em 0 0;
}
</style>

<template>
  <div>
    <ul class="sns">
      <li>
        <a :href="twitterURL" target="_blank" rel="nofollow">
          <img
            alt="twitter"
            src="~assets/images/twitter.svg"
            :width="size"
            :height="size"
          />
        </a>
      </li>
      <li>
        <a :href="facebookURL" target="_blank" rel="nofollow">
          <img
            alt="facebook"
            src="~assets/images/facebook.svg"
            :width="size"
            :height="size"
          />
        </a>
      </li>
      <li>
        <a :href="lineURL" target="_blank" rel="nofollow">
          <img
            alt="line"
            src="~assets/images/line.svg"
            :width="size"
            :height="size"
          />
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
      required: true
    }
  },
  computed: {
    size() {
      return 36
    },
    url() {
      return `https://hoge.com${this.$route.path}`
    },
    fixedTitle() {
      return encodeURIComponent(this.title)
    },
    fixedContent() {
      return encodeURIComponent(`${this.title} ${this.url}`)
    },
    twitterURL() {
      return `https://twitter.com/intent/tweet?url=${this.url}&text=${
        this.fixedTitle
      }`
    },
    facebookURL() {
      return `https://www.facebook.com/sharer/sharer.php?u=${this.url}&t=${
        this.fixedTitle
      }`
    },
    lineURL() {
      return `http://line.me/R/msg/text/?${this.fixedContent}`
    }
  }
}
</script>