【Mastodon】WordPressのサイドバーにTwitterみたいな最新フィードを入れたい

PC・スマホ・Web

Mastodon でも、ブログサイドバーに Twitter みたいな最新フィードを入れたい!

とは思ったものの、意外と簡単ではありませんでした。

それなりの答えにたどり着くまでに半日かかりました。皆さんにはこのような無駄な時間の使い方をしてほしくないので、ここで共有しておきます。

結論! Mastofeed が良い!

まず結論。Mastofeed というサイトが一番良かったです。

Mastofeed - embeddable Mastodon feeds

こうなります。

Mastofeed

設置がめっちゃ簡単。見た目がかっこいい。プロフィール写真が表示される。ライトテーマ・ダークテーマの設定も可能。

ただし、欠点はあります。

  • 直近の何件を表示するかが選べない(フレームの高さは決められる)
  • ブースト(リツイート)、お気に入り(いいね)の数が表示されない。
  • ブログカードが表示されない。

ブログカードっていうのは、↓これです。URLを貼ると、アイキャッチ(サムネ)・タイトル・本文の冒頭が見えるやつですね。

ブログカード

欠点はあるものの、それほど致命的ではないので、Mastofeedに落ち着きました。

参考サイト

Fedi.Tips (@feditips@mstdn.social)
Do you want to embed Mastodon posts within a WordPress page? The WordPress "Embed" block may not work properly for all servers. A surer method is to copy the ...

試したけど使わなかったもの

Include Mastodon Feed (Wordpressプラグイン)

WordPress のプラグイン検索で「Mastodon」と検索すると出てくる。

Include Mastodon Feed

設置は簡単です。また、表示する件数も変更可能。ブログカードも表示される。

ただし、見た目が完全に2ch です。時刻の右に ID:~~ って書きたい。

まぁそれは許容できるとしても、「SNSの埋め込みだ」と伝わらないのは、ちょっといただけない。プロフィール写真が小さいせいでしょうか。

もしかしたら、CSS をイジれる人であれば、そういった細かいところは調整可能なのかもしれません。

Shortcode Mastodon Feed (Wordpress プラグイン)

Shortcode Mastodon Feed

こちらも WordPress プラグイン。

原始的すぎるw

「読み込み失敗したのか?」って思ってしまう。前のは投稿1つごとに背景色で区切られてたけど、それすらない。

もし自分で CSS をいじれる人であれば、こっちの方がいじりやすいかもしれない。

AZET

マストドン ウィジェット ウィザード | Azet.jp
このウィザードであなたのマストドンのインスタンスのタイムラインをホームページに表示できます。

冒頭に書いた「半日かかった」というのは、実はこれを使えるように試行錯誤していた時間でした。

もし導入に成功すると、こうなる。

AZET マストドン ウィジェット ウィザード

が、うまくできなかった・・・!

ブーストとお気に入りの数も表示されるし、見た目もスッキリしてるし、本当はこれを導入したかったです。

有限会社アゼットという会社が、100%の親切心で、無料配布しているのが上のリンク。

見た目はかっこいいのですが、導入が「誰でもできるほど簡単」とは言えません。同サイトから JavaScript をダウンロードしてアップロード必要があります。自作サイトを作っている人ならできますが、「FTP」が分からない人はここでつまづくでしょう。

さらに、Wordpress のように自分で構築していないサイトの場合は、ブラックボックスに足をつっこむことになるので、若干つらい。

だがしかし、そこも先人がいます。こちらのサイトで WordPress 向けに JavaScript を作り変えて再配布している人がいます(しかも元サイトに許可まで取っているらしい。めっちゃちゃんとしてる)。さらに、その方法を2記事に渡って徹底解説。

Mastodonのウィジェット
ブログパーツの少なさ Mastodonの初期設定などが済んだので、このブログのサイドバーに自分のタイムラインが…
MastodonウィジェットをWordPressに正しい方法で読み込ませる
以前紹介した方法ではまたエラーがでた 以前のブログ記事Mastodonのウィジェットで紹介したMastodon…

2つのコードのうち、1つは <head>ヘッダーの中に書き込みます。僕は Cocoon を使っているので、アクセス解析のコード認証設定で使う、ヘッダー用コードに書き込みました(403エラーが出て、これ前もやったけど覚えてねーってなって調べ直した)。

AZETサイト内にある2つのコードを貼り付けて、Wordpress 用に「$」を「jQuery」に書き換えて、とやったのですが、結局うまくいかず・・・。2時間以上頑張ったけど、どうにもならず・・・。

もし Cocoon 使ってる人で、このウィジェットの使い方がわかる人がいたら教えてください。

おわりに

Mastofeed おすすめですよ、というお話でした。

こういうフィード埋め込みで心配なのは、サーバー負荷ですよね。ブログを見るだけで、Mastodonサーバーにアクセスがあるわけですから。

僕のブログみたいにアクセスが少なければ大丈夫だろうけど、大きいサイトでも埋め込みをした結果「フィード禁止」とかならないことを祈ります。

コメント

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