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

Page contents



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.




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:

├── 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-⁠, 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 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 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   #InfiniteInk" .Title .RelPermalink) }}

<a href="{{- $text | plainify | htmlUnescape | urlquery -}}"
 <nobr><img src="/img/mastodon/logo-purple.svg" width="16" style="max-width: 100%;"> Share on Mastodon</nobr>


To learn about Tootpick, which is a privacy-⁠preserving tooter, see

To learn about Tootpick’s plustospace parameter, which is needed because Hugo’s urlquery function encodes a space as + rather that %20, see

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


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" . }}


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



See also


1. Many Infinite Ink articles, 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
3. .Title and .RelPermalink are built-in Hugo page variables. $text is a user-defined (also known as custom) variable.

Discuss or share this page 📝 🤔 🐘