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

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

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

メンションボタン↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/861c481a-e546-8e01-7cf7-a9d41c87d242.png)


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

```bash
$ npm install --save gatsby-plugin-twitter
```

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

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

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

https://publish.twitter.com/# に行く。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/e0d12039-ffb2-35b0-73b4-e29cfa0cd969.png)

Enter your Twitter URL に自分のツイッターアカウントのURLを入力してエンター
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/0ace1b49-8465-6a6c-b94e-cca12fbde5a1.png)

Twitter Buttonsをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/2485249d-bf70-08c8-7a04-88b91d98ea56.png)


Mention Buttonをクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/da248688-0052-db89-9950-bb71f3d8f082.png)


Copy Codeをクリックして埋め込みコードをコピー。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/49e67ee5-760d-2f6c-af62-9356e5fa77a5.png)

### コードを編集

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

```haml
<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>
```

以下のように編集する。

```jsx
<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だったら

```jsx
const IndexPage = () => (
  <Layout>
　　ここ
  </Layout>
)
```
ここ、のどこにでもよいのでコピー。


こうなった↓
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/307441/932f6f82-f1bc-e2e8-1705-3e6bd21ac74b.png)

# 本の宣伝
### Gatsbyバージョン５>>>>改訂２版

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


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


<a href="https://www.amazon.co.jp/gp/product/B0BXNJTJMY?&linkCode=li3&tag=kokkahasan-22&linkId=93c5e3bf1f226141ddc807300e81b07a&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXNJTJMY&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXNJTJMY" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/gp/product/B0BXXBDJDJ?&linkCode=ll1&tag=kokkahasan-22&linkId=df7e600968c58c0090cd735681c6732c&language=ja_JP&ref_=as_li_ss_tl">Gatsby５前編ー最新Gatsbyでつくるコーポレートサイト ～基礎の基礎から応用、新機能の導入まで（書籍2,980円）</a>

<br />
<br />

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

<a href="https://www.amazon.co.jp/gp/product/B0BXN99WSV?&linkCode=li3&tag=kokkahasan-22&linkId=68f1905bf915f6bd365559a0c65bcdd1&language=ja_JP&ref_=as_li_ss_il" target="_blank"><img border="0" src="//ws-fe.amazon-adsystem.com/widgets/q?_encoding=UTF8&ASIN=B0BXN99WSV&Format=_SL250_&ID=AsinImage&MarketPlace=JP&ServiceVersion=20070822&WS=1&tag=kokkahasan-22&language=ja_JP" ></a><img src="https://ir-jp.amazon-adsystem.com/e/ir?t=kokkahasan-22&language=ja_JP&l=li3&o=9&a=B0BXN99WSV" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
<a target="_blank" href="https://www.amazon.co.jp/dp/B0BXN99WSV?_encoding=UTF8&qid=&sr=&linkCode=li2&tag=kokkahasan-22&linkId=f02e2f9c50736e3f074b38b4cd73894a&language=ja_JP&ref_=as_li_ss_il">Gatsby５後編ー最新GatsbyとmicroCMSでつくるコーポレートサイト《サイト内検索機能付き》（書籍 2,790円）</a>

<br />