LoginSignup
7

More than 3 years have passed since last update.

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

Posted at

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>

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7