GatsbyJSで構築したブログにツイートを埋め込む

2021/12/11

ブログ記事にツイートを引用したいときにURLをmarkdown内に記述するとそのまま出力される。そのままのURLでも特に問題はないのだが、できればTwitterウィジェットで表示したい。豊富なGatsbyプラグインの中からユースケースに合うプラグインを探した。

gatsby-plugin-twitter

https://www.gatsbyjs.com/plugins/gatsby-plugin-twitter/

GatsbyJS公式のプラグイン
ツイートを埋め込むときの<blockquote>タグをmarkdownに記述することでウィジェットとして表示される。
developで開発をするときも軽量

gatsby-remark-twitter

https://www.gatsbyjs.com/plugins/@weknow/gatsby-remark-twitter/

remarkプラグインでmarkdownを解析(parse)してURLをウィジェットに変換する
buildするときに変換を行う

おそらく実用的に使えるプラグインはこの2つである。しかし、更に調べると様々なリンクを埋め込めるプラグインを見つけた。

gatsby-remark-oembed

https://www.gatsbyjs.com/plugins/@raae/gatsby-remark-oembed/

Tweetの他にTwitter, Instagram, YouTube, SoundCloud, CodePenなどのリンクを埋め込むことができる
OembedサポートされているURLのみが対象
サンプルサイトがある
- gatsby-remark-oembed.netlify.com/

今回は、gatsby-remark-oembedを採用することにした。ツイートの埋め込みができれば十分であるが他のリンクも対応しているならとてもいいと感じた。oEmbedとは、埋め込み用のコードを取得するための統一規格のことらしい。

注意点

gatsby-remark-oembedは、https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/のプラグインのサブプラグインという位置づけであるのでGatsbyJSの設定ファイルに記述する際は注意する必要がある。私は、間違えた記述をしていてエラーに悩まされた。以下は、https://www.gatsbyjs.com/plugins/@raae/gatsby-remark-oembed/のhow to useから引用したものである。

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
        {
          resolve: `@raae/gatsby-remark-oembed`,
          options: {
            // usePrefix defaults to false
            // usePrefix: true is the same as ["oembed"]
            usePrefix: ["oembed", "video"],
            providers: {
              // Important to exclude providers
              // that adds js to the page.
              // If you do not need them.
              exclude: ["Reddit"]
            }
          }
        }
      ]
    }
  }
];

また、usePrefixを指定していると、そのままリンクを貼りつけてもウィジェットに変換されないので注意。