AstroでTwitterの埋め込みコンポーネント作成例

AstroでTwitterの埋め込みを行うシンプルなコンポーネントの例です。

HugoからAstroへの移行作業において、HugoのShortcodesと同様にショートハンドでツイートを埋め込むコードが必要になったため作成しました。

環境

- astro: ^3.4.0

コード

Astroコンポーネント

src/components/Twitter.astro

---
interface Props {
  url: string;
}
const { url } = Astro.props;

const base = "https://publish.twitter.com/oembed";
const baseUrl = new URL(base);
baseUrl.searchParams.set("url", url);
baseUrl.searchParams.set("omit_script", "true");

const tweet = await fetch(baseUrl.toString())
  .then<{ html: string }>((res) => res.json())
  .catch((err) => null);
---

{
  tweet && (
    <>
      <div set:html={tweet.html} />
      <script
        async
        src="https://platform.twitter.com/widgets.js"
        charset="utf-8"
        crossorigin="anonymous"
      />
    </>
  )
}

使い方

src/pages/hoge.astro

---
import Twitter from "../components/Twitter.astro";
---

<Twitter url="https://twitter.com/J_League/status/1710914053265334445" />

／
無回転炸裂！！！
スーパーゴラッソ！！！！！
＼

🎦 ゴール動画
🏆 明治安田生命Ｊ２リーグ　第38節
🆚 千葉vs水戸
🔢 0-1
⌚️ 23分
⚽️ 鵜木　郁哉（水戸)#Ｊリーグ#千葉水戸 pic.twitter.com/bHISGDd3qp

— Ｊリーグ（日本プロサッカーリーグ） (@J_League) October 8, 2023

解説

TwitterのoEmbed APIを利用し、レスポンスから得たhtml要素をAstroのset:htmlで<div>要素に挿入しています。不必要なラッパーの追加を避けるために<Fragment set:html={tweet.html} />という書き方も可能ですが、この方法だとクラスなどでスタイルを与えることができません。

Fetch APIのエラー処理では複雑なことを行わずnullだけを返すことで、何も描画されないようにします。お好みでエラーメッセージの追加などを行ってください。

またこの例ではwidgets.jsを読み込みTwitterのデフォルトのスタイルを適用していますが、自作のスタイルを適用したりパフォーマンスを向上させたい場合は不必要なので削除してください。

oEmbed API

以上、Twitter埋め込みのシンプルなAstroコンポーネントの例でした。