自分でマストドンのシェアボタンを作ってみた。
<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に覚えてもらうようにした。一度設定した後も、マウスホバーで再設定できるようにしてある。
もし使ってくれる人がいたら、ブクマとかで教えてもらえると喜びます。
はてなブログだと、デザイン設定で記事本文末尾に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で正確なインスタンスを取得している
Protocol Handlerを使う手法
まずこのQiitaで紹介されているProtocol Handlerを使う手法だが、現行のマストドンではこの機能は削除されているので動作しない。よって使えない。
Mastoshare
SSL証明書が切れていて不安。サーバサイドで処理を行っているのでスケールしなそうという印象がある。ポップアップが出てほしくない。よって今回は採用しなかった。
Donshare
Bootstrapで動いていて結構良さそう。でもサーバサイド処理は必要ないと思う。今回は採用しなかった。
AddToAny
マストドンの他にも沢山のサービスに対応しているのがウリなのだが、Twitterのボタンは既にあるので個人的にはいらない。
fo.llow.socialのシェアボタン
かなり出来が良いと思う。しかし一旦クッションページを挟まないといけなかったり、ライセンスが不明なので商用利用とかを考えたときに心配になると思う。 今回自分が作った実装の貼り付けスタイル(2行書いたら終わるような設計)はこのボタンをかなり参考にした。
