CODE:LIFE

NotionReact

notion-blog に Twitter のタイムラインを表示する方法

avatar

Twitterのタイムラインウィジェットは 公式ページ で作成できる。

しかし、SSR(サーバサイドレンダリング)のnotion-blogではタグを埋め込んだだけでは上手く動かなかったので調べてみたところ、細かいカスタムもできるライブラリが見つかったのでご紹介。

An image from Notion

React でお手軽にTwitter○○を埋め込める react-twitter-embed

react-twitter-embed

https://github.com/saurabhnemade/react-twitter-embed

ヘッダーとフッターを無くしたシンプルな見た目に出来るのがとても良いです。

導入手順は3ステップ

① readme には npm install となっているが、notion-blog は yarn add

yarn add react-twitter-embed

 

② 表示したい箇所の .tsx にインポート

import { TwitterTimelineEmbed } from 'react-twitter-embed'

 

③ 表示したい箇所に TwitterTimelineEmbed を追加

screenName にTwitterのIDを指定。noHeader="true" noFooter="true" で非表示にしています。

今回非表示なので意味ないかもしれませんが、 lang="ja" はヘッダー・フッターの表示言語に影響します。

<div className="aside-content">
  <div className="aside-content-inner">
    <div className="aside-content-title">Twitter</div>
  </div>
  <TwitterTimelineEmbed
    sourceType="profile"
    screenName="marumo0014"
    noHeader="true"
    noFooter="true"
    lang="ja"
    options={{ height: 400 }}
  />
</div>

デモと設定内容

細かいカスタマイズ方法は https://saurabhnemade.github.io/react-twitter-embed/ を参照。

左側のメニューからサンプルを選択し、右上の「Show Info」をクリックすることでソースと設定値を確認できます。

An image from Notion