『react-twitter-widgets』でGatsbyサイトにTwitterのタイムラインを埋め込む

更新

タグ:

結論

react-twitter-widgetsのレポジトリ

まずはインストールする。

npm i react-twitter-widgets

タイムラインを埋め込むコードは以下の通り。

import { Timeline } from "react-twitter-widgets";

<Timeline
  dataSource={{
    sourceType: "profile",
    screenName: "foolish_pine",
  }}
  options={{
    height: "400",
  }}
/>;

こんな感じで埋め込むことができます。

react-twitter-widgets

デモにはタイムラインの他にフォローボタンや単発のツイートの埋め込みの例も掲載されています。

経緯

Twitterのタイムラインをブログに埋め込みたいな～と思うも何かと面倒そうでどうしたもんか、と思っていました。

react-twitter-widgetsを使えば簡単ですね。