R$ Blog

ツイート埋め込みのテスト

画像0〜4枚・動画・GIFツイートの表示を確認する

825자약 3분ツールサンプル埋め込み

段落に X(Twitter) のステータス URL だけを書くと、ビルド時に fxtwitter API からデータを取得して静的ツイートカードに変換されます。この記事は、画像の枚数ごとの表示を確認するためのテスト用です。

画像なし

jack @jack
just setting up my twttr
Twitter で見る

画像1枚

NASA @NASA
Brewing up baby stars ⭐ @NASAWebb used infrared light to peer through the dust in this nebula, revealing many stars of different ages. This helps us study how stars change over time.
A young star cluster filled with many stars that display Webb’s unique eight-pronged diffraction pattern. At its center is a yellow star which sports the largest diffraction pattern. To the left of the star, there is a region filled with yellow dust and gas. This yellow region extends from the bottom, covering about two-thirds of the image. The yellow region has several blue stars of different sizes embedded within. The top third, which lies outside of the yellow region, holds a few bright protostars, within dense gray gas. Those stars illuminate the gas, making it appear blue. A few red outflows from other protostars are visible above this grayish-blue region. To the right of the central star, there is a clumpy, flame-like plume of red dust and gas with protostars that emit a soft white light within. The plume is surrounded by more dense gray gas and dust.
Twitter で見る

画像2枚

NASA @NASA
Welcome home! Crew-12 splashed down in the Pacific on Thursday, Oct. 8. Their 237-day mission aboard the @Space_Station included research into medicine, quantum science, and 3D-printing with metal in low Earth orbit. https://go.nasa.gov/4elVwzA
Crew-12's spacecraft — attached to four large parachutes — descending through a cloudy daytime sky.The members of Crew-12 inside of their spacecraft post-splashdown. They are strapped into their seats, smiling and waving.
Twitter で見る

画像3枚

SpaceX @SpaceX
This will be the second and fourth flight for the two side boosters, which previously supported the launch of the GOES-U, Viasat-3 F3, and Roman Space Telescope missions
Twitter で見る

画像4枚

NASA @NASA
Destination: @Space_Station📍 NASA’s SpaceX Crew-13 mission has successfully launched! The Dragon spacecraft carrying the crew is set to dock at about 7pm ET (2300 UTC) tonight, kicking off several months of scientific exploration. Watch with us here! https://go.nasa.gov/4xS9r7L
A SpaceX Falcon 9 rocket with the company's Dragon spacecraft on top is seen at sunset on the launch pad. The sky is mostly covered with different kinds of clouds: thick, fluffy ones at the bottom and wider, more spread out ones in the rest of the sky. The Sun's light turns the bottom right portion of the sky orange.NASA's SpaceX Crew-13 mission members CSA (Canadian Space Agency) astronaut Joshua Kutryk, left, NASA astronauts Luke Delaney, middle left, and Jessica Watkins, middle right, and Roscosmos cosmonaut Sergey Teteryatnikov, right, wave to a crowd (not seen) after walking out of a building.A Crew-13 member waves out of a black Tesla's open window as they proceed to the launch pad. The car's license plate reads "Lucky 13."A SpaceX Falcon 9 rocket carrying the company's Dragon spacecraft launches. There is a bright column of fire under the rocket as it moves upward. Clouds of vapor spread out below the rocket, almost blending into the similarly shaped clouds in the sky.
Twitter で見る

動画付き

SpaceX @SpaceX
Falcon 9’s first stage lands on LZ-4
Twitter で見る

GIF付き

GIPHY @GIPHY
@flexasaurusrex @jaendotart @CultCryptoArt @Kaprekar_Punk
Twitter で見る

取得に失敗した場合

存在しない ID を指定すると、取得に失敗してもビルドは止まらず、ツイート URL のリンクとして残ります。

https://x.com/i/status/0000000000000000000

テストチェックリスト

  1. 画像なし — ヘッダー・本文・フッターだけのカードになる
  2. 画像1枚 — カード内に全幅の画像が1枚表示される
  3. 画像2枚 — 画像が横に2つ並ぶ (昔の Twitter 風)
  4. 画像3枚 — 左に大きく1枚、右に上下2枚
  5. 画像4枚 — 2×2 のグリッド
  6. 動画付き — ポスター画像つきの <video> プレイヤーが表示され、クリックで再生できる
  7. GIF付き — 音声なしで自動ループ再生される
  8. 本文中の URL がリンク表示され、そちらのクリックでその URL へ遷移する
  9. カードの他の部分 (画像・ヘッダー・フッター) をクリックするとツイート本体が開く
  10. 本文が長く URL を含むツイートでも、カードが分断されず1つの枠に収まる
  11. 取得失敗分のエントリが .cache/og-data.json に error としてキャッシュされる