Blueskyの投稿をブログやウェブページに埋め込める「Embed Bluesky」レビュー

SNS「Bluesky」には、記事作成時点では埋め込みコードの作成機能が搭載されていません。有志が作成したウェブアプリ「Embed Bluesky」を使えばBlueskyのポストの埋め込みコードを簡単に生成できるとのことなので、実際に「画像を含むポスト」「リンクを含むポスト」などをどのように埋め込めるのか確かめてみました。

Generate embeddable link previews to posts on Bluesky
https://bluesky.lol/

Embed Blueskyのトップページはこんな感じ。中央の入力欄にBlueskyのポストのURLを入力すると、下部に埋め込みコードと埋め込みのプレビューが表示されます。

試しに、以下のポストを埋め込んでみます。

まず、ポストのURLをコピー。

コピーしたURLをEmbed BlueskyのURL入力欄にペーストして「Create Snipplet」をクリックします。

すると、埋め込みコードとプレビューが表示されます。

生成されたコードを埋め込んでみた結果が以下。

Embed Blueskyの操作方法が分かったので、多様なポストを埋め込んでみました。

◆会話の一部
まず、以下のような会話の一部のポストを埋め込んでみます。

埋め込んだ結果は以下。記事作成時点では、返信先のポストは含まれず単一のポストのみが表示されました。

◆画像を含むポスト
続いて、画像を含むポストを埋め込んでみます。

結果はこんな感じ。

画像を4枚含む場合はどうなるか試してみます。

結果はこんな感じ。

◆リンクカードを含むポスト
リンクカードを含む投稿でも試してみます。

埋め込み結果が以下。リンク部分をクリックすると、Blueskyのポストではなくリンクカードのリンク先にアクセスできます。

◆引用を含むポスト
引用を含むポストでも試してみました。

引用も含んだ状態で埋め込めました。

続いて、引用したポストに画像が含まれている場合はどうなるか試してみます。

画像も問題なく表示されました。

引用したポストにリンクカードが含まれているパターンも試してみます。

記事作成時点では、リンクカードは含まれませんでした。

なお、Embed Blueskyは頻繁にバージョンアップされているため、埋め込みの見た目が変化する可能性もあります。バージョンアップ内容は以下のリンク先で確認できます。

Bluesky.lol Development Changelog
https://myramblings.click/posts/changelog/