Mastodonのタイムラインをウェブページに埋め込む。

さて、Twitterの先行きがなかなか信頼し難いので、Mastodonアカウントを作ってみたのです。

アカウント作成自体は

  1. お好みのインスタンスを選ぶ。
  2. アカウントを作成する。
  3. (必要であれば)プロフィールやアカウントの設定を弄る。

…と、これだけの作業です。簡単。

で、Twitterであれば、公式の『Twitter Publish』ツールを利用することで、タイムラインをウェブページに埋め込むためのウィジェットを作ることができます。例えば以下のようなやつ。

twitter_embed_widget.png

さぁMastodonではどうすればいいのかな…とネットを彷徨ってみると、非常にシンプルでカスタマイズしやすそうなものを発見。

ソースコードを入手したら、最低限行うべき設定。ファイル・mastodon-timeline.js を開いて、変数・ instance_uri , user_id , profile_name を自分のものに書き換えて保存します。

mstdn-timelinejs01.png

自分の user_id が分からないときは、以下のサイト:

などで確認することができます。

ソースコードに付いてきたサンプルページを実際に動作させてみると、こんな感じ:

mstdn-timeline-w01.png

こちら (freefielder.jp/lab/mstdn) でご覧になれます。

更にスタイルシートやJavaScriptをちょっと弄って外観を整え、これまで使用していた Twitterウィジェットに似せてみる:

mstdn_embed_widget.png

どうだ。

実際にページに埋め込んだ感じは こちらのページ (freefielder.jp/magic)で確認できます。

ということで、よろしくどうぞ。

カテゴリ: