ブログのサイドバーにMastodonの投稿を埋め込みしてみた件【Misskeyのやり方も追記】

※当ブログの記事内にはプロモーションが含まれている場合があります。
スポンサーリンク
WordPressブログのサイドバーにMastodonの投稿を表示させた件

先日、Mastodonの個人サーバーを立ち上げたことについて記事にまとめました。

個人サーバーを立ち上げて、ふと思ったのが「ブログのサイドバーにMastodonの投稿って表示できないのかな?」ということ。

これまで、ブログのサイドバーには「てがろぐ」投稿のRSSフィードを取得する形で表示させていました。

ただ、今回Mastodon個人サーバーを立ち上げた理由の一つが「てがろぐはもっとひっそりマイペースに使いたい」だったので、サイドバーに表示させる投稿をMastodonのものに切り替えたいなと思ったわけです。

そこで、早速調べてブログのサイドバーにMastodonの投稿を表示するようにしてみたのですが…思ったよりいい感じかもしれない!

Mastodon投稿・ブログのサイドバーに表示
※画像は2023年8月15日現在のものです

今回は、ブログのサイドバーにMastodonの投稿を表示させる方法についてさっくり説明していきます。

この記事ではWordPressブログにMastodonの投稿を表示させる方法について説明していますが、埋め込むためのHTMLコードを発行する段階までは、HTMLの設置が可能なサイト・ブログにおいても同様の流れになると思われます。

スポンサーリンク

ブログのサイドバーにMastodonの投稿を表示させる

サイドバーにMastodonの投稿を表示するにあたり、参考にさせて頂いたのは↓の記事。

Mastodonのタイムラインウィジェットをサイトに設置する方法 - ブロギングライフ
...

私が利用しているWordPressでは、プラグインを使ってサイドバーにMastodon投稿を表示する方法もあるようなのです。

しかし↑の記事では表示が微妙との記載がありますし、そもそもプラグインをあれこれ入れたくない民なので、記事内で説明されている方法を丸のみ状態で設定しました。

私はただやり方をなぞっただけですが、一応振り返りのつもりで簡単に説明しておきます。

「MastoFeed」でHTMLコードを取得する

MastoFeedというサイトで、ブログのサイドバーに表示させたいMastodonのアカウント情報や表示サイズ、内容を設定していきます。

アカウント登録は必要ありませんでした。

Mastofeed - embeddable Mastodon feeds

私はこんな感じで設定(画像見辛くてすみません)。

MastoFeed・入力画面
上から、インスタンス(サーバー)情報・ユーザー名・幅・高さ・UIスケール・テーマ、チェック欄(本文で説明します)

サーバー(インスタンス)情報のところや、アカウントの入力に@を入れるのか判断に迷ってしまいましたが、@は付けなくて良かったみたいです。
「@yuu_green93@mstdn.midori-biyori.com」がユーザーIDの私の場合、インスタンスURL「mstdn.midori-biyori.com」・ユーザー名「yuu_green93」で大丈夫でした。

あと、入力項目の下のチェック欄は、上から順に

  • プロフィールアイコン・名前を表示するか
  • 返信を隠すか
  • ブースト(再投稿・リツイート)を隠すか

の意味なので、プロフィールは表示するならチェックを入れる、返信・ブーストは表示しないならチェックを入れる必要があります。

Generate」をクリックすると、下にプレビューの画像の表示が出てくるか確認してください。
下のように表示されていたら設定は問題なく出来ています。

MastoFeed・HTMLコードとプレビュー
左上の枠内にHTMLコードが表示されている

私の場合、項目入力をミスった時に500エラーが表示されていました。

表示が正しく出ていたら、プレビュー画像左上の枠内に表示されているHTMLコードをコピーします。

WordPressの表示設定

WordPress以外のブログやサイトで設置する場合は、各自の方法でお願いします。

次に、コピーしておいたHTMLコードを、WordPressのサイドバーに表示させる設定をしていきます。

場所はWordPressの「外観」→「ウイジェット」

WordPress・外観のウィジェット

カスタムHTML」という項目があるので「サイドバー」に追加します。

サイドバーの項目に「カスタムHTML」が追加されていますので、表示させたい場所(順番)に並び替えた上で、MastoFeedで作成しておいたHTMLコードを貼り付けます。

必要に応じて「タイトル」の項目に「Mastodon」など見出しに表示したいワードを入れてくださいね。

変更を保存すれば、サイドバーにMastodonの投稿が表示されるようになるはずです。

表示される投稿の公開範囲

Mastodonの投稿は投稿ごとに公開範囲を選べますが、選んだ公開範囲によって投稿がサイドバーに表示されるか変わります

試しに確認しましたが、「公開投稿」「未収載投稿」は表示されており「フォロワー限定投稿」「ダイレクト」は表示されませんでした

サイドバーに載せたくない投稿は公開範囲を「フォロワー限定投稿」にしておくと良さそうです。

※Mastodon投稿の公開範囲についての解説はこちら↓

【追記】Misskeyの投稿をサイドバーに埋め込む方法

2024年3月にブログのサイドバーに埋め込む投稿をMastodonからMisskeyに変えたので、追記しておきます。

Misskeyの場合は、インスタンス(サーバー)名・表示サイズなどの入力はMastodonと同じように入力すればOKですが、ユーザー名をアカウントの通りに入れてしまうとエラーになるようです。

Misskeyの設定画面「その他の設定」メニューにある「API console」の「Endpoint」に「i」と入力して下にあるSendボタンをクリックすると表示される「Response」内の文字列にidが表示されているので、このidをコピーしてMastoFeedのユーザー名欄に入力することでMisskeyの投稿が表示されました。

MastoFeedでも表示されることを確認していますが、有志の方が作られた日本語版MastoFeedにMisskeyの場合の手順が表示されていますので、日本語版MastoFeedを使った方が楽かと思います。

Twitter(現・X)の代わりに使うのもいいかも

ここまで、Mastodon・Misskeyの投稿をブログのサイドバーに表示させる方法について(私発祥ではありませんが)紹介させて頂きました。

未収載投稿が掲載されたり、カスタム絵文字が絵文字として表示されない(:abcd:のような文字列で表示)といった残念な点もあるにはあります。

Mastodon・カスタム絵文字表示テスト(スマホの表示)
2行目にBlobcatのカスタム絵文字が表示されている
Mastodon・カスタム絵文字表示テスト(ブログサイドバーの表示)
カスタム絵文字が表示されていた場所が文字コードになっている

しかし、表示が整っていて見やすいのと、Wordpress以外のブログやサイトでもHTMLを設置できるなら使えるのはとても便利だと感じました。

そして、2023年7月頃より、X(Twitter)のプロフィールリンクを貼ってもタイムラインのような表示が出なくなってしまう状態が頻発していますよね。

例えば、私のブログ用Xアカウントのリンクを貼ると、↓のような表示になることがあります。

X(Twitter)のプロフィールリンクを貼った際の表示
https://midori-biyori.com/miniblog-sns-place より

X(Twitter)にログインしていない状態だと上の画像のような表示になるようです。

もしブログのサイドバーでX(Twitter)の投稿を更新通知的に使っていたのであれば、Mastodonで同じような表示が可能になります。

相手の状況に関係なくサイドバーに投稿を表示をさせたいのであれば、今のところMastodonの方が向いているといえそう

Mastodonなら(サーバーごとの状況はさておき)上層部の方の気まぐれで急に使えなくなる…という事態になる可能性も低いと思われますので、MastodonをX(Twitter)の代わりに使ってみるのもアリかもしれませんよ。

…と、最後に強引にMastodonをおすすめしておきます。笑

それでは、今回はこのへんで。

コメント

タイトルとURLをコピーしました