マストドンのシェアボタンを自作した(追記あり)(今日から使えます)

自分でマストドンのシェアボタンを作ってみた。

<a href="#" class="js-mstdn-share-button">Share: {title} {}</a>
<script defer src="https://github.com/windymelt/mastodon-share-button-scalajs/releases/latest/download/mstdn-share.js"></script>

このコードを貼り付けるとテンプレートが展開されてシェアボタンになる。Share: {title} {}としている箇所は文言のテンプレートで、{}がURLで、{title}がタイトルで置換される。

初めてクリックするとポップアップが出てきて、自分のインスタンスがどこなのか教える必要があるけれど、一度使ったらLocalStorageに覚えてもらうようにした。一度設定した後も、マウスホバーで再設定できるようにしてある。

github.com

もし使ってくれる人がいたら、ブクマとかで教えてもらえると喜びます。

はてなブログだと、デザイン設定で記事本文末尾にHTML仕込む感じになると思うっす。

自分はShare: {title} {} #はてなブログみたいに、ハッシュタグ付けるようにしてるっす。

追記(2023-04-10)

↑のコピペが常に最新のリリースを指すようにした。

追記(2023-04-09) `v0.0.11` リリース

デザインの乱れを修正しました。既に貼り付けられて設定されたシェアボタンはそのままになるので、ボタンのURLを書き換えてください。

追記(2023-04-09) `v0.0.10` リリース

うまくポップアップが開かないバグを修正しました。既に貼り付けられて設定されたシェアボタンはそのままになるので、ボタンのURLを書き換えてください。

追記(2023-03-31)

シェア画面が2つ開いてしまうバグを修正しました。問題を修正したシェアボタンを指すようにリンクも修正しました。ただし、既に貼り付けられて設定されたシェアボタンはそのままになるので、ボタンのURLを書き換えてください。

追記(2023-01-28)

けっこうブックマークを貰っているので技術的な追記もしておこうと思う。

類似のシェアボタンはすでに世の中にもあるが、満足しなかったので今回作成するに至った。

今回の実装の優位性

サーバサイド処理を必要としない
- 全ての情報はブラウザのLocalStorageに保存するようにしている。
- JavaScriptが配信できさえすれば動作する。
- GitHubに置いているので、ほぼ永遠に無料で運用可能。
- 仮にGitHubが滅んでも、500KiBをホストできればどこでも動作する。
ボタンを貼り付けた人がシェア文言をカスタマイズ可能である
- 例えばハッシュタグを同時に書き込むといったことが可能。
ライセンスが明確である
- MITライセンスです。好きにいじって使ってください。
WebFingerで正確なインスタンスを取得している