Blueskyのポスト（投稿）をWebページに埋め込む方法

Blueskyは招待制廃止やサインインしていない状態でも閲覧することができるようになり、誰もが手軽に利用できるサービスとなりました。
パブリックに公開されたこともあり、今後は必要に応じてWebページにも埋め込んで活用したいこともあるでしょう。

BlueskyではEmbed Blueskyというサービスを利用することで、Blueskyの投稿をWebページに埋め込むことができます。
また、以前は対応していなかったBluesky公式も、Web版で埋め込み機能が実装されました。

ここでは、Blueskyのポスト（投稿）をWebページに埋め込む方法を、レスポンシブWebデザインに対応する方法と合わせてご紹介します。
Bluesky公式とEmbed Blueskyサービスを使った方法と、2つの方法をご紹介します。

Bluesky公式の埋め込み方法

対象の投稿の三点アイコンからのオプションから、「Embed post」を選択します。
ポストの埋め込みコードがウィンドウに表示されますので、「Copy code」のボタンをクリックしてポストの埋め込みコードをクリップボードにコピーします。

取得した埋め込みコードを、Webページのファイルの埋め込みたい場所に貼り付けて利用していきます。

そのまま埋め込んでもいいですが、レイアウト調整をした方が良い場合もありますので、サンプルコードを交えて見ていきます。
Webサイトのデザインに合わせてスタイルを適用しやすいよう、CSSクラス「bluesky-post」を付与した親要素のdivタグで、埋め込みコードを覆うようなHTML構造とします。

HTML

<div class="bluesky-post">
<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:hrmf2nq2igstdhimw3lpbiod/app.bsky.feed.post/3kq562q3xkh2h" data-bluesky-cid="bafyreibdz7gkvwgwvvdf24464v7diaokblnmabqara6yck7v3zup45mciq"><p lang="ja">WindowsやMacのPythonをバージョンアップ/アップグレードする方法

  blanche-toile.com/web/upgrade-...
  
  #Webdev #AI #Python #Upgrade #Windows #Mac #macOS<br><br><a href="https://bsky.app/profile/did:plc:hrmf2nq2igstdhimw3lpbiod/post/3kq562q3xkh2h?ref_src=embed">[image or embed]</a></p>&mdash; AKIRA | Webエンジニア / NUOVA SFIDA代表 (<a href="https://bsky.app/profile/did:plc:hrmf2nq2igstdhimw3lpbiod?ref_src=embed">@akirao.bsky.social</a>) <a href="https://bsky.app/profile/did:plc:hrmf2nq2igstdhimw3lpbiod/post/3kq562q3xkh2h?ref_src=embed">Apr 15, 2024 at 11:01 AM</a></blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>
</div>

ポストの埋め込みを確認してみます。
よくあるSNSの埋め込みのデザインです。

埋め込みコンテンツ内の操作として、ポストの文章部分を選択するとBlueskyアプリに移動します。
また、ユーザー名やアカウント名を選択するとプロフィールページに移動し、Blueskyのロゴを選択するとBlueskyアプリのトップページ（自分のアカウント）への移動となります。
リンクカードの表示がある場合、ポストの文章部分を選択するとBlueskyアプリに移動し、リンクカード部分を選択するとリンクのページにアクセスします。リンクカードがなくてもページURLはそのリンクのページにアクセスします。
ハッシュタグは選択してもBlueskyの検索結果に飛ばずエラーページとなります。まだ機能していないようです。
いいねやリポスト、返信コメントとは埋め込みコンテンツで操作することはできません。

以下、実際の埋め込みになります。

WindowsやMacのPythonをバージョンアップ/アップグレードする方法 blanche-toile.com/web/upgrade-… #Webdev #AI #Python #Upgrade #Windows #Mac #macOS

[image or embed]
— AKIRA | Webエンジニア / NUOVA SFIDA代表 (@akirao.bsky.social) Apr 15, 2024 at 11:01 AM

Bluesky公式の埋め込みはレスポンシブWebデザインに対応しております。
ただ、そのまま埋め込むとレイアウトは左寄せとなりますので、Webページに綺麗に表示したい場合は少しCSSでスタイルを調整するといいでしょう。

一応、埋め込みのデフォルトのスタイルとして、幅が100％で最大幅が600pxと設定されております。
それも踏まえて以下のように、中央寄せにするなど調整を行います。

CSS

.bluesky-post {
  width: 92%;
  margin: auto;
}

.bluesky-post .bluesky-embed {
  margin: auto;
}

スマートフォンなどでコンテンツ幅が全体を占めてしまうと、ユーザーがコンテンツをスクロールしにくくなりますので、CSSクラス「bluesky-post」の親要素で、widthプロパティでコンテンツ幅を調整しておくといいでしょう。

ちなみに、テキストのみでは以下のようなシンプルな表示となります。

WordPressで構築したサイトで投稿や固定ページに埋め込み場合は、ブロックの追加のウィジェットの項目にある「カスタムHTML」のブロックを使って埋め込みます。

Embed Blueskyを使った埋め込み方法

Embed Blueskyは、Blueskyのポストの埋め込みコードを生成してくれるサービスとなっています。
Embed Blueskyのサイトにアクセスして利用していきます。

Embed Bluesky
https://bluesky.lol/

「Paste the link to the Bluesky post below:」の下の入力枠に、ポストのURLを入れて埋め込みコードを生成します。

Bluesky側でポストの3点アイコンからオプションを表示し、「Copy link to post（投稿へのリンクをコピー）」を選択して、コピーしたポストのURLをEmbed Bluesky側に貼り付けましたら、「Create Snipplet」のボタンを選択します。
「Here is your code snipplet:」の項目に、ポストの埋め込みコードが生成されます。また、プレビューも一緒に確認することができます。
生成された埋め込みコードをコピーして、メモなどに保存して管理しておきましょう。

続いて、Webページ側でHTMLやPHP等、Webページのファイルに埋め込みコードを貼り付けます。
CMSで人気のWordPressであれば、カスタムHTMLのブロックエディタに貼り付ければOKです。

HTML

<span id="akirao.bsky.social-3kilv25hzdh2e"></span>
<script async src="https://assets.bluesky.lol/js/b1.js" data-handle="akirao.bsky.social" data-skeet="3kilv25hzdh2e" ></script>

埋め込みコンテンツ内の操作として、ポストの文章部分を選択するとBlueskyアプリに移動します。
また、ユーザー名を選択するとプロフィールページに移動し、Blueskyのロゴを選択するとBlueskyアプリのトップページ（自分のアカウント）への移動となります。

また、リンクカードを表示したポストでも、埋め込みコードで綺麗にポストが表示されます。

HTML

<div class="bluesky-post">
  <span id="akirao.bsky.social-3kq562q3xkh2h"></span>
  <script async src="https://assets.bluesky.lol/js/b1.js" data-handle="akirao.bsky.social" data-skeet="3kq562q3xkh2h" ></script>
</div>

Embed Blueskyサービスを使ったBlueskyのポストの埋め込み（リンクカード表示）

リンクカードの表示がある場合の埋め込みコンテンツ内の操作としては、ポストの文章部分を選択するとBlueskyアプリに移動し、リンクカード部分を選択するとリンクのページにアクセスします。
ハッシュタグは、Blueskyの検索として機能します。

以下、実際の埋め込みになります。

いいねやリポスト、返信コメント等は、埋め込みコンテンツで操作することはできません。

そのままコードを埋め込んでもいいですが、Embed Blueskyの埋め込みはレスポンシブWebデザインに対応しておらず、スマートフォンなどの画面幅が小さい端末では画面に収まらずレイアウトが崩れます。
レスポンシブWebデザインに対応する場合は、少し調整が必要になります。

Embed Blueskyの埋め込みのレスポンシブ対応

スタイルを適用しやすいよう、CSSクラス「bluesky-post」を付与した親要素のdivタグで、埋め込みコードを覆うようなHTML構造とします。

HTML

<div class="bluesky-post">
  <span id="akirao.bsky.social-3kilv25hzdh2e"></span>
  <script async src="https://assets.bluesky.lol/js/b1.js" data-handle="akirao.bsky.social" data-skeet="3kilv25hzdh2e" ></script>
</div>

続いてはCSS。
埋め込みコードからJavaScriptで展開されるHTML構造では、spanタグの中にiframe要素でコンテンツを表示させています。
親要素をspan要素をフレックボックスとし、子要素となるiframeにフレックスコンテナー内の割合を決めるflex-growプロパティを1とすることで、表示領域が狭くなった時に親要素に合わせて可変するようになります。

CSS

.bluesky-post > span {
  display: flex;
  width: 100%;
  max-width: 580px;
  margin: auto;
  overflow-x: scroll;
}

.bluesky-post iframe {
  flex-grow: 1;
}

max-widthプロパティの580pxは、デフォルトでiframeに指定されている横幅で、埋め込みコンテンツを中央寄せにしたい時などに対応できるように、デフォルトの数値に合わせて指定しています。
またoverflow-xプロパティは、表示領域が狭くなり埋め込みコンテンツの幅が300px以下になる、それ以上は調整できない仕様となっているため、横スクロールでレイアウトが崩れないようにするちょっとした対策です。
最近のモバイル端末は320px以上はあるはずですので問題ないかと思います。（念のために）

WordPressで構築したサイトで埋め込む場合は、Bluesky公式の埋め込み方法でもお話したように、ブロックの追加のウィジェットの項目にある「カスタムHTML」のブロックを使って埋め込みます。