WordPressテーマのSimplicityにマストドンのシェアボタンを設置してみた

mastodon.social – Mastodon

以前に何度かマストドンという分散型のSNSをご紹介いたしました。

mstdn.jp - mstdn.jp ここ最近噂になっている「マストドン」というWebサービスが気になったので利用してみました。 ...

そのマストドンのシェアボタンの機能を作成した方がいたので、当サイトでも設置してみることにしました。

久しぶりのQiitaなので初投稿です。 #作った経緯 皆さん、マストドンブーム(?)が落ち着きましたが、いかがでしょうか。 私はTwitterからすっかりマストドンに生活スタイルが変わりました。 マストドン、楽しいですよね。 でも...

sns-buttons.php

Simplicityは「themes/simplicity2/sns-buttons.php」でSNSのシェアボタンを表示しているので、sns-buttons.phpにマストドンのシェアボタンを記述します。私は「<ul class="snsb clearfix snsbs">」内の最後にliとして下記のように記述しました。

<li class="mastodon-btn-icon"><a target="_blank" href="https://mastoshare.net/post.php"><span></span></a></li>

次にCSSで見た目を整えます。

css

シェアボタンをSimplicityのデザインに近づけつつ、カラーをマストドンテイストにします。また、PCでは「Mastdon」、モバイルでは「M」というテキストを表示させます。

style.css

PCでのスタイルは下記のようになります。

ul.snsbs li.mastodon-btn-icon a {
    font-family: arial;
    background-color: #313543;
}

ul.snsbs li.mastodon-btn-icon a span:before {
    content: "Mastdon";
}

font-familyでフォントを、background-colorでデザインを整えます。contentで「Mastdon」のテキストを表示させます。

mobile.css

モバイルでのスタイルは下記のようになります。

ul.snsbs li.mastodon-btn-icon a span:before {
    content: "M";
}

モバイルでは小さいアイコンで表示しているので、「M」と一文字を表示させます。

シェアボタンと動作を確認

設置したマストドンのシェアボタンの表示を確認します。

シェアボタンの表示

PCのシェアボタンは下記のようになります。

PCのマストドンのシェアボタン

モバイルのシェアボタンは下記のようになります。

モバイルのマストドンのシェアボタン

シェアボタンの動作

シェアボタンをクリックすると投稿するマストドンの情報を求められるので入力します。情報を求められるのは初回のみとなります。

投稿するマストドンのドメインとユーザーIDを入力

アプリが連携を求めてくるので承認をします。

アプリ連携を承認する

マストドンで登録しているメールアドレスとパスワードを求められるので入力します。

メールアドレスとパスワードを入力

二段階認証を登録している場合はトークンを入力します。

二段階認証を登録している場合はトークン

入力がすべて終わり再度シェアボタンをクリックすると、登録したマストドンのドメインへトゥートすることができます。

登録したマストドンのドメインへトゥート

マストドンでトゥートがされていれば成功です。

トゥートがされていれば成功

まとめ

マストドンのシェアボタンの登場を待っていたのでうれしい限りです。あまり深く考えないで設置したので、しばらく様子を見ていきたいと思います。

スポンサーリンク