以前に何度かマストドンという分散型のSNSをご紹介いたしました。
そのマストドンのシェアボタンの機能を作成した方がいたので、当サイトでも設置してみることにしました。
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のシェアボタンは下記のようになります。
モバイルのシェアボタンは下記のようになります。
シェアボタンの動作
シェアボタンをクリックすると投稿するマストドンの情報を求められるので入力します。情報を求められるのは初回のみとなります。
アプリが連携を求めてくるので承認をします。
マストドンで登録しているメールアドレスとパスワードを求められるので入力します。
二段階認証を登録している場合はトークンを入力します。
入力がすべて終わり再度シェアボタンをクリックすると、登録したマストドンのドメインへトゥートすることができます。
マストドンでトゥートがされていれば成功です。
まとめ
- sns-buttons.phpへボタンを設置。
- PCとモバイル用のCSSにスタイルを記述する。
- 初回は投稿するマストドンの情報を入力する必要がある。
- 情報を入力した後、シェアボタンをクリックしてトゥート。
マストドンのシェアボタンの登場を待っていたのでうれしい限りです。あまり深く考えないで設置したので、しばらく様子を見ていきたいと思います。
コメント