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

📆May 30, 2020🔖 Notion BlogNotion

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

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

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