GatsbyにTwitterメンションボタンを埋め込む

Twitterシェアボタンについてはよく出てくるが、メンションボタンの場合の方法がなかなか見つからない。フォロワー数を表示させたかっただけなのでとりあえずフォローボタンでどうにかした備忘録。

メンションボタン↓

まずプラグインをインストール

$ npm install --save gatsby-plugin-twitter

gatsby-config.js

gatsby-config.jsに以下のように記述。

・・・略・・・
    plugins: [
      `gatsby-plugin-twitter`,   // ← 追記
      `gatsby-plugin-react-helmet`,
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          name: `images`,
          path: `${__dirname}/src/images`,
        },
      },
・・・略・・・

Twitterサイトで埋め込みコード生成

https://publish.twitter.com/# に行く。

Enter your Twitter URL に自分のツイッターアカウントのURLを入力してエンター

Twitter Buttonsをクリック

Mention Buttonをクリック

Copy Codeをクリックして埋め込みコードをコピー。

コードを編集

コピーしたコードは以下の通りだが。

<a href="https://twitter.com/intent/tweet?screen_name=xxxxxxjapan&ref_src=twxxxxxxfw" class="twitter-mention-button" data-show-count="false">
Tweet to @xxxxxxxapan</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

以下のように編集する。

<div class="twitter">
 <a href="https://twitter.com/xxxxxxapan?ref_src=twxxxxxfw" class="twitter-follow-button" data-show-count="true" data-lang="ja"></a>
　{<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>}
</div>

divタグはspanとかpでもよい。
hrefのURLはご覧の通りに。
class="twitter-mention-button"だとなぜか表示されない。class="twitter-follow-button"に変更。
フォロワー数を表示させたいのでdata-show-countを"true"に。
日本語化のため data-lang="ja"を追加。
スクリプト部分は{}で囲ってそのままコピペ。

index.jsなどにコピー

埋め込みたいページのHTMLを書くところ、たとえばindex.jsだったら

const IndexPage = () => (
  <Layout>
　　ここ
  </Layout>
)

ここ、のどこにでもよいのでコピー。

こうなった↓

本の宣伝

Gatsbyバージョン５>>>>改訂２版

前編の『Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト』と後編の『Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》』を合わせ、次のようなデモサイトを構築します。
→ https://yah-space.work

---

静的サイトジェネレーターGatsby最新バージョン５の基本とFile System Route APIを使用して動的にページを生成する方法を解説。またバージョン５の新機能《Slicy API》《Script API》《Head API》を紹介、実装方法も。《Gatsby Functions》での問い合わせフォーム実装やGatsby Cloudへのアップロード方法も！

Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト ～基礎の基礎から応用、新機能の導入まで（書籍2,980円）

最新Gatsby５とmicroCMSを組み合わせてのコーポレートサイト作成手順を解説。《サイト内検索機能》をGatsbyバージョン４からの新機能《Gatsby Functions》と《microCMSのqパラメータ》で実装。また、SEOコンポーネントをカスタマイズしてmicroCMS APIをツイッターカードに表示させるOGPタグ実装方法も解説。

Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》（書籍 2,790円）