nodoame

Mastodonシェアボタンを設置してみた【AddToAny】

2021/09/21
雑記 2
ブログいじり

色々なwebサイトで見かけるシェアボタン。メジャーなものですとTwitterやFacebookでしょうか。その他はてブやPinterest、いくつかのボタンをブログに並べて設置されてる方も多いですよね。記事を共有するのにとても便利!

でも、Mastodonのシェアボタンを設置されてる方ってあまり(というか殆ど)見かけなくて…(;´∀`)
昔はFANBOXにもPawoo(※Mastodon鯖のひとつです)のシェアボタンがあったんですけど、いつの間にか撤去されてましたし。切な!!!(;∀;)
私はこれまでPawooでシェアするときは、ページurlをコピペしてトゥート(※Twitterでいうtweet)していたのですが、シェアボタンがあったら便利だなあ~~~と、思っていたんです。

ということで、幣ブログのシェアボタン群にMastodonが仲間入りですよ。もっと早くカスタマイズしておけば良かった(´▽`;)

シェアボタン

今回使わせていただいたのは【AddToAny】です。Mastodonに限らず様々なサービスに対応しているので、好きなものを選んでカスタマイズしたシェアボタンを設置することが可能です。

AddToAny

AddToAny: Share Buttons and Universal Sharing Platform

Get sharing buttons for your website visitors to share content on any social sharing service. AddToAny is the universal sharing platform for websites and apps.

公式ページへアクセス(´∀`)!chromeの拡張機能もあるのですがそちらは後述するとして、今は上のシェアボタンの方をチョイス。

設定画面

設定画面

fc2ブログなのでAny Websiteで。対応サービスがたくさんあるのでありがたい!!自由に選んでください。でも今回の私のお目当てはMastodonなので、それ以外はスルーです。テンプレートにもよりますが、最初からある程度のシェアボタンは備わっていることも多いです。必要に応じてお好きなものを追加する感じになるかと。

設定画面

設定画面

余計なスクリプトは追加したくないのでここはチェック…。で、取得したコードを自分のブログのテンプレに貼り付けるだけです(*´∀`)表示したい場所にペタッと♪
ただコピペするだけでもいいのですが、もしご利用中のテンプレートにもともと設置されているシェアボタンがあるならば、それにデザインを揃えるのが良いのかなと。その場合はテンプレートに記述されているCSSの内容に倣う形で調整します。


取得したコードにfc2変数を書き込み

それと、シェアボタンでページタイトルとUrlを自動入力したい場合は、取得したコードにfc2変数を組み込む必要があります。 Mastodonのシェアページを開くためのUrlだけを抜き出すと、こんな感じなんですけど↓

https://www.addtoany.com/add_to/mastodon?linkurl=ページURL&linkname=ページタイトル

そこにfc2変数を当てはめます↓

https://www.addtoany.com/add_to/mastodon?linkurl=<%topentry_link>&amp;linkname=<%topentry_enc_title>

<%topentry_link>でエントリーURLを表示、<%topentry_enc_title>でURLエンコード化したタイトルを表示します(<!--topentry--> ~ <!--/topentry-->内で有効になる単変数です)。記事タイトルは<%topentry_title>でも表示されるのですが、それだとタイトルにスペースを含んでいる場合にエラーが出てしまうので、エンコード化したタイトルの方を使います。
Mastodonアイコンは、icongram使用です。sizeやcolorは、ブログのデザインと相談しながら。

<img src="https://icongr.am/simple/mastodon.svg?size=■&color=■" alt>

Icongram: icons on the fly 🚀

Icongram serves you over 10000 icons from your favourite icon library on the fly 🚀


シェアボタンテスト

問題なく設置できたかどうか、テストしてみました。シェアボタンを押してみると、まず先にインスタンスを入力する画面が開きます。Pawooだったら「Pawoo.net」と入力して次へ。

テスト

その後の画面でトゥートできればOKかと!ちゃんとできてるっぽいです!わーい!(*´∀`)

Twitterと違ってMastodonは分散型なので、一度ワンクッション挟んでからシェアする形になるみたいです。


余談・chrome拡張機能

AddToAnyはchrome拡張機能もありまして、そちらを使えばMastodonのシェアボタンを設置していないwebサイトでも、簡単にページをシェアすることが可能です。

chrome拡張機能設定画面

本当にたくさんある^^; FANBOXのPawooシェアボタンが無くなってしまっても、今後はこれでシェアできますね!よく使うサービスのものはカスタマイズしておくと便利かもしれません(*´∀`)

シェアテスト

おわりに

  • 任意のシェアボタンが無い場合は作ってしまえ
  • AddToAnyは便利

以上!

まあ、数ヶ月前の記事で書いたとおり、今はあまりPawooに浮上できていないのですが。
たまには、生存報告がてら、ブログシェアしていけたらいいなと思います。いつも私に優しくしてくださるMastodonの方々、ありがとう。

ところで今朝何気なくサイドバーの死神と少女を見てみたら、official picture bookがとんでもない価格になっててびびりましたよ。価格はその時々で変動するんですけどね。こんなに跳ね上がったのは久しぶりかも。

死に神と少女ピクチャブック

誰が買うの。


ちょこっと追記

関連記事サムネ表示エラー

↑昨日(9/21)の夕方頃から関連記事のサムネが表示されない状態が続いています。どうやらfc2側の障害?のようです。

関連記事のサムネイル独自変数に不具合が出ているようです

関連記事のサムネイル画像を出力する独自変数 <%topentry_relate_thumbnail> に異変があるようです。...

エラー復旧までもうしばらくお待ちください。

よく無料ブログのデメリットとして『障害が起きた場合、マンション住民はみんな一斉に共倒れ』とか言われていますが(私達はマンションの一室を借りているだけなので)、でも個人的にはこれはデメリットではなくメリットだと思っています。
だって、みんな一緒に倒れてくれるんですよ。こわくないですよね。
まあ、今回の件については「マンション住民全員」ではなく一部の住人にのみ起こるエラーなのですが…、fc2ブロガーさんには有識者の方々も多く、公式より早く(笑)情報提供してくださるので心強いです。
無料ブログの良いところは、管理をサービス会社に任せられるところです。おかげで私は、創作に専念できます。

でもブログ自体に資産価値を築いていて収益をあげている方からしてみたら、「いつ沈むか分からない船には乗れない」んでしょうね(^^;)『何のためのブログなのか』によって価値観も異なるということなのでしょう。

9/22 11時20分追記 復旧されたようです。現在は問題なく表示されているかと思います。

Blog Ranking ─────
関連記事

Comments 2

There are no comments yet.

-

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

2021/10/01 (Fri) 13:59
秀嗣

秀嗣

To 10/1 13時台の方

お疲れ様ですよ。
あらら……それは大変でしたね;今はなかなか新規の外来も難しいのでしょうね。ともあれ、代診の方が見つかって良かったです。
というか、急遽決まった引っ越しというのも大変ですね;;そしてセブン銀行の封筒ジワジワ。一体誰がポストに(汗
謎は深まるばかりですな。

あっ孤独のグルメは私も好きです-!でもあれ見てると何か食べたくなりませんか^^;?夜に見ちゃだめだと思いましたよ。究極の飯テロですわ。ゆるキャンはタイトルだけしか知らないのですが、そういえばゆるキャンも「あれ見てるとキャンプしたくなる」って誰かが言ってましたね……というかドラマ化されてるんですね。ソワッ!
異世界食堂はチラッとだけ観たことあるんですけど匂い想像してよだれでるやつです!

疲れているときはおいしいものを食べて寝ちゃいましょ-!おなかが減るとネガティブ思考になっちゃいますし(私の場合は)。今日は肌寒い一日となりましたが、体調などは如何ですか。おいしいものを食べて暖まって下さいね。

skeb無料キャンペーン……(笑
私のところにもskebからお知らせメールが来てました。そうらしいですね!やばいやばい…skebからメールが届くたびに置いてけぼり感が積み重なっていく…!私も早く復帰せねば(;▽;)原稿がおわらない!

家電は大きな出費になるかと思うので、はじめに予算を決めておくのも良いかもです(*´ω`*)
引っ越し作業など大変かと思いますが、ひとやすみしながら荷造り頑張って下さいね。

2021/10/01 (Fri) 17:38

(※パスワードはコメント専用の任意のものです。編集/削除する際に必要となります。また、SECRETにチェックを入れた場合は管理者にのみ表示を許可します。)
雑記