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

Web制作

# ボタン作成

まずは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（クリックで展開）

<<< @/src/.vuepress/theme/components/TwitterShareButton.vue

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