How I Added a Share Button to My Article Pages in Hugo

I recently wanted to make it easier for readers to share my articles on my blog, so I added social share buttons for some popular platforms. Here’s how I implemented this in Hugo, my static site generator. This approach is flexible, if you use different sections or want to add more networks, adapting is simple.

1. Deciding Where To Show the Share Buttons

First, I chose to display share buttons only on specific sections (example: posts and tech). I edited my single.html template to add this conditional code wherever I wanted the buttons to appear:

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

This tells Hugo to include the share buttons partial for articles in those sections only.

2. Creating the share-buttons.html Partial

Next, I created a new partial file at layouts/partials/share-buttons.html with the following content:

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

<!-- Mastodon Share Button -->
<a class="share-link share-mastodon"
   href="#"
   onclick="shareToMastodon('{{ .Title }}', '{{ .Permalink }}'); return false;"
   aria-label="Share on Mastodon">
  <i class="fa-brands fa-mastodon fa-lg"></i> Mastodon
</a>

<script>
function shareToMastodon(title, url) {
  var instance = prompt("Enter your Mastodon server (e.g., mastodon.social):", "mastodon.social");
  if (!instance) return false;
  var shareUrl = "https://" + instance + "/share?text=" + encodeURIComponent(title + " " + url);
  window.open(shareUrl, '_blank');
}
</script>

<!-- RSS Feed Button -->
{{ $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 Feed">
  <i class="fa-solid fa-rss fa-lg"></i> RSS
</a>

Here’s a quick rundown:

• Bluesky: Opens a new post window with the article title and link prefilled.
• Mastodon: Prompts the user for their Mastodon instance, then opens a share window.
• RSS: Links to my site’s RSS feed.

3. CSS for Share Buttons

At this point, you’ll want the buttons to look nice. Here’s a sample CSS snippet you could add to your main stylesheet or a partial. (I placed it in custom.css in /static/css/ )

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 Icons

To display the icons, I used Font Awesome. Make sure to include the Font Awesome CDN (or your preferred setup) in your head.html partial or site template, for example:

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

(Adjust the version or method as needed.)

5. Any Missing Steps?

• Partial Path: Confirm that your share-buttons.html file is in layouts/partials/.
• Testing Output: Run hugo server locally and load a page in a qualifying section to see if the buttons appear.
• Accessibility: Each button uses aria-label for better screen reader support.
• Future Extensions: You can easily add Twitter, Reddit, or Facebook. Just follow the same pattern as above.

Conclusion

Adding social share buttons to your Hugo articles isn’t hard. You just need a template partial, some HTML/JS/CSS, and (optionally) icons. Now, it’s even easier for readers to help spread the word about your posts.

Pro tip: If you use a different theme or site structure from the Hugo default, just adjust the file paths and sections accordingly.