BlueskyのタイムラインをWordPressに埋め込みする方法

Blueskyでは現在Xの「Twitter Publish」のような埋め込みするツールが公式にはありません。しかしオープンソースのプロジェクトがあるのでサードパーティではそのような機能を持ったツールが存在します。

BlueskyTimeline for WordPress

BlueskyTimeline for WordPressはWordPressのプラグインです。インストールして設定画面でBlueskyにログインするだけでタイムラインの埋め込み用コードを生成してくれる便利なサービスです。

ダウンロードはこちらからできます。

HEiON

BlueskyTimeline for WordPress | HEiON 2024.08.24 追記 APIのアドレスが変更になったためタイムラインが取得できなくなっておりました。プラグインのバージョン0.2.4以降にアップデート…

このプラグインを使用するとサイトの好きな場所に<iframe>タグ形式の埋め込みコードを設置できます。

ログインについて

パスワードはBlueskyアカウントのものを利用いただいてもよいですが、外部のプラグインにアカウントのパスワードを記憶させるのはセキュリティー上の理由でお勧めしません。Blueskyアプリ内の設定画面より外部アプリ用のパスワードを作ることが可能ですので、少々面倒ですがアプリパスワードを入力いただくことをお勧めします。

1.設定画面よりアプリパスワードを選択

2.あとから見てわかりやすいアプリの名称を入力

3.パスワードが生成されるのでコピー（この画面を閉じると再確認できません）

SWD.

実際に埋め込みしたタイムライン

このままでもいいのですが、外枠を少し調整します。

※幅や高さはプラグインの設定画面で数値を所定の場所に入力するだけで簡単に調節できるようになっています。

変更前のhtml

<iframe src="https://on8.me/wp-content/plugins/bluesky-timeline/widget/" width="420" height="500" title="BlueskyTimeline"></iframe>

変更後のhtml

<a class="bluesky-timeline"><iframe src="https://on8.me/wp-content/plugins/bluesky-timeline/widget/" width="420" height="500" title="BlueskyTimeline"></iframe></a>

<a class="bluesky-timeline">～</a>この部分が追記箇所です。（～）の部分が元のコードです。

追加css

/* Bluesky Timeline */
.bluesky-timeline iframe{
	border:dashed 1px #333; /* 点線に */
	border-radius:8px; /* 角丸に */
}

css調整後の埋め込みタイムライン