How I Built My Share Buttons

The first thing you need to know for this explanation to make sense is that I use Hugo; this lets me easily automate the structure of each webpage via the use of layouts and partials. The partial (as I need to define it) is a repeatable “chunk” of HTML, which replicates itself on all pages that call it in their layout¹ structure.
Additionally, Hugo’s usage of Go allows me to use variables to reference things like “the title of this specific page we’re operating on”, or “the current location of my about page”, or even “the URL to this one image, as we have it so far”².

The second thing you need to know is that the icons I use are part of Font Awesome, which sadly demands account signup for its use. Fortunately the icons I’m using are the free ones, but if you’ve figured out how to get the code to reference a local version of the images, let people know. Also part of font awesome are some css animations, which is how I got my share buttons to bounce.

A glossary of terms/variables: #

General Use HTML: #

a
HTML anchor element. Commonly used for external links (“a href=’[insert link here]’”), but can also be used for same page links.

ARIA “a set of roles and attributes that define ways to make web content and web applications (especially those developed with JavaScript) more accessible to people with disabilities.”

div
Content division. Think of this as a box you can organize content inside; here, the sides are invisible.

id=“end-share”
In this case, this is used to define the endpoint of the skip link³. Note that “end-share” is an arbitrary phrase: any set of characters without spaces can be used for this purpose. Just be sure to be consistent.

rel=“nofollow noopener”
A request to bots not to follow the link (nofollow), and to browsers to run the link as a separate process (noopener).

General Use (s)CSS: #

font-weight
How thick is the font? This is where you mark if the font is bold or not, for example.

:focus
This allows me to specify a secondary appearance/behavior: in this case, it activates when the tabbed navigation has highlighted the element.

:hover
This allows me to specify a secondary appearance/behavior: in this case, it activates when the mouse hovers over the section.

Hugo Specific: #

{{ .Title }}
The title of the webpage.

{{ .RelPermalink }}
The permalink to the webpage.

(Roughly) How I did It. #

Given how I used Font Awesome to render the custom share icons, the first line naturally had to be importing the mess from their website: not the ideal solution (I’d rather be able to call the icons locally), but it’s what I could figure out.

Part 1: The <div>: #

After that came the actual content. First, I defined a <div> to put all of the links in. Here’s what I used:
<div aria-description="A group of share buttons for a variety of social media platforms." class="altcenter">

Let’s go break that down.

“aria-description” is (as the name suggests) an ARIA tool: it allows for a description to be placed in an html element that doesn’t usually have a description; it is different from “aria-label” in that this description is added to the element, rather than supplanting the normal text. “class=‘altcenter’” was used because my normal center class was causing issues at some point in the code process – I’ve removed the code that doesn’t do anything; The CSS of the class this refers to is:

This means: Center text inside the <div> (“text-align: center”,), make sure there’s space around each thingy in the div (“justify content: space-around;”), make the font 1.75x the browser’s base font size (“font-size: 1.75em;”).

All in all, standard HTML and CSS.

Part 2: The NINJA Link: #

If you’ve read some of my other articles with the bouncy share buttons (and didn’t use a keyboard-only navigation method), then I’d bet you never realized the big “Liked what you saw?” header was a skip link. Yet, like any true ninja, it appears for its target (tab navigators) to strike from the shadows. Go on: scroll down and try tabbing through this page.

So, how did I make a giant orange “Press Enter to Skip” link appear out of a seemingly ordinary header?
Trial and Error.

CSS breakdown: #

The method I eventually went with was using an anchor element (which is the typical HTML link, a href antics) with aria elements so it would pass for a header. Here’s what the CSS (or, more accurately, SCSS) involved looks like.

The first part (“a.skip-link”) is the base form of the element.
The color is defined by an SCSS specific variable: variables! If you’re using this on your website, you may need to replace “var(–primary-color)” with your website’s text color.
“test-decoration: none” prevents the link from inheriting the underline most links on my website have by default. “font-weight: 800” is a stylistic choice I try to apply to all of my headers – it is not necessary for this to work.
“justify-content: center;”, “align-items: center;”, and “text-align: center;” position the link in the horizontal center of the page.
“font-weight: 800;”, “margin-top: var(–h2-margin-top);”, “margin-bottom: var(–h2-margin-bottom);”, and “font-size: var (–h2-font-size);” are stylistic choices I apply to all of my headers – they help the NINJA link to disguise itself, but don’t affect its function.

The second and third parts are where the magic happens. The :focus modifier comes into play when (and only when) the NINJA link is “focused”: I.G when someone navigating by tabbing moves onto it.
The ::before modifier allows things to be placed before the main HTML element, thus enabling the giant orange “press enter to skip” message to appear. The :focus condition underlines the text, and its “white-space: pre;” condition allows the “press enter to skip” message to get a line to itself… by letting something ELSE work.

The :focus::before element is slightly more complex. It switches back to the normal link color (“color: var (–link-color);”), adds the message (“content:’(Press Enter to Skip). \A’;”) and asks the page to pretty please put in a new line so it’s not crowded in with the original message. Which, once again, only works if the :focus element has white-space:pre for some fucking reason. After that it’s just styling (font-weight makes the line slighly less thick than the normal pseudo-header, font-style italicizes the message.)

HTML breakdown: #

In comparison to the SCSS, the HTML is quite simple.

<a href="#end-share" class="skip-link" aria-label="Click here to skip past the share buttons." role="heading" aria-level="2">Liked what you saw?</a>

The first part (a) defines this as an anchor element. “href” defines where the link goes: “#end-share” directs link users toward whatever element has “id=‘end-share’” – which, in this case, is some text in its own paragraph, shoved right below the group of buttons. “class=‘skip-link’” states that the anchor needs to use the aforementioned (S)CSS, “aria-label” replaces the normal text with an alternate message, so that people with poor vision can still identify and use the NINJA skip link. Finally, “role=‘heading’” and “aria-level=‘2’” make this element seem like a heading: allowing itself to remain camoflaged to people who don’t need it.

Part 3: the Share Buttons Themselves: #

I’m going to grab one of the links from the partial, so that we can break it down.

<a href="https://twitter.com/intent/tweet?url={{- $.Permalink}}&text={{- $.Title}}" rel="nofollow noopener" class="share-button fa-brands fa-twitter fa-bounce" aria-label="Twitter share button"></a>

Pro tip: if you’re going to include share buttons on your site, do yourself a favor and use a social share link generator, put an example URL in where it prompts, copy-paste that into the href, then replace the example URL with the page specific URL. And that’s basically what I’m doing. Hugo just lets me automate it with the {{- $.Permalink }} and {{- $.Title }} page methods (The $ references the page the partial is using); The latter lets me autopopulate the page’s title in the share post.

The rest is easier to explain. “rel=‘nofollow noopener’” is standard protocol to keep things safe for your users and simple for your bots. “aria-label” has already been discussed: in this case, we need to replace the normal message because there isn’t one: there’s only an image.
The classes are where the magic happens. The share-button class almost exclusively exists to remove the default underline for links; the others are font awesome’s prebuilt classes. “fa-brands fa-twitter” is what makes the twitter icon appear, and “fa-bounce” is an included animation that font awesome comes with, and is how the share buttons bounce.

And that’s basically how it works! Now comes the cleanup. Make sure you close out the div, and give an element that’s below the links “id=‘end-share’” property so the NINJA skip link knows where to direct people. Here’s what I used:

<p id="end-share" class="center"> Sharing is always appreciated. </p>

Final Warnings: #

If you aren’t using SCSS, you’ll need to hardcode anything I used a variable for⁴. If you aren’t using hugo to build your website, you’ll need to customize the links for each page (or find an equivalent variable that works with your website’s tools). Start by checking these if you’re having issues.

If you’re testing your links and the social media website is complaining that the link is invalid: you can’t share links to your localhost port. If you’re running into a different issue, make sure there are no spaces in the middle of the share link, that it’s a valid share link, and that there aren’t any weird quotation marks lurking around.

If things you don’t want on the same line end up on the same line: <br> is your friend. It’s the HTML new line tag.