I keep finding myself wanting to link to something in more than one way. For instance, a clearnet link and an Onion link; a direct link and an archive link; an affiliate link and a canonical link; or an HTTP download link and a bittorrent link. In some cases, I want to have a link with several of these at once, like a cleanet, onion, and archive link.
I’ve done some experimenting with how to present these, but I’m not entirely happy with any of the results.
Anyone out there have solutions they like, or know of sites that do this well? I’d love to hear from you.
Clearnet and Onion doublink
For Sacred Ground,
a shrine to privacy and anonymity online,
I wanted to be able to provide links to content that exists
both on the clearnet (regular https:// web)
and on Tor (.onion links).
They look like this:
The Tor Project
(clearnet,
onionlink)
I don’t think they look that great, but they were pretty easy to implement.
Implementation
I use them from a Hugo shortcode:
{{- $description := .Get 0}}
{{- $clearlink := .Get 1 }}
{{- $onionlink := .Get 2 }}
<span class="thispage-doublink">
{{ $description }}
(<a class="thispage-doublink-clearnet" href="{{ $clearlink }}">clearnet</a>,
<a class="thispage-doublink-onion" href="{{ $onionlink }}">onionlink</a>)
</span>
Which is styled like this:
Affiliate links
I tried out some affiliate links for fun in my post on
Batch Cocktails.
They are just annotated with a little $ after the link.
They look like this:
Batch Cocktails by Maggie Hoffman
is a great book.
These aren’t multilinks because they’re just annotated, but I wish they were.
I wanted to also show a canonical URL,
like link to a publisher’s homepage,
ISBN page,
or at least an un-affiliate Amazon link,
but I didn’t have a good way to do that for that post.
(This is less because I want to allow people to bypass the affiliate tracking,
and more because affiliate links like the https://amzn.to/3sIqZrl I use above
seem both fragile and opaque –
fragile because who knows what happens to them if my Amazon account gets closed,
and opaque because if the link no longer works there’s no way to tell what it should have gone to.)
Implementation
I have an affiliateLink.html Hugo shortcode
<a class="thispage-mrlafl" href='{{ .Get 0 | absURL }}'>{{ .Get 1 }}</a>
Which is styled like this:
It’s worth noting that if you use an obvious CSS class name like affiliate-link,
some adblocking extensions will strip the link out of the page entirely,
as if it were never there.
I was quite surprised by this,
and I’m even more surprised that I’ve never noticed it before.
Here’s an example of an <a class="affiliate-link" ...>...</a>:
Batch Cocktails by Maggie Hoffman
is a great book.
Multilinks with icons
I have also experimented with icons following the link, including any of descriptive text, an archive link, and affiliate information. For instance, this link to Mickey, Disney, and the Public Domain has next to it icons for a description and an archive.org link. Both can be hovered over, and the archive link is clickable.
The two glaring problems with this experiment are:
- it won’t work on mobile, which doesn’t have a hover state, and
- it isn’t very accessible.
Implementation
I use a Hugo shortcode like this:
{{- $url := .Get "url" }}
{{- if not $url }}
{{- errorf "multilink shortcode requires a url parameter" }}
{{- end }}
{{- $text := .Get "text" }}
{{- if not $text }}
{{- errorf "multilink shortcode requires a text parameter" }}
{{- end }}
{{- $description := .Get "description" }}
{{- $warc := .Get "warc" }}
{{- $affiliate := .Get "affiliate" }}
{{- $href := "" }}
{{/* We have to make this a <div> because <details> is a block-level element and can't be inside a <span> */}}
<span class="thispage-multilinkicons">
<a href='{{ $href }}'>{{ $text }}</a>
{{- if or $description $warc $affiliate -}}
<span class="thispage-multilink-icon-list">
{{- with $description -}}
<span class="thispage-multilink-icon" data-hover-text="{{ $description }}">(?)</span>
{{- end -}}
{{- with $warc -}}
<span class="thispage-multilink-icon" data-hover-text="A local archive of this link is available">
<a data-hover-text="{{ $description }}" href="/{{ . }}">(A)</a>
</span>
{{- end -}}
{{- with $affiliate -}}
<span class="thispage-multilink-icon" data-hover-text="the underlined link is an affiliate, click here for the original link">
<a href="{{ . }}">($)</a>
</span>
{{- end -}}
</span>
{{- end -}}
</span>
Styled like this:
My real experiment is a little different, in that it references local WARC files rather than remote Internet Archive links, but I’m not ready to commit to that just yet, and I don’t want this post to break if I change or remove my current implementation.
Experimental idea: togglable button
Imagine a disclosure triangle, as is used by the <details> element.
It sits next to the link.
When you click it, more information pops up, perhaps covering some other part of the page.
I actually spent some time trying to make this work with a <details> element,
but <details> is a block, and is not permitted to nest inside <p> and similar elements…
and having a link that cannot be placed in a paragraph is a pretty big limitation.
So I think a good implementation would require a button and JavaScript.
If we had that, though, we could toggle display of a list of alternative link endpoints. Since the list is only displayed when the user asks for it, it’s not constrainted to just tiny icons, and could contain more description of where each link goes, like
- The underlined link is an affiliate link; click here for a canonical location for the work
- This page is available on the Wayback Machine
Experimental idea: footnotes or sidenotes
This idea is more of an extension of the previous idea: I can already put a footnote on any link and include a description and/or any other links I want. Footnotes like this are fine for a few links per page, but it’s less nice if I want to do something like provide an archive.org link on every single external link on a long post.
However, sidenotes might be more ergonomic. Sidenotes in general have been explored by Edward Tuffte and Gwern, among others.
More work is warranted.
Other link annotations
I’m also interested in annotating links with their destinations. We’ve all seen sites that mark outgoing links with a little arrow. You can also use different underline colors for links on the same page compared to links on the same site. You can treat domains like Wikipdia specially, or call out URLs that end in a certain file format.
Implementation
My links are styled something like this:
Actually, at the time of this writing, it’s a bit different from this, because I am not sold on the idea of enabling them site-wide. You can toggle them on yourself – at least, at the moment – from the secret control panel.
Notes
- You may have noticed many of the CSS classes used in these examples are prefixed with
thispage-. I do this so that later changes to my site-wide implementation will not break examples on this post. - Relatedly, the
<style>tags are actual HTML style tags that are applied to this page. You can place them in the middle of your<body>and style them to be shown with something likestyle="display:block; font-family:Monospace; margin:1.5em 0; padding:0; text-decoration:none; white-space: pre-wrap; font-size: 0.75rem;", two things I learned from the excellent This page is a truly naked, brutalist html quine.
