Building Hugo Social Share Buttons with FontAwesome and Sass

Posted on Sat, May 11, 2024
Tags sass, css, hugo
📝 This article is a translation of the original Japanese post. View original

Building Social Share Buttons Turned Out to Be Quite a Chore

This blog originally used jsSocials - Simple Social Network Sharing Plugin. However, as of 2024 it hasn’t been updated much, and it doesn’t seem to support BlueSky, X, or Threads.

Building it from scratch is a lot of work too, so I referred to the implementation in Adding share buttons to a Hugo site | AAbrain and put together the following.

The Result

Implementing the Social Share Buttons

Prerequisites

You need to load the Font Awesome js. The brand icons are usable on the free tier, so this time I set up a FontAwesome Free Kit.

I also use List group · Bootstrap v5.0 for laying out the position, so if you use list-inline you need Bootstrap 5.

That is only there to display the items in a row, so if you lay them out horizontally some other way, you can remove the list-inline and list-inline-item classes without problems.

The HTML in layouts

With that in place, insert the following html into the spot in your layouts where you want the social share buttons.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

<section class="post-share-sns-section">
    <h3>Share with</h3>
    <ul class="list-inline text-center">
        <li class="list-inline-item">
            <a class="bluesky" title="BlueSky"
            href="https://bsky.app/intent/compose?text={{ .Title }}%0A{{ .Permalink }}"
            target="_blank" rel="noopener noreferrer">
            <span class="fa-stack fa-2x">
                <i class="fa-brands fa-bluesky"></i>
            </span>
            </a>
        </li>
        <li class="list-inline-item">
            <a class="x-twitter" title="X" 
            href="http://twitter.com/intent/tweet?url={{ .Permalink }}&text={{ .Title }}"
            target="_blank" rel="noopener noreferrer">
            <span class="fa-stack fa-2x">
                <i class="fa-brands fa-square-x-twitter"></i>
            </span>
            </a>
        </li>
        <li class="list-inline-item">
            <a class="threads" title="Threads" 
            href="https://www.threads.net/intent/post?text={{ .Title }}%0A{{ .Permalink }}"
            target="_blank" rel="noopener noreferrer">
            <span class="fa-stack fa-2x">
                <i class="fa-brands fa-square-threads"></i>
            </span>
            </a>
        </li>
    </ul>
</section>

The Sass That Styles the HTML Above

It’s simple enough that plain CSS would do, but this site manages styles with sass, so I added the sass below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

section.post-share-sns-section {
    // brand colors
    a.bluesky {
        color: #0f7df3;
    }
    a.x-twitter {
        color: black;
    }
    a.x-threads {
       color: black;
    }
    // make them look like buttons
    li.list-inline-item {
       border: solid;
       border-color: #5e5e5e;
       box-shadow: 0 5px 0 #aaaaaa;
    }
}

Share

Edit on GitHub