目次 [ close ]
  1. BlueskyTimeline
    1. BlueskyTimelineとは
    2. 埋め込みの基本手順
    3. カスタマイズ用CSS例（任意）
    4. BlueskyTimeline for WordPress
    5. まとめ

BlueskyTimeline

Blueskyでは現在、Xの「Twitter Publish」のような公式埋め込みツールは提供されていません。しかしオープンソースのサードパーティ製ツールを活用することで、自分のホームページにBlueskyのタイムラインを簡単に表示させることが可能です。

このようなツールを使うメリットは、ユーザーが自分のサイトを離れずに最新の投稿を閲覧できる点です。特に企業サイトやブログで、Blueskyの情報をリアルタイムで紹介したい場合に有効です。

BlueskyTimelineとは

BlueskyTimelineは、オンライン上でBlueskyのタイムライン表示用コードを生成できるツールです。特別なプログラミング知識がなくても、表示させたいアカウントのハンドル名を入力するだけで、サイトに埋め込むコードを簡単に取得できます。

関連記事
BlueskyTimeline
BlueskyTimeline
BlueskyTimeline

さらに生成されるコードは、表示サイズやテーマカラーを自由に変更できるため、自分のサイトのデザインに合わせてカスタマイズ可能です。例えば、背景色や文字色をサイト全体のカラーに揃えたり、表示幅を調整して記事のレイアウトにフィットさせたりできます。

埋め込みの基本手順

  1. BlueskyTimelineのサイトにアクセスします。
  2. 表示させたいアカウントのハンドル名を入力します。
  3. 「プレビュー」をクリックしてタイムラインを確認します。
  4. 生成されたコードをコピーし、自分のサイトの表示させたい位置に貼り付けます。

これだけで、サイト上に最新の投稿を表示できます。表示後も、必要に応じて幅や高さ、テーマカラーを微調整することで、よりサイトに馴染むデザインにすることができます。

カスタマイズ用CSS例（任意）

CSSを追加することで、タイムラインの見た目をよりサイトに馴染ませることができます。枠線や角丸、影などは自由に変更可能です。例えば、影を強くしてカード風にしたり、背景色を変えてサイト全体のテーマに合わせることもできます。

現在BlueskyTimelineで出力されるのはこちらです。

<!-- BlueskyTimeline Widget -->
<bst-widget data-handle="自分のハンドル名" data-theme="light" data-width="420px" data-height="500px" data-lang="ja" data-ui="0" data-pin="0" data-rp="0" data-thread="0" data-prof="0"></bst-widget>
<script src="https://blueskytimeline.com/v2/timeline.js" type="module" defer></script>
<!-- /BlueskyTimeline Widget -->

BlueskyTimelineからそのままコピペした埋め込み例

このままでも埋め込みできますがcssを適用させたいので下記のようなコードに変更します。

<a class="bluesky-timeline">
<script src="https://blueskytimeline.com/timeline.js" async data-handle="自分のハンドル名" data-theme="light" data-width="420" data-height="500" data-lang="ja" data-ui="0" data-prof="0" data-pin="0" data-rp="0" data-thread="0"></script>
</a>

この部分を追加することでcssを適用させます。

<a class="bluesky-timeline">～</a>

追加するcssはこれ。

/* Bluesky Timeline */
.bluesky-timeline iframe{
	border:none!important; /* 枠線をなくす */
	border-radius:5px; /* 角を丸く */
}

コードを変更し、cssを適用させた埋め込み例

BlueskyTimeline for WordPress

WordPress環境で使えるプラグイン版も存在します。プラグインをインストールし、Blueskyにログインするだけで埋め込みコードを生成できる便利なツールです。生成されるコードは<iframe>形式なので、記事や固定ページの任意の場所に簡単に設置できます。

ただし、私の環境では以前は動作していましたが、現在は新規ダウンロードや更新が終了しており、利用できない場合があります。それでも、手動でHTMLコードを貼り付ける方法は依然として有効で、安定して表示できます。

プラグイン情報はこちら：BlueskyTimeline for WordPress

まとめ

  • Bluesky公式の埋め込みツールはまだありません。
  • BlueskyTimelineを使えば、簡単にコードを生成してサイトにタイムラインを表示可能です。
  • CSSで見た目をカスタマイズすることで、サイトデザインに合わせた表示ができます。
  • WordPressユーザーは、手動埋め込みも十分実用的です。

これにより、サイト訪問者は常に最新のBluesky投稿を確認でき、記事の情報価値を高めることができます。