メンティーのおどり

Gatsbyのブログにツイート埋め込みする

2020年09月05日

Gatsby.jsで作ったブログにツイートの埋め込みしようとしてちょっとうまくいかなかったのでメモです。 gatsby-plugin-twitterをいれると埋め込みできるようになりました。

ツイート埋め込みコード

ツイッターの埋め込み機能のとこから取得したタグはこんなの。

テキストだけのツイート

<blockquote class="twitter-tweet" data-dnt="true">
  <p lang="ja" dir="ltr">
    おかき好きだからおかき関係のエンジニアになりたいかも
  </p>
  &mdash; みう@かけだしメンティー🍓 (@programable_miu)
  <a href="https://twitter.com/programable_miu/status/1269613634730078208?ref_src=twsrc%5Etfw">
    June 7, 2020
  </a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こっちはテキストと動画のツイート

<blockquote class="twitter-tweet" data-dnt="true">
  <p lang="ja" dir="ltr">
    私のブログ、Hタグがぷるぷるしてるのが読みにくいってコメントをいただいて、
    おそらくHタグだけぷるぷるしてるのがよくないんだなと考えたので、
    BODY全体をぷるぷるさせてみました👍
    <br>
    <br>
    だいぶデザインとしてよくなった気がします！
    <a href="https://t.co/r0jrODnJnC">
      pic.twitter.com/r0jrODnJnC
    </a>
  </p>
  &mdash; みう@かけだしメンティー🍓 (@programable_miu)
  <a href="https://twitter.com/programable_miu/status/1300454449203216386?ref_src=twsrc%5Etfw">
    August 31, 2020
  </a>
</blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

これを貼り付けるとツイートの埋め込みができるはずなんですけど・・・

うまくいってないとき

マークダウンにそのまま貼ってみると、ただの引用になっちゃってうまくいかなかったです。 うまくいってないときの再現のためにblockquoteタグのclassとdata-dntを消したもの置いておきます。

おかき好きだからおかき関係のエンジニアになりたいかも

— みう@かけだしメンティー🍓 (@programable_miu) June 7, 2020

私のブログ、Hタグがぷるぷるしてるのが読みにくいってコメントをいただいて、おそらくHタグだけぷるぷるしてるのがよくないんだなと考えたので、BODY全体をぷるぷるさせてみました👍

だいぶデザインとしてよくなった気がします！ pic.twitter.com/r0jrODnJnC

— みう@かけだしメンティー🍓 (@programable_miu) August 31, 2020

引用になるってことはblockquoteタグのとこはちゃんとHTMLとしていけてそうですね。 scriptタグの部分が実行されてないみたいです。

gatsby-plugin-twitterいれるといける

gatsby-plugin-twitterってのをいれるといけるみたいです。

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

どれどれ〜

できたできた👍

みう＠かけだしメンティー

上位100%の人材（バックエンド）。おかきが好きなのでおかき関係のエンジニアになりたいかも。

© 2020 programable-miu