Notion Blog への Twitter Card の埋め込み【Notion Blog 徹底解説 #4】

// 🙎‍♂️ Yuji Tsuburaya📆 May 30, 2020🔖 Notion BlogNotion

(👩‍💻 2020/05/30 リライトしました。)

Notion Blog 徹底解説シリーズの第四弾です。今回は Notion Blog に Twitter カード埋め込みの実装をしていきたいと思います。Notion Blog はデフォルトでは Twitter カード埋め込みをサポートしていないので、その機能の付け方を解説していきたいと思います。(デフォルトだと Notion 側には Twitter カードとして埋め込みはできるのですが、Notion Blog にはそれが表示されない状態になります。)

⚠ この記事も、エンジニアリングの話がちょこちょこ登場してきます。Notion Blog は Next.js で出来ているので、カスタマイズするには React の知識が必要になるのですが、知識がない人でもなるべくコピペで実現出来るように丁寧に解説したいと思います。例によって、分からない方は、@___35d まで質問ください。

🔥 Twitter カードの埋め込みを実現する

Notion Blog への Twitter カードの埋め込みは、以下の2ステップで実現することができます。

  1. Twitter カード埋め込み用の React ライブラリのインストール
  2. [slug].tsx を編集して、Twitter カードを表示できる実装をする。

一つ一つ詳しく解説していきたいと思います。

1. ライブラリのインストール

react-twitter-embed という React ライブラリを使用します。(少しスター数が少なく感じたのですが、良さそうなライブラリがこれしか見当たらなかったため、これを使いました。実際に試してみたのですが、安定して動いてそうだったので大丈夫そうです。もしもっと良さそうなライブラリがあったら教えて下さい 🙇‍♂️)

react-twitter-embed
react-twitter-embed

インストールは以下のコマンドで行うことができます。

$ yarn add react-twitter-embed

2. _slug.tsx の編集

まず、 _slug.tsx でインストールしたライブラリをインポートします。

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

_slug.tsx では、Notion の要素を解析して、React DOM に変換している箇所があるので、そこに 以下のように case 文を追加します。 properties.source[0][0] に、ツイートの URL が含まれているので、そこからツイートの ID を抽出して、ライブラリの React DOM に props として渡すという流れになっています。

case 'tweet': const tweetUrl = properties.source[0][0] const pos = tweetUrl.indexOf('?') let tweetId = tweetUrl.substring(0, pos).split('/')[5] if (!tweetId) { tweetId = tweetUrl.split('/')[5] } toRender.push(<TwitterTweetEmbed key={id} tweetId={tweetId} options={{ margin: '0 auto;' }} />) break

🚀 埋め込みができるようになった

以上の設定をすることで、Notion Blog に Twitter カードを埋め込むことができるようになりました。以下のような感じで表示されます👇

不明点あれば @___35d までお気軽にどうぞ🙌

✍️ Notion Blog のカスタマイズ方法まとめ

シェアしてくれたら喜びます 💁‍♀️

広告

書いた人

___35d

Yuji Tsuburaya (@___35d

👩‍💻 Frontend Engineer

🏢 J-CAT CTO Co-Founder / ex. BizReach

🎨 by @ch1ch1ch1_123

💚 Minimalism / Notion / Figma

📱 Author of @FastNotion

詳しいプロフィールはこちら

広告