【Mastodon】当ブログにマストドンのシェアボタンを設置してみた

 先ほど、当ブログの個別投稿記事ページと固定ページの下部に、マストドンでブログ投稿をシェアするためのボタンを設置してみました。

 本当は、Twitterでシェアするための「ツイート」ボタンと同列に設置できればよかったのですが、技術的に難易度が高いため、個別投稿記事ページではコメント入力欄の手前、個別ページではフッターの手前に設置することで、お茶を濁しました。

 シェアボタンの解説については、下記の記事にあります。そちらを参考に、ボタンを設置いたしました。

参考記事
登録不要のマストドンのシェアボタンを作って更新したQiita

使い方

  1. 当ブログ内の個別投稿もしくは固定ページの中に、Mastodonのタイムライン上でシェアしたいものがございましたら、そのページの下部に移動し、「トゥート」ボタンを押下します。
    トゥートボタン
  2. 初回の場合、マストドンにログインするための情報の入力を求められますので、インスタンスのURLと、そのインスタンスないでのご自分のユーザーIDを入力します。
    インスタンスURLとユーザーIDを入力する(その1) インスタンスURLとユーザーIDを入力する(その2)
  3. 「トゥート!」ボタンを押下し、投稿する。必要に応じて、事前に投稿内容を編集してもよい。
    投稿する
  4. 投稿に成功したことを、インスタンス上で確認する。
    シェア成功!

 最初のログイン情報入力のところで少し戸惑うと思いますが、一度設定すれば、以降はほぼTwitterの「ツイート」ボタンと同じような感覚で使用することが出来ます。

技術的なお話

 私は、以下の方法で、このブログにトゥートボタンを設置いたしました。

 このブログは、WordPressで動作しておりますので、WordPressでブログを開設している方であれば、同様の方法で設置できると思います。

  1. 前提条件として、「PHP Code Widget」プラグインが必要です。導入されていない場合はインストールし、有効化します。
  2. 管理画面の「外観」→「ウィジェット」で、トゥートボタンを設置したい場所に「PHPコード」ウィジェットを設置します。
  3. 設置した「PHPコード」ウィジェットに、次の内容を入力します。
    < ?php
    $mdTitle = urlencode(wp_title('', false));
    ?>
    <p><a href="https://mastoshare.net/post.php?text=<?php echo $mdTitle; ?>" onclick="window.open(this.href, '', 'width=500,height=400'); return false;"><img src="https://mastoshare.net/img/toot.svg" width="75" height="20" title="Mastodon でトゥート: <?php $mdTitle ?/>"></a></p>

    なお、この例では、単純に記事のタイトルをURLエンコードして、トゥートボタン本体プログラムに渡しているだけです。投稿する内容を編集する場合は、各自編集してください。

使用感

 先述の通り、Twitterの「ツイート」ボタンに近い感覚で使用できます。

 しばらく、このブログにのみ設置して様子を見てみますが、問題ないようであれば、「Telmina.com」内で稼働中の他のブログにも設置したいと思います。

このブログで関連すると思われる他の投稿:

0
0

この記事はMastodon, Webに投稿されました タグ: , , , , , , , , , , . このパーマリンクをブックマークする。 Trackbacks are closed, but you can post a comment.

0 comments on “【Mastodon】当ブログにマストドンのシェアボタンを設置してみた

  1. 補足。

    スマホ画面には出てこないようだ(スマホ用テンプレートとウィジェットの構造を考えれば当然)。

    あと、1回シェアしたら、いったんログアウトして再ログインしないとシェアを再実行できない模様。

コメントを残す