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

技術情報

mastodon.social – Mastodon

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

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

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

http://qiita.com/N_shi/items/8f3ff2d8cd0037bf7a46

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にスタイルを記述する。
  • 初回は投稿するマストドンの情報を入力する必要がある。
  • 情報を入力した後、シェアボタンをクリックしてトゥート。

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

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

コメント