GatsbyブログにTwitterのタイムラインを表示してみる

2021/4/9追記：下でたらたらと試行錯誤を綴っていますが、普通にこちらの記事のやり方でいけました。最初試した時うまく表示されなかった気がしましたが、そんなことはなかったようです…
多分これが一番早いと思います。

以前gatsby-plugin-twitterを導入して記事の中にツイートを埋め込めるようにしましたが、人間の欲は際限がないもので、今度は「トップページのサイドバーにTwitterのタイムライン表示させてぇな…」という野望が僕の中で鎌首をもたげはじめました。昨日のことです。

思い立ったらすぐ行動ということで、ネット上で情報収集してみます。「まぁどうせTwitterのAPI叩いて自分のアカウントの最新ツイート取得⇒いい感じに表示するだけやから、先人の偉大なる功績を活かせば余裕でしょ？(ハナホジ)」と息巻いて探し始めましたが、『やってみた』ブログエントリが出てこない…探し方が悪いから…？あっあった！

…英語の記事やんけ！

うーん何やらいろいろとやることがありそうだ…今度はgatsby-source-twitterなるプラグインを使うのか…んでTwitterのconsumer key, consumer secret, and bearer tokenが必要となるがそのためにはTwitter developer appの作成が必要と…なんかRPGのお使いイベントみたい…

ほうほうGraphQLでTwitterのAPI叩いて取得してきた情報を表示する感じなのかな…あれ、これ最新のツイート数件の表示しかできない仕様っぽい…？しかもCSSの設定自分でしないといけないのか…?良く分からん…うーーーーーん…

で、こいつが生まれたってわけ

※レスポンシブ対応で、一般的なPCの解像度だと表示されますがスマホだと表示されないようにしています。

なんだかんだいい感じにできたなー。いやでもほんとに最新ツイート数件しか表示できないのかな？なんかやりようありそうだけどな…

ん…？

ありました(react-twitter-widgets)

AuthorのAndrewSuzukiさんとこちらの記事に感謝申し上げます。

で、今のサイトにいたるってわけ

以上です。