Blueskyの投稿をウェブページに埋め込むサービス「Embed Bluesky」が誕生！ほぼXの埋め込みの見た目になります

Embed  Blueskyの使い方

Embed  Blueskyの使い方はとても簡単です！ 

以下のサイトを開きます。

フォームにポストのURLをペーストしてボタンを押すだけです。

下の方のフォームに埋め込み用コードが表示されるので、コピーしてブログなどにペーストすればBlueskyの投稿が埋め込めます。

再度ほかのポストの埋め込みを作りたい場合は、Embed Blueskyのページを再読み込みします。

Embed Blueskyを試してみた例

実際にEmbed Blueskyを試してみると以下のような画面になります。下の方にプレビューも表示されます。

文字だけのポストを埋め込む

文字だけのポストを埋め込む

完全に文字しかないポストを埋め込んでみます。

• https://bsky.app/profile/jdash.info/post/3khwo3jueza2p

うん、まさにXでポストを埋め込んだみたいな表示ですね。右上にあるBlueskyのアイコンの位置も（笑）。

返信したポスト（スレッド形式のポスト）を埋め込む

通常のポストではなく、何かのポストに返信したポストを埋め込んでみます。

• https://bsky.app/profile/jdash.info/post/3kiug7dckvu26

Xの場合は返信したポストを埋め込むとデフォルトで返信先のポストも表示されますが、Embed Blueskyの場合は埋め込んだポストのみが表示されるようです。

画像付きポストを埋め込む

画像が1枚の場合

画像を1枚付けたポストを埋め込んでみます。

• https://bsky.app/profile/jdash.info/post/3khdtnkn6ya2p

ポストした画像は縦長なのですが、正方形にトリミングされるようですね。公式アプリやウェブだと縦長に表示されます。

画像が2枚の場合

画像を2枚付けたポストを埋め込んでみます。

• https://bsky.app/profile/jdash.info/post/3kic2dkcwf32l

4:3の画像だと画像全体が表示されていますね。

画像が3枚の場合

画像を3枚付けたポストを埋め込んでみます。

• https://bsky.app/profile/jdash.info/post/3kh7cnji2xv2i

3枚目の画像がでっかく表示されます（笑）。

画像が4枚の場合

画像を4枚付けたポストを埋め込んでみます。

• https://bsky.app/profile/jdash.info/post/3kgnfoypt5n2c

横長の画像はトリミングされず、全部見えるように縮小されて表示されるのですね。

引用ポストを埋め込む

ぽかのポストを引用したポストを埋め込んでみます。

• https://bsky.app/profile/jdash.info/post/3kilqhkjyrf2t

引用ポスト元のメディア（giphy）は表示されないのかな。

• https://bsky.app/profile/jdash.info/post/3khdo2gkmlq2p

と思ったら引用ポスト元が普通の画像付きのポストは表示されるようですね。

リンク付きポストを埋め込む

URLを付けてリンクカードを表示したポストを埋め込んでみます。

• https://bsky.app/profile/jdash.info/post/3khbltijdt72o

リンク付きポストはX（旧Twitter）でいうところの小さなサムネイル表示のリンク形式になります。

Spotifyのリンク付きポストを埋め込む

SpotifyへのリンクもBlueskyの公式アプリやウェブでは埋め込み型プレーヤーが表示されます。

Spotifyのリンクが付いたポストを埋め込んでみます。

• https://bsky.app/profile/jdash.info/post/3kj4ttd7jwo2n

プレーヤー表示にはならないようですね。

Embed Blueskyの埋め込みコードの仕組み

Embed Blueskyの埋め込みコードが動作られているのかを見てみます。

例えば、以下のポストのURLを埋め込むとします。

https://bsky.app/profile/jdash.info/post/3kj2jm5rdqa2c

埋め込みコードは以下になります。

<span id="jdash.info-3kj2jm5rdqa2c"></span>
<script async src="https://assets.bluesky.lol/js/b1.js" data-handle="jdash.info" data-skeet="3kj2jm5rdqa2c"></script>

よく見ると、ポストのユーザーのURL部分（赤色の太字）の部分とポスト個別のURL部分（緑色の太字）部分を組み合わせて作られていますね。色で分けるとこんな感じです（埋め込みコードを改行しています）。

コードの仕組みがわかれば、自分で埋め込みコードをすぐに作ることができますね。

いかがでしたか。簡単に埋め込みコードを作れて、それもXと見た目がほぼ一緒なので使い勝手が良さそうですよね。

ぜひ使ってみてください。

それでは、よいBlueskyライフを。

私のアカウントは https://bsky.app/profile/jdash.info です。フォローしてね！