Twitterシェアボタンを設置しました！

参考にさせていただいたサイト

SNSボタンの設置方法＆デザインレギュレーション (https://www.tam-tam.co.jp/tipsnote/social/post16199.html)

ボタン作成

まずはTwitterシェアボタンを作成していきます。 公式のボタン生成ページがあるのでそちらを利用します。

1. 下の方にスクロールすると見える Twitter Buttons をクリック
2. Share Button をクリック → ボタンの貼り付け用コードとプレビューが表示されます。
3. 「That’s all we need, unless you’d like to set customization options.」をクリックで内容をカスタマイズ
4. Update を押して内容を更新する → ボタンのプレビューが更新されます。

---

カスタマイズで Language を Japanese にすると日本語表示になります。

コンポーネント化する

このサイトはVuepressで作られていますので、このTwitterボタンもVueコンポーネントにしていきたいと思います。 まずはコピーしたタグを展開してみましょう。

<a
  href="https://twitter.com/share?ref_src=twsrc%5Etfw"
  class="twitter-share-button"
  data-size="large"
  data-text="| Plus oneブログ"
  data-url="https://plus-one.tech/"
  data-lang="ja"
  data-show-count="false"
>
  Tweet
</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8" />

こうしてみると、どのプロパティに何を入れたらいいのかひと目でわかりますね。 さらに、scriptの読み込みは一箇所にまとめてしまっても良さそうです。

最終的に下記のような形に落ち着きました。

TwitterShareButton.vue（クリックで展開）

<template>
  <a
    href="https://twitter.com/share?ref_src=twsrc%5Etfw"
    class="twitter-share-button"
    :data-url="dataUrl"
    :data-text="dataText"
    :data-lang="lang"
    :data-size="large ? 'large' : undefined"
    :data-show-count="showCount"
  >
    Tweet
  </a>
</template>
<script>
export default {
  name: 'TwitterShareButton',
  props: {
    url: { type: String },
    text: { type: String },
    lang: { type: String, default: 'ja' },
    large: { type: Boolean, default: false },
    showCount: { type: Boolean, default: false },
  },
  computed: {
    dataUrl () {
      return this.url || location.protocol + '//' + location.host + this.$page.path
    },
    dataText () {
      return (this.text || this.$page.title) + ' | ' + this.$siteTitle + ' @plus_one_masaki'
    },
  },
  /**
   * ボタン用スクリプトの読み込み
   */
  mounted () {
    const twitterWidgetScript = document.createElement('script')
    twitterWidgetScript.src = 'https://platform.twitter.com/widgets.js'
    twitterWidgetScript.async = true
    document.body.appendChild(twitterWidgetScript)
  },
}
</script>

facebookなども同じ感じでできるようなので、ぜひお試しください！