てがろぐにシェアボタンを付けてみる

2023/12/14

てがろぐにtwitterやはてブのシェアボタンをつけたかったのでググったメモ。

1 修正するファイルはskin-onelog.html
2 ボタン例
- 2.1 ツイート（post）ボタン作成
  - 2.1.1 ボタン例
- 2.2 はてなブックマークボタン作成
  - 2.2.1 ボタン例
3 ブックマーク

修正するファイルはskin-onelog.html

現在お使いのskin-onelog.htmlを修正します。事前にバックアップを必ずとってください。

<!-- ▼シェアボタン改ここから -->
<div class="sharebutton">
	<ul>
		<li><a href="https://twitter.com/intent/tweet?url=[[PERMAURL:PURE:FULL]]&text=[[COMMENT:TEXT:30]]" title="ツイッターに投稿" target="_blank" rel="noopener" class="share">Twitter</a></li>
		<li><a href="https://b.hatena.ne.jp/add?mode=confirm&url=[[PERMAURL:PURE:FULL]]" title="はてなブックマーク" target="_blank" rel="noopener" class="share">Hatena</a></li>
	</ul>
</div>
<!-- ▲シェアボタン改ここまで -->

skin-onelog.htmlを上書きします。

今回追加したリンクが表示されました。
あとはCSSでデザインを整えてあげるだけでいいですね。
例：リストを横並びにする、など

ボタン例

ツイート（post）ボタン作成

ツイート（post）ボタンが作成できます。
「Xボタン」をクリック、「share button」をクリックします。
set customization optionsからデザインの調整ができます。
その後埋込コードをコピーして完成。

ボタン例

<a href="https://twitter.com/intent/tweet?url=[[PERMAURL:PURE:FULL]]&text=[[COMMENT:TEXT:30]]" class="twitter-share-button" data-show-count="false">Tweet</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

※デフォルトスキンを使って投稿単体を表示するための固有URLが絶対URLで挿入される[[PERMAURL:PURE:FULL]]を利用しているんだけどpostボタンはうまくいかないことがあるかも。
下記のはてブはうまくいったのでX側が原因か？

はてなブックマークボタン作成

はてなブックマークボタンが作成できます。

ボタン例

<a href="https://b.hatena.ne.jp/entry/[[PERMAURL:PURE:FULL]]" class="hatena-bookmark-button" data-hatena-bookmark-layout="basic-label-counter" 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>