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

技術情報
本ページは広告およびアフィリエイトプログラムによる収益を得ています。

mastodon.social – Mastodon

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

ポストTwitterと噂の「マストドン」を使ってみた
mstdn.jp - mstdn.jp ここ最近噂になっている「マストドン」というWebサービスが気になったので利用してみました。 「マストドン」とは 「Mastodon(マストドン)」はドイツに在住しているEugen Rochkoという方...

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

301 Moved Permanently

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のマストドンのシェアボタン
PCのマストドンのシェアボタン

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

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

シェアボタンの動作

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

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

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

アプリ連携を承認する
アプリ連携を承認する

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

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

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

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

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

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

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

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

まとめ

  • sns-buttons.phpへボタンを設置。
  • PCとモバイル用のCSSにスタイルを記述する。
  • 初回は投稿するマストドンの情報を入力する必要がある。
  • 情報を入力した後、シェアボタンをクリックしてトゥート。

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

スポンサーリンク
技術情報
スポンサーリンク
シェアする
ボヘミアンをフォローする
この記事が気に入ったら
フォローしよう
最新情報をお届けします。
スポンサーリンク

コメント

  1. yoja より:

    SimplicityのtwitterボタンをXに変更したく、このブログにたどり着きました。

    「sns-buttons.php」の記述でいきなりつまづいており(ul class=”snsb clearfix snsbs”が見当たらない)、厚かましいお願いで恐縮ですが、もしよろしければ詳しくご教授いただけたら幸いです。

    よろしくお願い致しますm(__)m

    • ボヘミアン より:

      yoja様。当サイトへお越しいただきありがとうございます。
      現在当サイトのPCウェブログはSimplicityではなくCocoonに変更しているので「ul class=”snsb clearfix snsbs”」は既に存在していないので確実な問題解決に至れる返答をすることは難しいのですが、
      下記Simplicityを配布している本家の寝ログ様はSimplicityを利用しており、Chromeのデベロッパーツールでスマホ表示にして検索すると「ul class=”snsb snsb-balloon clearfix”」の存在が確認できています。
      https://nelog.jp/xserver-winscp-sftp
      寝ログ様のサイトを参考にするとyoja様で利用されているSimplicityのtwitterボタンをXに変更することができるかもしれません。

      • yoja より:

        ボヘミアンさま。
        アドバイスを感謝致します。
        改めて確認をして再チャレンジしてみます。
        早速のご返信をありがとうございました。