Share buttons for blog posts

support
1

I’ve been trying to put share buttons (you know, Facebook, Twitter, reddit etc.) in my blog, but I do not get what I am doing wrong.

There are two tutorials I’ve found on internet. These are the links:

https://gohugohq.com/partials/add-this-social-sharing/

https://gw.coregossip.com/how-i-added-share-icons-to-my-hugo-site/

The first uses addthis.com resources to make the share buttons, but I didn’t work in my site. The second should be simpler, but the buttons don’t appear in my site.

Is it possible for you to ELI5 how to put share buttons in every post I wrote? I get I have to edit single.html and maybe some partials, but that’s it. I can’t go further than this.

I’m using ananke theme, btw.

2

Would you mind to share your repo? so I or anyone here can see how far you implement the share button on your blogpost

1 Like
3

Nope. I don’t mind.

This is the link.

4

There is a simpler and cleaner way to add social media sharing buttons to your Hugo site without using JS.

2 Likes
5

As far as I can see you already have addthis sharing buttons on the bottom of your post, but in my opinion you should consider using cleaner way just like @alexandros say.

I suggest you to put the sharing button between the tag and disqus element in layouts/_default/single.html

6

This might be more involved than what you’re looking for, but here’s how I construct my social share buttons in a Hugo context. The code below is in a partial that I can drop into a single template. The SVG’s can any image you like.

{{ $title := .Title }}
{{ $url := printf "%s" .URL | absLangURL }}
{{ $body := print $title ", by " .Site.Title "\n" .Params.description "\n\n" $url "\n" }}
<div id="sharing">
  <a href="http://www.facebook.com/sharer.php?u={{ $url }}" class="facebook" aria-label="share on Facebook">
    {{ partial "svg/facebook.svg" (dict "size" "32px") }}
  </a>

  <a href="http://twitter.com/share?url={{ $url }}&text={{ $title }}&via={{with .Site.Social.twitter }}{{ . }}{{ end }}" class="twitter" aria-label="share on Twitter">
    {{ partial "svg/twitter.svg" (dict "size" "32px") }}
  </a>

  <a href="mailto:?subject=Check%20out%20{{ $title }}.&body={{ $body }}" class="twitter" aria-label="share on Email">
    {{ partial "svg/email.svg" (dict "size" "32px") }}
  </a>
</div>
2 Likes
7

Thank you! Your suggestion worked like a charm. I implemented it in my blog and it is working very well.

P.S.: I like ananke theme very much.

1 Like
8

Just a note .URL will be removed at some point.

Replace with .Permalink

3 Likes
9

I have added the social share icons (facebook, twitter, linkedin, whatsapp, email) on every page on my blog website generated with hugo.

Visit my blog website page https://codingnconcepts.com/ and checkout any post, i have added social share icons at the end of each post

I have also created a post to help, how you can do the same by creating socialshare.html partial

10

How does Hugo know to use the partial social-share.html?

11

Incase anyone needs a new and simple approach here’s the one I made with the help of buttons.social
Simple Share Buttons for Hugo