sass, css, hugo
SNS 共有ボタンを作るのがなかなか手間だった
もともとこのブログでは、jsSocials - Simple Social Network Sharing Plugin を利用していた。 しかし、2024年現在あまり更新されておらず、BlueSky や X、Threads への対応がされていないようだった。
1から作るのも手間がかかるため、Hugoで作ったサイトにシェアボタンを足した | AAbrain の実装を参考にしつつ、下記のように作成してみた。
できたもの
SNS 共有ボタンの実装
導入の前提
Font Awesome の js を導入する必要があるが、brands 系のアイコンが無料枠でも使えるので、今回は FontAwesome の Free の Kit を導入した。
また、List group · Bootstrap v5.0 をレイアウトの位置設定に使っているため、list-inline を使う場合は Bootstrap5 の導入が必要だ。
これは横並びで表示するために使っているので、別の方法で横並び表示をする場合、 list-inline, list-inline-item class は削除して問題ない。
layouts の html
そのうえで、layouts の SNS 共有ボタンを設置したい箇所に下記の html を挿入する。
1<section class="post-share-sns-section">
2 <h3>Share with</h3>
3 <ul class="list-inline text-center">
4 <li class="list-inline-item">
5 <a class="bluesky" title="BlueSky"
6 href="https://bsky.app/intent/compose?text={{ .Title }}%0A{{ .Permalink }}"
7 target="_blank" rel="noopener noreferrer">
8 <span class="fa-stack fa-2x">
9 <i class="fa-brands fa-bluesky"></i>
10 </span>
11 </a>
12 </li>
13 <li class="list-inline-item">
14 <a class="x-twitter" title="X"
15 href="http://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}"
16 target="_blank" rel="noopener noreferrer">
17 <span class="fa-stack fa-2x">
18 <i class="fa-brands fa-square-x-twitter"></i>
19 </span>
20 </a>
21 </li>
22 <li class="list-inline-item">
23 <a class="threads" title="Threads"
24 href="https://www.threads.net/intent/post?text={{ .Title }}%0A{{ .Permalink }}"
25 target="_blank" rel="noopener noreferrer">
26 <span class="fa-stack fa-2x">
27 <i class="fa-brands fa-square-threads"></i>
28 </span>
29 </a>
30 </li>
31 </ul>
32</section>
上記の html 要素をスタイリングする SaSS
シンプルなので CSS でも簡単に作れるが、弊サイトでは sass でスタイルを管理しているため、下記の sass を加えた。