2025年2月15日

Astro製のブログで、記事にツイートを埋め込んで表示したい

DE-TEIUです。そういえばブログ記事にツイートを埋め込んで表示したいことってあるよな、と思って軽く調べてみたら、良さそうなライブラリを見つけました。

astro-tweet

astro-tweetというライブラリがあります。これを使うと、Astroのmdxファイルにツイートを埋め込んで記事上で表示できます。やってみましょう。

npm install astro-tweet

※ちなみにこのライブラリは、Astroのバージョン3系と4系のみサポートしているようです。一応、5系でもこうやってインストールはできます。

npm install astro-tweet --force

ちなみに5系でも入れたら問題なく動いてそうでした。

埋め込みたいツイートのURLを取得して、その末尾のIDを取り出します。あとは、以下のようにmdxファイルでastro-tweetのコンポーネントを呼び出してIDを渡すだけです。簡単。

import Tweet from "astro-tweet";

<Tweet id="1890349506480243138" />;

こんな感じで表示されます。良いですね。

好きな惣菜発表ドラゴンが家に来た本物そっくりだ

デフォルトの表示では、埋め込んだツイートのコンポーネントは中央寄せでなく左寄せで表示されます。力技でこうやってスタイルを追加すれば中央寄せにできます。

.astro-tweet-theme {
  margin: 0 auto !important;
}