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 を挿入する。
<section class="post-share-sns-section">
<h3>Share with</h3>
<ul class="list-inline text-center">
<li class="list-inline-item">
<a class="bluesky" title="BlueSky"
href="https://bsky.app/intent/compose?text={{ .Title }}%0A{{ .Permalink }}"
target="_blank" rel="noopener noreferrer">
<span class="fa-stack fa-2x">
<i class="fa-brands fa-bluesky"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a class="x-twitter" title="X"
href="http://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}"
target="_blank" rel="noopener noreferrer">
<span class="fa-stack fa-2x">
<i class="fa-brands fa-square-x-twitter"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a class="threads" title="Threads"
href="https://www.threads.net/intent/post?text={{ .Title }}%0A{{ .Permalink }}"
target="_blank" rel="noopener noreferrer">
<span class="fa-stack fa-2x">
<i class="fa-brands fa-square-threads"></i>
</span>
</a>
</li>
</ul>
</section>
上記の html 要素をスタイリングする SaSS
シンプルなので CSS でも簡単に作れるが、弊サイトでは sass でスタイルを管理しているため、下記の sass を加えた。
section.post-share-sns-section {
// brand colors
a.bluesky {
color: #0f7df3;
}
a.x-twitter {
color: black;
}
a.x-threads {
color: black;
}
// ボタンのように見せる
li.list-inline-item {
border: solid;
border-color: #5e5e5e;
box-shadow: 0 5px 0 #aaaaaa;
}
}