Nuxtで作ったサイトに軽いSNSシェアボタンを設置した

<!-- Twitter -->
<i class="mdi mdi-twitter"/>
<!-- facebook -->
<i class="mdi mdi-facebook"/>
<!-- google-plus -->
<i class="mdi mdi-google-plus"/>
<!-- Pocket -->
<i class="mdi mdi-pocket"/>
<!-- はてなブックマーク -->
<b>B!</b>
<!-- LINE -->
<b>LINE</b>

<template>
  <section class="section">
    <aside>
      <ul class="social-list">
        <li class="social-list-item">
          <a
            class="social-list-link icon-twitter"
            :href="twitterUrl()"
            target="_blank"
            title="Twitterで共有"
          ><i class="mdi mdi-twitter"/></a>
        </li>
        <li class="social-list-item">
          <a
            class="social-list-link icon-hatebu"
            :href="hatebuUrl()"
            target="_blank"
            :data-hatena-bookmark-title="encodeURIComponent(url)"
            title="このエントリーをはてなブックマークに追加"
          ><b>B!</b></a>
        </li>
        <li class="social-list-item">
          <a
            class="social-list-link icon-pocket"
            :href="pocketUrl()"
            target="_blank"
            title="pocketで共有"
          ><i class="mdi mdi-pocket"/></a>
        </li>
      </ul>
    </aside>
  </section>
</template>

<script>
export default {
  name: "ShareButtons",
  props: ["title"],
  data() {
    return {
      url: `https://www.suzu6.net${this.$route.path}`,
      twitter_url: "https://twitter.com/intent/tweet?url={0}&text={1}",
      hatebu_url:
        "http://b.hatena.ne.jp/add?mode=confirm&amp;url={0}&amp;title={1}",
      pocket_url: "http://getpocket.com/edit?url={0}"
    };
  },
  methods: {
    formatByArr(msg) {
      // フォーマット（引数可変（配列）版）
      var args = [];
      for (var i = 1; i < arguments.length; i++) {
        args[i - 1] = arguments[i];
      }
      // URLエンコード
      args = args.map(x => encodeURIComponent(x));
      return msg.replace(/\{(\d+)\}/g, function(m, k) {
        return args[k];
      });
    },
    // それぞれパラメータを埋め込む
    twitterUrl() {
      return this.formatByArr(this.twitter_url, this.url, this.title);
    },
    hatebuUrl() {
      return this.formatByArr(this.hatebu_url, this.url, this.title);
    },
    pocketUrl() {
      return this.formatByArr(this.pocket_url, this.url);
    }
  }
};
</script>

<style scoped>
.social-list {
  list-style: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  width: 100%;
  margin: auto;
  margin-bottom: 60px;
}

.social-list-item {
  height: 40px;
  line-height: 40px;
}
.social-list-item {
  flex-grow: 1;
  height: 50px;
  line-height: 50px;
  min-width: 90px;
  text-align: center;
}
.social-list-link.icon-twitter {
  background: #00b0ed;
}
.social-list-link.icon-hatebu {
  background: #008fde;
}
.social-list-link.icon-pocket {
  background: #eb4654;
}
/* .social-list-link.icon-line {
  background: #00c300;
} */
.social-list-link {
  display: block;
  color: #ffffff;
}
a {
  color: inherit;
  text-decoration: none;
}
.content li + li {
  margin-top: 0;
}
</style>

<template>
  <!-- シェアボタンを置きたい位置 -->
  <share-buttons :title="title" />
</template>

<script>
import ShareButtons from "~/components/ShareButtons"

export default {
  components: {
    ShareButtons
  }
}
</script>

// 引数を埋め込む関数
formatByArr("url={0}&text={1}", url, text)