はじめに
Blueskyの公式ブログからポストをWebページに埋め込む方法が公開されました。
How to embed a Bluesky post on your website or blog
Hugoのブログにも投稿できるようにしていきます。
課題と対策
Webページに投稿を埋め込むためのコードは以下のようなものになります。
TwitterやYouTubeの埋込みコードと比較するとだいぶ長いですね…
<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:at2c4dlmd7mmt4hjgdm5buxe/app.bsky.feed.post/3ks54rjnhak2q" data-bluesky-cid="bafyreickomsuhsy6e3wmmguav57eqfeupqncwx4efd5hnsraldani777qe">
<p lang="ja">祝・金曜</p>— ふぉれすけ (<a href="https://bsky.app/profile/did:plc:at2c4dlmd7mmt4hjgdm5buxe?ref_src=embed">@foresuke.com</a>)
<a href="https://bsky.app/profile/did:plc:at2c4dlmd7mmt4hjgdm5buxe/post/3ks54rjnhak2q?ref_src=embed">May 10, 2024 at 21:29</a>
</blockquote>
<script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
このコードをそのままHugoの記事に貼り付けても投稿は表示されません。なのでHugo用のショートコードを作成しました。
しかしショートコードのパラメータが多いため、手作業で埋込みコードからショートコード呼出し用コードを作るのは大変です。
なので埋込みコードからショートコード呼出し用コードを生成するためのWebアプリを作りました。
開発の友 | Bluesky 埋め込みコード
結果
ショートコードを呼び出すと以下のようにBlueskyへの投稿が表示されます。
こんな感じで文字だけの投稿も
祝・金曜
— 祝・金曜 (@foresuke.com) May 10, 2024 at 21:29
画像を含む投稿も
WCB のThe Black Book MUです。濃いのでのんびり飲むのに向いてる。[image or embed]
— WCB のThe Black Book MUです。濃いのでのんびり飲むのに向いてる。[image or embed] (@[image or embed]) [image or embed]
リンクカードを含む投稿も表示可能です。
West Coast BrewingはCBDを配合してるビールが気になってるけど売ってなかったのよね。 www.sake-online.com?pid=169770187[image or embed]
— West Coast BrewingはCBDを配合してるビールが気になってるけど売ってなかったのよね。 www.sake-online.com?pid=169770187[image or embed] (@[image or embed]) [image or embed]
これでまた1歩Twitterからの移行先としてBlueskyが使いやすくなりました。