Webmentions? 🔗
What they are 🔗
Chances are, unless you read a lot of random blogs and/or into the whole “indie web” thing, you haven’t heard of webmentions. According to Wikipedia:
Webmention is a W3C recommendation that describes a simple protocol to notify any URL when a website links to it, and for web pages to request notifications when somebody links to them.
And that’s basically it. When you link to someone elses blog, if they have webmentions, they will get notified. And if someone links to yours it works the same. You can also display webmentions made by other people on your own blog to use it as a way to see who is linking to your blog. It can also be used as a rudimentary comment system by tagging your post content with specific classes. You can see an example of webmentions in action as a comment system by looking at this blog post underneath the main blog content.
Why I Bothered Implementing This 🔗
I really wanted a way for people to comment on my blog without having to make a system where people need to signin to a 3rd party account (IE google, github, etc.) I also wanted a way to have comments on my static site which has no actual server interactions. So Webmention seemed like the perfect fit, and it also seems like a fun way to push people towards making their own sites to interact with my own.
Webmention Documentation Is Kind Of Confusing 🔗
It took me a couple of hours of research and time to fully wrap my head around how this works. There’s multiple ways to set up your own authentication / authorization servers to interact with webmentions. Various blogposts seem to have different ways to implement this, most of which I found confusing. Until I found the one that I left above as an example, that was a massive push in understanding this tech and how it works. So, I decided I’d write a little guide myself for anyone interested in doing the same.
Step By Step Guide 🔗
Indie Login 🔗
So first we need to have a way to authenticate that we are, in fact, the owners of our site that we plan on sending links out with. Luckily there is a hosted service called Indie Login that allows us to do this without needing to set up our own server for authentication. In their Setup Guide they list a few ways you can do this. All of them revolve around adding an <a> tag or <link> to your header. The verification options you have include:
Twitter / X- Due to API changes, this no longer works
PGP Keys- They “turned this off” for some reason so you can’t use a PGP key. Which is a shame, I spent a bit of time trying to figure this out, but alas it doesn’t even work
- Github
- I don’t want to link my github account on here, and mainly use Codeberg now whenever I need to interact with my own repos.
I decided to go with email given the reasons above. So to associate an email with your account, add the following link tag to your header:
<link href="mailto:youremail@provider.com" rel="me"/>
Then go to the indie login homepage, and enter your domain name, and select “Sign In”. It will then bring up a page asking to email you a code, which you will get in your email provided in the link tag. Enter it, and you’ll get a page that says you have successfully logged in. One part down, onto the next one
Implementing Webmentions 🔗
When it comes to implementing webmentions, it consists of two parts:
- Logging into https://webmention.io and associating your domain with the webmention service
- Adding a .js snippet to your site to actually show the mentions you’ve gotten.
webmention.io 🔗
First, just open up https://webmention.io and enter your domain name for the login. This should “just work” if you just logged into the Indie Login service. Then, navigate to the “Sites” option in the header navigation menu. Finally, click “Get Setup Code”. It should give you a link similar to this, except it will have your site name:
<link rel="webmention" href="https://webmention.io/blog.greatape.casa/webmention" />
Next, go to the “Settings” navigation at the top. At the bottom of the page will be a script labelled under “Pingback” as the header. It will look something like this, and also will go into your header on your site:
<link rel="pingback" href="https://webmention.io/blog.greatape.casa/xmlrpc" />
Make sure to change the dropdown to “Enabled” then click “Save” on the webmention.io settings screen.
Displaying Webmentions On Your Blogposts 🔗
We finally have the final piece of the puzzle here: how to display webmentions on a static site. Thankfully the work is already done for us and is available on the github repo here: https://github.com/PlaidWeb/webmention.js
Clone that repo, then do the following to the files in the “static” folder in that repo:
- Copy webmentions.min.js to your blog’s static JS folder
- Copy webmentions.css to your blog’s static CSS folder
Then, go ahead and link both in your headers:
<script src="/js/webmention.min.js" as/script>
<link rel="stylesheet" href="/css/webmention.css"/>
Finally, in your static blog page layout folder, you’ll want to add the following div where you want the comments to actually show up:
<div id="webmentions"></div>
Testing The Implemenation 🔗
After making sure all of these changes are on your live site, go ahead and navigate to https://webmention.rocks to test your implementation. Scroll down to “Testing your Receiver” and click on the first test. Put a link to a post in the “Begin Test” box. It will run through some tests, and should say the test passed if you followed my instructions. To verify it all works, go to the post you just entered into the box as a test and see if it shows up. It should look something like this:
What About Comments? Isn’t That Why You Set This Up? 🔗
That’s actually going to be coming in the next blog post, since I want to keep this one in scope with just how to set up webmentions for your own site. I also need to still test how to do the comments myself, I do have a blog post showing how to lined up. In the meantime, go ahead and try this out on your site to visualize interactions with your domain!