1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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

Posted at

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" />

解説

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

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

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

oEmbed API

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?