Hugo sharing buttons

Hi, I was searching for some configurable static share buttons for Hugo and couldn’t find any. I saw links to sharingbuttons.io but it obviously didn’t use any of Hugo’s templating to use the page’s link and title,
so I’ve tried to make my own partial template based on the sharingbuttons, initially for myself and then improved it to share with everyone: hugo-share-buttons

And so after adding the partial from your root config file you can change the networks you want to show, change the icon and size, and also hide the buttons on specific pages.

Here is what I use for myself:
hugo-share-buttons-small

And here are the different versions you can set up
sizes:


icons:
hugo-share-buttons-icon-options

I go into more detail on all the settings and the setup on the GitHub page.

Please check it out, I’ll try to help if something doesn’t work on your setup.
I’m open to any ideas or recommendations, also please tell me if any part of the documentation needs improvement.

5 Likes

Nice job!

thanks for sharing, it ill bw nice if you use it on your own website or on a demo link one can check the functionality before integrating it into the project.

But seems nice, will test

thanks

1 Like

it ill bw nice if you use it on your own website or on a demo link one can check the functionality before integrating it into the project.

I’m not sure how would I make a demo link without hosting a separate Hugo website, but I guess that’s an option for the future.
Here is a page from my blog you can scroll down to the bottom, before the comments. Although I only use 4 buttons, like in the image above.

Blog page with buttons

i am unable to see where you use this button i only see discuss comments and share buttons??? is this what you mean??

Hm, no, they should be visible under “Sharing is caring!”. Can you please say what browser/OS are you using? (I’ve tried a bunch of the ones I have and they show up ok)

i have an addblocker so that means the buttons are being flaged as ads, this is one thing i am trying to avoide to make a button without being considered as an add etc.

Didn’t know Adblock was also blocking social buttons deliberately, but I don’t think that adding obfuscation into html/css is a good idea, and if the user installed the plugin that blocks social buttons as a part of its functionality, then I shouldn’t prevent it.

2 Likes