トップ/記事一覧

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

📆2020/05/30（最終更新日：2020/06/30）🔖 Notion Blog Notion

🐈 「（少しマニアックな）Notion の使い方まとめ」という note マガジンでも、毎週1本 Notion の使い方に関する記事を発信をしています。もしよければそちらも覗いてみてください。

⚠ この記事は最終更新日から1年以上が経過しています。内容が古い箇所がある可能性があるためご注意ください。

（👩‍💻 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ステップで実現することができます。

Twitter カード埋め込み用の React ライブラリのインストール

[slug].tsx を編集して、Twitter カードを表示できる実装をする。

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

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

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

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

JavaScript

$ yarn add react-twitter-embed

2. _slug.tsx の編集

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

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

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

JavaScript
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 までお気軽にどうぞ🙌