Skip to content

Latest commit

 

History

History
185 lines (150 loc) · 4.36 KB

README.md

File metadata and controls

185 lines (150 loc) · 4.36 KB
Raw

Hugo Share Buttons

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:

How To Use

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:

for YAML for TOML for JSON 
shareButtons:
  size: small
  networks:
    - facebook
    - twitter

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

  "shareButtons" : {
    "networks" : [
      "facebook",
      "twitter"
    ],
    "size" : "small"
  }
For TOML - put it at the end of your [params], or everything else will be a part of [params.shareButtons] and not [params].

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.

Settings

- networks (required)

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

- size (required)

'size' can be one of

  • small
  • medium
  • large

- icon (optional)

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

  • normal (default)
  • solid
  • circle
  • solidcircle

- buttonMargin (optional)

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

- fontsize (optional)

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.

Examples

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

config.yaml config.toml config.json 
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"
      }
   }
}
And this would be the result:

disableShare

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.