先日、Mastodonの個人サーバーを立ち上げたことについて記事にまとめました。
個人サーバーを立ち上げて、ふと思ったのが「ブログのサイドバーにMastodonの投稿って表示できないのかな？」ということ。
これまで、ブログのサイドバーには「てがろぐ」投稿のRSSフィードを取得する形で表示させていました。
ただ、今回Mastodon個人サーバーを立ち上げた理由の一つが「てがろぐはもっとひっそりマイペースに使いたい」だったので、サイドバーに表示させる投稿をMastodonのものに切り替えたいなと思ったわけです。
そこで、早速調べてブログのサイドバーにMastodonの投稿を表示するようにしてみたのですが…思ったよりいい感じかもしれない！
今回は、ブログのサイドバーにMastodonの投稿を表示させる方法についてさっくり説明していきます。
ブログのサイドバーにMastodonの投稿を表示させる
サイドバーにMastodonの投稿を表示するにあたり、参考にさせて頂いたのは↓の記事。
私が利用しているWordPressでは、プラグインを使ってサイドバーにMastodon投稿を表示する方法もあるようなのです。
しかし↑の記事では表示が微妙との記載がありますし、そもそもプラグインをあれこれ入れたくない民なので、記事内で説明されている方法を丸のみ状態で設定しました。
私はただやり方をなぞっただけですが、一応振り返りのつもりで簡単に説明しておきます。
「MastoFeed」でHTMLコードを取得する
MastoFeedというサイトで、ブログのサイドバーに表示させたいMastodonのアカウント情報や表示サイズ、内容を設定していきます。
私はこんな感じで設定(画像見辛くてすみません)。
サーバー(インスタンス)情報のところや、アカウントの入力に@を入れるのか判断に迷ってしまいましたが、@は付けなくて良かったみたいです。
「@yuu_green93@mstdn.midori-biyori.com」がユーザーIDの私の場合、インスタンスURL「mstdn.midori-biyori.com」・ユーザー名「yuu_green93」で大丈夫でした。
あと、入力項目の下のチェック欄は、上から順に
- プロフィールアイコン・名前を表示するか
- 返信を隠すか
- ブースト(再投稿・リツイート)を隠すか
の意味なので、プロフィールは表示するならチェックを入れる、返信・ブーストは表示しないならチェックを入れる必要があります。
「Generate」をクリックすると、下にプレビューの画像の表示が出てくるか確認してください。
下のように表示されていたら設定は問題なく出来ています。
私の場合、項目入力をミスった時に500エラーが表示されていました。
表示が正しく出ていたら、プレビュー画像左上の枠内に表示されているHTMLコードをコピーします。
WordPressの表示設定
次に、コピーしておいたHTMLコードを、WordPressのサイドバーに表示させる設定をしていきます。
場所はWordPressの「外観」→「ウイジェット」。
「カスタムHTML」という項目があるので「サイドバー」に追加します。
サイドバーの項目に「カスタムHTML」が追加されていますので、表示させたい場所(順番)に並び替えた上で、MastoFeedで作成しておいたHTMLコードを貼り付けます。
必要に応じて「タイトル」の項目に「Mastodon」など見出しに表示したいワードを入れてくださいね。
変更を保存すれば、サイドバーにMastodonの投稿が表示されるようになるはずです。
表示される投稿の公開範囲
Mastodonの投稿は投稿ごとに公開範囲を選べますが、選んだ公開範囲によって投稿がサイドバーに表示されるか変わります。
試しに確認しましたが、「公開投稿」「未収載投稿」は表示されており「フォロワー限定投稿」「ダイレクト」は表示されませんでした。
サイドバーに載せたくない投稿は公開範囲を「フォロワー限定投稿」にしておくと良さそうです。
※Mastodon投稿の公開範囲についての解説はこちら↓
【追記】Misskeyの投稿をサイドバーに埋め込む方法
2024年3月にブログのサイドバーに埋め込む投稿をMastodonからMisskeyに変えたので、追記しておきます。
Misskeyの場合は、インスタンス(サーバー)名・表示サイズなどの入力はMastodonと同じように入力すればOKですが、ユーザー名をアカウントの通りに入れてしまうとエラーになるようです。
Misskeyの設定画面「その他の設定」メニューにある「API console」の「Endpoint」に「ｉ」と入力して下にあるSendボタンをクリックすると表示される「Response」内の文字列にidが表示されているので、このidをコピーしてMastoFeedのユーザー名欄に入力することでMisskeyの投稿が表示されました。
MastoFeedでも表示されることを確認していますが、有志の方が作られた日本語版MastoFeedにMisskeyの場合の手順が表示されていますので、日本語版MastoFeedを使った方が楽かと思います。
Twitter(現・X)の代わりに使うのもいいかも
ここまで、Mastodon・Misskeyの投稿をブログのサイドバーに表示させる方法について(私発祥ではありませんが)紹介させて頂きました。
未収載投稿が掲載されたり、カスタム絵文字が絵文字として表示されない(:abcd:のような文字列で表示)といった残念な点もあるにはあります。
しかし、表示が整っていて見やすいのと、Wordpress以外のブログやサイトでもHTMLを設置できるなら使えるのはとても便利だと感じました。
そして、2023年7月頃より、X(Twitter)のプロフィールリンクを貼ってもタイムラインのような表示が出なくなってしまう状態が頻発していますよね。
例えば、私のブログ用Xアカウントのリンクを貼ると、↓のような表示になることがあります。
もしブログのサイドバーでX(Twitter)の投稿を更新通知的に使っていたのであれば、Mastodonで同じような表示が可能になります。
相手の状況に関係なくサイドバーに投稿を表示をさせたいのであれば、今のところMastodonの方が向いているといえそう。
Mastodonなら(サーバーごとの状況はさておき)上層部の方の気まぐれで急に使えなくなる…という事態になる可能性も低いと思われますので、MastodonをX(Twitter)の代わりに使ってみるのもアリかもしれませんよ。
…と、最後に強引にMastodonをおすすめしておきます。笑
それでは、今回はこのへんで。
コメント