はてなブログに「タイッツーで共有」ボタンを追加するカスタマイズ

もうX（Twitter）をほぼロム専にすることは以前の記事で書いたとおりだが、タイッツーをメインの居場所とするにあたってあると便利だなーと思うものがあった。タイッツーへのシェアボタンである。

taittsuu.com

タイッツーにはテキスト共有機能があるので、シェアボタンを設置することは容易だ。私はこのブログの更新通知をXや他のSNSにもしているので、タイッツーのボタンがあるだけでもコピペの手間が省けて楽である。

自作タイーツボタンの変遷

思い立ったが吉日、さっそく管理画面をいじってみた。

テキストリンク

最初は「タイーツする」というテキストリンクを雑に設置してみた。機能としては十分だが、とても周りと浮きまくる。

ボタン

さすがに殺風景すぎたので、ツイートボタンと同じ大きさでタイーツボタンを作った。ここから推奨しているアイコンをダウンロードし、ペイントで文字を入れただけの超突貫ボタンである。

はてブとFacebook、ツイートとタイーツで似た感じの大きさなのでまぁ調和が取れているように感じる。

スクエアボタン

その後、はてなブログ公式がMastodonとMisskeyのシェアボタンを追加できるようにした。両者とも小さなスクエアアイコンで表現されているため、それに合わせた形に変えてみた。

おそらくだが、近々この「ツイート」ボタンは「X」というスクエアボタンに変わるのではないかと思っている。そうすると4つのアイコンが綺麗に並んで見栄えがよくなりそうだ。

（10/7追記）昨日、はてな公式側でXアイコンに変わった。

タイッツーシェアボタン設置方法

以下の手順で設置する。2と3の順序は問わない。

任意のアイコン画像をフォトライフにアップロード
ソーシャルパーツ設定を外す
記事本文末尾にHTMLモジュールを追加

任意のアイコン画像をフォトライフにアップロード

まずタイッツー用のアイコン画像を適当に用意し、自分のはてなフォトライフにアップロードする。

アルバムからアイコン画像を右クリックし、「画像アドレスをコピー」から画像のURLをコピーしておく。

ソーシャルパーツ設定を外す

デザイン設定＞記事＞ソーシャルパーツから、記事下（または上下）に表示するソーシャルパーツのチェックボックスを全て外す。

記事本文末尾にHTMLモジュールを追加

※「記事本文末尾」のカスタマイズははてなProの機能

デザイン設定＞記事本文末尾から、モジュール追加ボタンを押す。

help.hatenablog.com

この記事の「記事のブックマーク・シェアをしてもらいたい」のサンプルコードをコピーし、HTMLモジュールに貼り付ける。

最近追加されたMastodonやMisskeyのアイコンはサンプルコードに入っていないので、必要に応じて付け加える。

<div class="social-button-item">
  <a class="entry-share-button entry-share-button-mastodon" target="_blank" rel="noopener noreferrer" href="https://blog.hatena.ne.jp/-/share/mastodon?text={Title}+-+{BlogTitle}%0A%0A{Permalink}" title="Mastodon で共有する"></a>
</div>
<div class="social-button-item">
  <a class="entry-share-button entry-share-button-misskey" target="_blank" rel="noopener noreferrer" href="https://blog.hatena.ne.jp/-/share/misskey?text={Title}+-+{BlogTitle}%0A%0A{Permalink}" title="Misskey で共有する"></a>
</div>

タイッツーのコードをこのように書き、同じモジュール内に適宜付け加える。

<div class="social-button-item">
  <a href="https://taittsuu.com/share?text={Title}+-+{BlogTitle}%0A%0A{Permalink}" title="タイッツーで共有する"><img src="【フォトライフにアップした画像URL】"></a>
</div>

全体としてはこのようなコードになる。（10/7追記：Xアイコン変更に伴いコード修正）

<div class="entry-footer-modules-custom-template">
  <div class="social-buttons">
    <div class="social-button-item">
      <a href="https://b.hatena.ne.jp/entry/" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-normal" data-hatena-bookmark-lang="ja" title="このエントリーをはてなブックマークに追加"><img src="https://b.st-hatena.com/images/v4/public/entry-button/button-only@2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="https://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>
    </div>
    <div class="social-button-item">
      <iframe src="https://www.facebook.com/plugins/share_button.php?href={URLEncodedPermalink}&amp;layout=box_count&amp;size=small&amp;appId=185584791539774&amp;width=69&amp;height=40" width="69" height="40" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share"></iframe>
    </div>
    <div class="social-button-item">
      <a class="entry-share-button entry-share-button-twitter test-share-button-twitter" href="https://twitter.com/intent/tweet?text={URLEncodedTitle}+-+{URLEncodedBlogTitle}&amp;url={URLEncodedPermalink}" title="X（Twitter）で投稿する"></a>
    </div>
    <div class="social-button-item">
      <a href="https://taittsuu.com/share?text={Title}+-+{BlogTitle}%0A%0A{Permalink}" title="タイッツーで共有する"><img src="【フォトライフにアップした画像URL】"></a>
    </div>
    <div class="social-button-item">
      <a class="entry-share-button entry-share-button-mastodon" target="_blank" rel="noopener noreferrer" href="https://blog.hatena.ne.jp/-/share/mastodon?text={Title}+-+{BlogTitle}%0A%0A{Permalink}" title="Mastodon で共有する"></a>
    </div>
    <div class="social-button-item">
      <a class="entry-share-button entry-share-button-misskey" target="_blank" rel="noopener noreferrer" href="https://blog.hatena.ne.jp/-/share/misskey?text={Title}+-+{BlogTitle}%0A%0A{Permalink}" title="Misskey で共有する"></a>
    </div>
  </div>
</div>

コード中の変数については以下の記事を参照。

help.hatenablog.com