Hugoで記事ページにシェアボタンを追加する方法

最近、自分のブログ記事をもっと簡単にシェアできるようにしたくて、人気のSNS向けのシェアボタンを付けてみた。ここでは、私が使っているHugoという静的サイトジェネレーターでの実装手順をまとめる。この方法なら、自分の好きなセクションやSNSにも簡単に対応できる。

1. シェアボタンを表示するセクションを決める

まず、シェアボタンを表示したい記事のセクション（例: posts と tech）だけに絞ることにした。そのため、single.html テンプレートの表示したい位置に以下のような条件分岐を追加する：

{{ if or (eq .Section "posts") (eq .Section "tech") }}
  {{ partial "share-buttons.html" . }}
{{ end }}

これで、posts と tech セクションの記事ページだけにシェアボタンが表示される。

2. share-buttons.html パーシャルを作成

次に、layouts/partials/share-buttons.html という新しいファイルを作成し、以下のコードを追加する：

<!-- Bluesky シェアボタン -->
<a class="share-link share-bluesky"
   href="https://bsky.app/intent/compose?text={{ .Title | urlquery }}%20{{ .Permalink | urlquery }}"
   target="_blank"
   rel="noopener"
   aria-label="Blueskyでシェア">
  <i class="fa-brands fa-bluesky fa-lg"></i> Bluesky
</a>

<!-- Mastodon シェアボタン -->
<a class="share-link share-mastodon"
   href="#"
   onclick="shareToMastodon('{{ .Title }}', '{{ .Permalink }}'); return false;"
   aria-label="Mastodonでシェア">
  <i class="fa-brands fa-mastodon fa-lg"></i> Mastodon
</a>

<script>
function shareToMastodon(title, url) {
  var instance = prompt("自分のMastodonインスタンス（例: mastodon.social）を入力してください:", "mastodon.social");
  if (!instance) return false;
  var shareUrl = "https://" + instance + "/share?text=" + encodeURIComponent(title + " " + url);
  window.open(shareUrl, '_blank');
}
</script>

<!-- RSSフィードボタン -->
{{ $rss := "" }}
{{ range .Site.Home.OutputFormats }}
  {{ if eq (lower .Name) "rss" }}
    {{ $rss = .Permalink }}
  {{ end }}
{{ end }}
<a class="share-link share-rss"
   href="{{ $rss }}"
   target="_blank"
   rel="noopener"
   aria-label="RSSフィード">
  <i class="fa-solid fa-rss fa-lg"></i> RSS
</a>

ざっくり解説：

• Bluesky: 記事タイトルとリンク付きで投稿画面が開く
• Mastodon: インスタンス入力後、シェア画面を新規ウィンドウで表示
• RSS: サイトのRSSフィードへのリンク

3. シェアボタン用のCSS

見た目を整えるには、以下のCSSをサイトのスタイルシート（例: /static/css/custom.css ）へ追加する：

.share-link {
  display: inline-block;
  margin: 0 0.5em 0.5em 0;
  padding: 0.5em 1em;
  border-radius: 4px;
  text-decoration: none;
  color: #222;
  background: #f2f2f2;
  transition: background 0.2s;
}
.share-link:hover {
  background: #e0e0e0;
}
.share-bluesky { color: #0077FF; }
.share-mastodon { color: #6364FF; }
.share-rss { color: #FFA500; }

4. Font Awesomeアイコンの読み込み

アイコンを表示するために、Font AwesomeのCDNをhead.htmlなどに追加すること：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.6.0/css/all.css">

この1行でFont Awesome 6.6.0の全アイコンが使えるようになる。

5. 最後の確認ポイント

• パーシャルのパス: share-buttons.htmlがlayouts/partials/にあるか確認
• テスト: hugo serverでローカル起動して、該当セクションの記事で表示確認
• アクセシビリティ: 各ボタンにaria-labelを使って音声リーダー対応
• 今後追加: 同じやり方でTwitterやRedditなども簡単に追加可能

まとめ

Hugoで記事ページにシェアボタンを付けるのは意外とカンタン。テンプレートパーシャルとHTML/CSS/JS、アイコンさえ揃えばOK。これで読者が記事を広めやすくなった。

Tips:
テーマやサイト構成が違う場合は、パスや条件分岐の部分を自分用に調整するように。もっとSNSボタンを追加したい場合も同じ作り方で増やせる。