GatsbyJSブログの記事にTwitterの投稿を埋め込んだ

2020-07-07

はじめに

おはようございます!こんにちは!こんばんは!
麻雀と芝生大好きおじさんことのふのふ(@rpf_nob)です!!

今回はGatsbyJSブログの記事にTwitterの投稿を埋め込めるようにしたので解説します。

Twitterでつぶやいたことをそのままブログの記事にしたり、他の人がつぶやいたことを参考にしたりすることもあると思うので便利ですよね!!

基本的には公式ページの内容通りやればできます。


  • 前提
  • プラグインのインストルール
  • プラグインの設定
  • 確認
  • まとめ

前提

このブログはGatsbyJSのgatsby-starter-blogのテンプレートから作成しています。

プラグインのインストール

以下コマンドでgatsby-plugin-twitterをインストールします。

$npm install --save gatsby-plugin-twitter

プラグインの設定

gatsby-config.jsのpluginsにインストールしたgatsby-plugin-twitterを追記します。

gatsby-config.js
{
  plugins: [
    ・・・
    `gatsby-plugin-twitter`
    ・・・
  ]
}

Twitterから埋め込み用のソースを取得

Twitterで表示するツイートを見つけ、右上隅にあるキャレット(v)をクリックします。

画像

そしてツイートを埋め込むを選択します。

画像

すると、以下サイトに遷移するので、Copy Codeを押して、ソースをコピーします。

画像

マークダウンに埋め込み用のソースを貼り付ける

記事のマークダウンファイルの好きな位置に先ほどコピーしたソースを貼り付けます。

注意点としては埋め込みコードをコピーするときは、blockquoteセクションのみを貼り付け、scriptセクションは削除してください。

<blockquote class="twitter-tweet">
  <p lang="ja" dir="ltr">24時間分割意識生活を開始した話をブログに上げましたので、よかったら見てください🙏<br><br>
    YouTubeの動画を見るだけでもおススメです😀<br><br>
    【決意表明】24時間分割意識生活を開始した<br> 
    <a href="https://t.co/76MI5olUFa">https://t.co/76MI5olUFa</a>
  </p>
  &mdash;
  麻雀と芝生大好きおじさん (@rpf_nob) 
  <a href="https://twitter.com/rpf_nob/status/1270856164289343488?ref_src=twsrc%5Etfw">June 10, 2020</a>
</blockquote> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

確認

こんな感じで表示されれば成功です!!

簡単ですね!!

まとめ

今回はGatsbyJSブログの記事にTwitterの投稿を埋め込めるようしました!!

Twitterでつぶやいたことをそのままブログの記事にしたり、他の人がつぶやいたことを参考にしたりすることもあると思うので便利ですよね!!

他にもGatsbyJSのブログカスタマイズをいろいろやっているので、以下もあわせてご覧いただければと思います。



最後まで見ていただきありがとうございます!!


Written by のふのふ

東京で働く名古屋生まれの麻雀と芝生と娘と妻を愛するアラフォーエンジニア

©2020 のふのふ All Rights Reserved.