How to join An IndieWeb Webring
· 6 min · #web
I recently joined An IndieWeb Webring and thought I'd write about the steps needed to do it.
Table of contents
- What is a webring?
- How to join An IndieWeb Webring?
- Appendix A: reasons for this guide
- Appendix B: hide the h-card on your website
- Appendix C: use your email for domain authentication
- Resources
What is a webring?
A webring is a collection of websites, usually sharing similar themes or interests, interconnected through
navigation links.
Webrings were popular in the early internet era for cross-promotion and community building. Nowadays, few survive,
and fewer thrive.
I decided to join An IndieWeb Webring because every cool blog I stumble upon and find interesting has these f*cking links ←🕸💍→ somewhere on the page. I can't escape it! Also, this particular webring collects a great variety of sites that do not necessarily share any interest, apart from the desire to promote the idea of the indie web.
How to join An IndieWeb Webring?
This guide is meant to help those who are not very familiar with concepts like the IndieWeb or IndieAuth, like I was.What you need is:
- an email address
- a website (no shit)
- an h-card on your site's homepage
- an authentication method based on your domain
It may sound complicated, but setting it up is actually very simple.
I'll skip the first 2 items of the list, for obvious reasons.
Add an h-card on your site's homepage
What's that? In simple words: it's an HTML microformat
that allows you to embed your contact details in your website.
In even simpler words: it's a way to publish your digital business card on your website, using a standard format
that ensures readability by other sites and applications.
For each detail you decide to share about yourself, you only need to specify an HTML class, (the URL), and the
inner text.
Here's a dummy example:
<div class="h-card">
<p class="p-name">Your Name</p>
<a class="u-url" href="https://domain.com/"></a>
<a class="u-photo" href="https://domain.com/profile-pic.jpg"></a>
<a class="u-email" rel="me" href="mailto:address@email.com">address@email.com</a>
<p class="p-note">A short description of your profile</p>
</div>The outer div acts as a container for everything else. Its class is set to h-card so that it
can be recognized by the parser. Every element inside it is a single piece of information.
Let's examine the first item. The parser reads the class value and finds p-name.
The p- prefix lets the parser know that there's a text value, to be associated with the user's -name.
The second item? Same idea: the parser reads the class name u-url and understands to look for a link (u-)
to associate to the user's homepage -url.
Same goes for the profile picture, the email address, and the short description.
The h-card microformat essentially consists of a list of valid class names and their corresponding value types:
u- for links, p- for text, and dt- for dates.
The official wiki has a
list of all the properties you can define in your card.
For the purposes of joining this webring you clearly don't need to add them all. If you visit the ring's directory you'll see that it only displays the link to the website, the name, the picture and a short description; still, I believe the last two to be optional.
Add an authentication method based on your domain
There are multiple ways to set this up. Read the wiki
for a comprehensive description.
I'll show the easy way that relies on IndieAuth.
In your site's homepage, add links to any of your other online profiles: social media, GitHub, and/or email address,
with the rel="me" attribute.
<link rel="me" href="https://twitter.com/username">
<link rel="me" href="https://github.com/username">
<link rel="me" href="mailto:address@email.com">Now, make sure that in any profile you add here there's a link back to your website.
In this example, I added Twitter and GitHub. I would need to log in to both sites and add my website's URL to my
profile, like this:
Lastly, add these other two lines in your site's homepage:
<link rel="authorization_endpoint" href="https://indieauth.com/auth">
<link rel="token_endpoint" href="https://tokens.indieauth.com/token">That's it! Now you can use your site's domain to log in to all sites that support IndieAuth, including the webring.
Sign in
Go to the webring's homepage and sign in using
your domain. Your website will be automatically added to the list.
Once logged in, you'll land on your dashboard page. From there, you can choose to remove your card from the ring's
directory if you don't want to appear there (while still being part of the webring). The dashboard also provides
the code snippet for the circular links that you must include on your website to maintain your place inside the webring.
Appendix A: reasons for this guide
I decided to write this after stumbling on this article from 2018 by Brad Enslen, titled Webrings are Dead. He suggests a number of reasons why webrings failed to remain relevant after the '90s; one in particular struck me:
"Rings are passive. They sit there and wait to be discovered. They are passive in recruiting members and they are passive in finding users."
He mentions this as a flaw, as one of the culprits. I think he is right, but I also find this passiveness
attractive, and I wouldn't want it any other way. Part of the appeal of webrings, for me, lies in their apparent
disdain: they don't ask you to join, they don't try to catch your attention — the exact opposite of mostly everything
else on the internet these days.
But once you do find them and want to join, then... it's not always clear how to do so. I wrote this guide to contrast
this friction in the joining process, not the passiveness.
Appendix B: hide the h-card on your website
Your h-card doesn't need to be visible. You can hide it by adding the hidden attribute to the outer
div.
But why would you want to do that? Well, the h-card is not meant to be read by humans but by automated parsers.
While it's certainly convenient to create one that is enjoyable by both parties, consider my website as an
example: I store all the information about me in the /about page in a format that is definitely not parsable.
Instead of rewriting it all and moving it to my homepage, I chose to add a separate, hidden h-card for the sole
enjoyment of computers.
Appendix C: use your email for domain authentication
What if your website is your only online profile? How can you still use the IndieAuth authentication method? As
mentioned earlier, you can use your email address. The authentication provider will send a numeric one-time
password (OTP) message to your email for every sign-in request.
It's less convenient but it works just as well.