Share buttons for blog posts


#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


#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.


#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 @onedrawingperday 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>

#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.


#8

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

Replace with .Permalink