Blueskyの投稿をブログやウェブページに埋め込む方法

埋め込むBlueskyの投稿

今回ブログに埋め込もうとしているBlueskyの投稿はこちらです［リンク］。

SkyView

「Skyview」は手軽にBlueskyの投稿の埋め込みができるサービスとしてGIGAZINEで2023年10月に紹介されていました。

フォーマットとしては以下のとおりです。

<iframe src="https://skyview.social/embed.html?url=［URL］" style="border: none; outline: none; width: 400px; height: 600px;"></iframe>

それでは早速やってみましょう。埋め込み用のHTMLは以下のとおりです。

<iframe src="https://skyview.social/embed.html?url=https://bsky.app/profile/jdash.info/post/3kh7cnji2xv2i" style="border: none; outline: none; width: 400px; height: 600px;"></iframe>

Skyviewで埋め込んでみた結果

実際に埋め込んでみました。

スクリーンショットも掲載しておきます。

それなりに見えますね。iframeで高さの調整をJavaScriptなどで行っていないので複数の画像を入れるとはみ出してしまうところが難点です。

はてなブログカード

はてなが提供しているブログカード形式での埋め込みです。

フォーマットとしては以下のとおりです（公式情報などを参考にアレンジ）。

<iframe title="［タイトル］" src="https://hatenablog-parts.com/embed?url=［URL］" class="hatenablogcard" loading="lazy" style="width:100%;height:190px;max-width:680px; margin: 10px 0px;" width="300" height="190" frameborder="0" scrolling="no"></iframe>

それでは早速やってみましょう。埋め込み用のHTMLは以下のとおりです。

<iframe title="jdash2000✍️笹川: &quot;今日のお昼はモスチキン食べた。 ワンピースコラボって箱はたしかにそうだけど、価格はいつも通り。 味は割とあっさりなんだよね。&quot; — Bluesky" src="https://hatenablog-parts.com/embed?url=［URL］" class="hatenablogcard" loading="lazy" style="width:100%;height:190px;max-width:680px; margin: 10px 0px;" width="300" height="190" frameborder="0" scrolling="no"></iframe>

はてなブログカードで埋め込んでみた結果

実際に埋め込んでみました。

スクリーンショットも掲載しておきます。

ブログカードらしい感じで埋め込まれました。ブログカードなので写真が1点しか表示されないのが残念。

embedlyで埋め込む

このブログでもたくさん使っているembedlyによるブログカードの埋め込みです。

フォーマットとしては以下のとおりです（公式情報などを参考にアレンジ）。

<div><a class="embedly-card" data-card-type="article" data-card-controls="0" data-card-align="left" data-card-width="100%" href="［URL］">［タイトル］</a><script async src="https://cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script></div>

それでは早速やってみましょう。埋め込み用のHTMLは以下のとおりです。

<div><a class="embedly-card" data-card-type="article" data-card-controls="0" data-card-align="left" data-card-width="100%" href="https://bsky.app/profile/jdash.info/post/3kh7cnji2xv2i">jdash2000✍️笹川: &quot;今日のお昼はモスチキン食べた。 ワンピースコラボって箱はたしかにそうだけど、価格はいつも通り。 味は割とあっさりなんだよね。&quot; — Bluesky</a><script async src="//cdn.embedly.com/widgets/platform.js" charset="UTF-8"></script></div>

embedlyで埋め込んでみた結果

実際に埋め込んでみました。

スクリーンショットも掲載しておきます。

画像の位置ははてなブログカードとは違いますが、だいたい同じ感じで表示されます。ブログカードなので複数の画像が表示されないのが残念。

iframelyで埋め込む

iframelyはembedlyと同じくブログカード用のHTMLを作成してくれるサービスです。

フォーマットとしては以下のとおりです。

<div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="［URL］" data-iframely-url="［iframelyの短縮URL］?card=small">［タイトル］</a></div></div><script async src="//iframely.net/embed.js"></script>

それでは早速やってみましょう。

iframelyの場合、iframelyの短縮URLが必要なので、「try URL」のページから、埋め込み用のHTMLを取得する必要があります。今回の埋め込み用HTMLは以下のとおりです。システムの都合上、若干iframelyが作成するHTMLから変更しています。

<div class="iframely-embed"><div class="iframely-responsive" style="height: 140px; padding-bottom: 0;"><a href="https://bsky.app/profile/jdash.info/post/3kh7cnji2xv2i" data-iframely-url="//iframely.net/qaIRMox?card=small">jdash2000✍️笹川: "今日のお昼はモスチキン食べた。 ワンピースコラボって箱はたしかにそうだけど、価格はいつも通り。 味は割とあっさりなんだよね。" — Bluesky</a></div><script async src="//iframely.net/embed.js"></script></div>

iframelyで埋め込んでみた結果

実際に埋め込んでみました。

スクリーンショットも掲載しておきます。

コンパクトな方の表示にしたのでスッキリとした表示になっています。ブログカードなので複数の画像が表示されないのが残念。

oEmbedで埋め込む

投稿のURLを指定して、自動的に埋め込み用HTMLを持ってくるoEmbedですが、こちらは対応していませんでした。

Embed Blueskyで埋め込む

（2024/1/22追記）2024年1月にX（旧Twitter）の埋め込み表示っぽく表示できるサービス「Embed Bluesky」がリリースされました（サードパーティ）。紹介記事はこちら。

Embed Blueskyで埋め込んでみた結果

実際に埋め込んでみました。

スクリーンショットも掲載しておきます。

ほぼ、Xの埋め込みと表示が同じです。微妙なところでいろいろ違うのですが、いままで紹介したサービスの中では再現性は一番高く、ユーザーが一番求めているものだと思います。

まとめ

今のところ、投稿に一番近いのはSkyviewですが、Skyviewのページをそのまんま表示している感じがあってデザイン的には微妙な感じです。Embed Blueskyです。デザインもほぼ申し分ないですが、スマホでの表示などで表示が崩れるなど、これからが期待できるサービスです。（2024/1/22追記）

ほかのブログカードのサービスではブログカード形式では投稿を表示できているので、とりあえずはこの形式がいいのかなと感じました。

みなさんも埋め込みで良いサービスがあったら教えてくださいね。

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