Create a “Share on Mastodon” link with Hugo and Tootpick⁠🐘
Updated  by  nm  2023-March-26

Page contents

 

News

2023-February-27  Published this evolving⁠[1] article.

 

What and why

Nowadays many — maybe most — websites include a share button or link that you can use to easily share a web page to a social networking system. Until February 2023, the Infinite Ink website did not have any share buttons because I did not want to encourage Infinite Ink’s visitors to use any messaging system that’s not based on standards. But, now that I’m using Mastodon, which is based on standards (ActivityPub and WebFinger) and free/libre open source software,⁠[2] I’ve decided to include a Share on Mastodon link on some Infinite Ink pages. This share link will, I hope…

  1. help spread the word about Infinite Ink articles,

  2. encourage Infinite Ink visitors to use Mastodon, and

  3. make it easier for me to toot about Infinite Ink updates.

To learn about Mastodon, see Infinite Ink’s #mastodon portal.

 

How

Overview

This “How” section describes the steps I used to set this up. After these steps, some Infinite Ink pages include a link near the bottom of the page that looks something like this:

    Share on Mastodon.

 

And a subset of the Infinite Ink Hugo project looks like this:

INFINITEINK
├── layouts
│   ├── _default
│   │   └── baseof.html
│   └── partials
│       └── tootpick-partial.html
└── static
    └── img
        └── mastodon
            └── logo-purple.svg

 

0. Research and experiment

There are a lot of ways to create a Share on Mastodon link, including…

I first tried share-⁠on-⁠mastodon.social, but did not like that I could not preview a toot without first specifying a Mastodon instance. Then I tried tootpick and, so far, I like it.

The four steps below describe how I set up tootpick.

 

1. Put a Mastodon logo in static

First, I got the current Mastodon small purple logo (logo-purple.svg) from joinmastodon.org/branding and put it in the static/img/mastodon/ directory.

 

2. Create tootpick-partial.html

Next, I created a Hugo partial that creates a page-⁠specific tootpick.org link.

 

A. Strategy

  1. Create the string ($text) that will be tooted by using Hugo’s printf function to concatenate .Title, .RelPermalink, #InfiniteInk, and more.⁠[3]

  2. Use some of Hugo's text-tranformation functions to make this string safe for use in a URL.

 

B. The partial

Here is Infinite Ink’s layouts/partials/tootpick-partial.html:

{{- /*
Path: layouts/partials/tootpick-partial.html
Created: 2023-February
*/ -}}

{{ $text :=  (printf "Check out "%s" at https://www.ii.com%s   #InfiniteInk" .Title .RelPermalink) }}

<a href="https://tootpick.org/#plustospace=yes&text={{- $text | plainify | htmlUnescape | urlquery -}}"
 rel="nofollow">
 <nobr><img src="/img/mastodon/logo-purple.svg" width="16" style="max-width: 100%;"> Share on Mastodon</nobr>
</a>

 

To learn about Tootpick, which is a privacy-⁠preserving tooter, see github.com/Juerd/tootpick.

To learn about Tootpick’s plustospace parameter, which is needed because Hugo’s urlquery function encodes a space as + rather than %20, see github.com/Juerd/tootpick#fragment-parameters.

To learn about Hugo’s plainify, htmlUnescape, and urlquery functions, see Infinite Ink’s Transforming Text with Hugo.

 

💡
The author of tootpick, Juerd Waalboer, toots at @whreq@hsnl.social.

 

3. Call tootpick-partial from baseof.html

Next, I included the following in the “Discuss or share” section of layouts/_default/baseof.html.

{{ partial "tootpick-partial" . }}

 

4. View and test the rendered “Share on Mastodon” links

Finally, I ran the hugo server command, viewed the rendered “Discuss or share” sections and made sure that the above steps 1, 2, and 3 worked by clicking   Share on Mastodon.

To test this on this page, go to the Discuss or share section below.⁠ ◊

 

References

 

See also

For more about Hugo, see Infinite Ink’s…

 

Endnotes

1. Many Infinite Ink pages, including this one, are evergreen 🌲 and regularly updated.
2. To learn about free/libre open source software, which is also known as FLOSS and FOSS, see www.gnu.org/philosophy/floss-and-foss.en.html.
3. .Title and .RelPermalink are built-in Hugo page variables. $text is a user-defined (also known as custom) variable.