Gatsby.jsで作ったブログにTwitterの投稿を埋め込む

2466 ワード
gatsby Twitter Twitter テキストリンク

動機

Gatsby.jsで作ったブログにTwitterの記事を埋め込んでみようと思います。
Twitterでつぶやいたことや、フォローしている人のつぶやきを記事に盛り込むことができるようになるので、とても便利！！！
記事はContentfulにMarkdown形式で記述し取得しています。

環境

・OS: macOS 10.15.5
・gatsby: 2.24.14
・ヘッドレスCMS: Contentful

手順

①プラグインをインストール
②gatsby_node.jsに①でインストールしたプラグインを記述
③Twitterから埋め込みう記事を入手
④Contentfulに記事に埋め込み

① プラグインをインストール

次のプラグインをインストールしてください。

$npm install --save gatsby-plugin-twitter

② gatsby_node.jsに①でインストールしたプラグインを記述

module.exports = {
  plugins: [
    ・・・
    `gatsby-plugin-twitter`,
    ・・・
  ],
}

③ Twitterから埋め込みう記事を入手

赤枠をクリック

Embed Tweet(Tweetを埋め込む)をクリック

Codeをコピーしてください。

④Contentfulに記事に埋め込み

Markdownで書かれた記事にコピーしたCodeを埋め込んでください。
※コピーするCodeの下部にあるスクリプトセクションは削除してください。

出来上がり

いい感じに埋め込めました。簡単でいいですね！！