hugo-share-buttons is a partial template that allows you to show social share buttons on your Hugo website without any JavaScript or http requests. It is based on sharingbuttons.io and can look something like this:

or like this:

Copy the share-buttons.html and place it inside layouts/partials, and then use this inside one of your template files: {{ partial "share-buttons" . }}

Probably in the single.html of your theme.

Create a 'shareButtons' section under 'params' in your root config file (i.e. config.yaml).

As a jumping-off point you can use these:

shareButtons:
  size: small
  networks:
    - facebook
    - twitter

[params.shareButtons]
  size = "small"
  networks = ["facebook", "twitter"]

  "shareButtons" : {
    "networks" : [
      "facebook",
      "twitter"
    ],
    "size" : "small"
  }

Also, note that if you're running Hugo locally with hugo server, then you may need to stop it and re-run for changes to take effect.

Instead of copying the .html file, you can also use a submodule. It is more involved but may allow for easier updates in the future.

'networks' supported: facebook, twitter, tumblr, email, pinterest, linkedin, reddit, xing, whatsapp, hackernews, vk, telegram

'size' can be one of

• small
• medium
• large

You can specify 'icon' as one of the following:

• normal (default)
• solid
• circle
• solidcircle

You can specify margins to change the spacing between buttons. Default is 0.5em.

The button size is changed by specifying the font size because everything else is dependent on 'em' numbers. It's sharingbuttons.io's recommended way.

Let's do a bigger example of how 'shareButtons' would look in your config file and the result it produces

baseURL: 'https://yoursite.example.com/'
params:
  author: Nikola Tesla
  shareButtons:
    networks:
      - facebook
      - twitter
      - email
      - reddit
    size: small
    icon: solid
    buttonMargin: 0.2em

baseURL = "https://yoursite.example.com/"

[params]
author = "Nikola Tesla"

  [params.shareButtons]
  networks = [ "facebook", "twitter", "email", "reddit" ]
  size = "small"
  icon = "solid"
  buttonMargin = "0.2em"

{
   "baseURL" : "https://yoursite.example.com/",
   "params" : {
      "author" : "Nikola Tesla",
      "shareButtons" : {
         "networks" : [
            "facebook",
            "twitter",
            "email",
            "reddit"
         ],
         "size" : "small",
         "icon" : "solid",
         "buttonMargin" : "0.2em"
      }
   }
}

You may need to disable share buttons on certain pages, for example, on your privacy policy page. To do this you can add disableShare: true to the frontmatter of this page.

You can find more examples and details on making your own social share buttons in the blog post. Also, please check out my Hugo-related blog posts or useful Hugo shortcodes.