Overview

Hello! I thought this might be a useful post for those who are using Hugo as a platform for blogging, Since the start of December (2024) - I’m aiming to try and post twice a week and this got me thinking. From the old days of when I used WordPress, you could get a social sharing plugin, to be able to “quick share” to social media platforms. By default Hugo doesnt have this, But there are ways to make this work!

Setup

Using the best of my Google-Fu skills, I found this repository online: https://github.com/Stals/hugo-share-buttons From a quick read, it’s a pretty simple setup, You need to download the share-buttons.html file and place that under layouts\partials\share-buttons.html

Once you’ve downloaded the file, you need to add the following to your hugo site: {{ partial "share-buttons" . }}

Depending on your theme, this might be different.

The theme I’m using is hugo-stack-theme, having dug around under the layouts folder, I decided that the best setup would be to place the Share links under the footer.html layouts\partials\article\components\footer.html. which looks something like this. - I also added some custom text Share with your network! and then the partial link {{ partial "share-buttons" . }}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<footer class="article-footer">
    <p><b>Share with your network!</b></p>
    {{ partial "share-buttons" . }}
    {{ partial "article/components/tags" . }}

    {{ if and (.Site.Params.article.license.enabled) (not (eq .Params.license false)) }}
    <section class="article-copyright">
        {{ partial "helper/icon" "copyright" }}
        <span>{{ default .Site.Params.article.license.default .Params.license | markdownify }}</span>
    </section>
    {{ end }}

    {{- if ne .Lastmod .Date -}}
    <section class="article-lastmod">
        {{ partial "helper/icon" "clock" }}
        <span>
            {{ T "article.lastUpdatedOn" }} {{ .Lastmod | time.Format ( or .Site.Params.dateFormat.lastUpdated "Jan 02, 2006 15:04 MST" ) }}
        </span>
    </section>
    {{- end -}}
</footer>

Next you’ll want to add some content to your hugo.toml or yaml file. - For my site I use hugo.toml.

1
2
3
4
5
[params.shareButtons]
  # https://github.com/Stals/hugo-share-buttons/tree/main
  size = "small"
  icon = "solid"
  networks = ["facebook", "twitter", "bluesky", "mastodon", "linkedin", "whatsapp", "telegram", "email"]

Finally, while on this adventure to get the Share links working, I updated the share-buttons.html file to also include Bluesky and Mastodon. If you want an “updated” version I created a gist link. direct link

Wrap Up

I’ve already set up the social share links on the BWC Hugo site, so sharing this post is just a click away. I hope you find the insights shared here useful and that they save you time in your own projects!

Adding Social Media Share Links

Extending your reach with social share links

Overview

Setup

Wrap Up