Adding webmentions to my blog
| 2 min read
I first noticed webmentions in the wild on Hidde de Vries’ blog about two years ago. Last week it finally happened, I added webmention support to my blog too! Well, partial support at least. I’m now receiving and displaying webmentions. Sending them out is a project for another day.
Webmention is a web standard for mentions and conversations across the web, a powerful building block that is used for a growing federated network of comments, likes, reposts, and other rich interactions across the decentralized social web.
Webmentions are a protocol for websites to communicate across each other. What makes the webmention standard interesting is that it’s not tied to a single service — it’s a protocol. Webmentions can be aggregated from a range of different services from Twitter, to other blogs or even direct comments.
I highly recommend Chris Aldrich’s article on A List Apart if you want to dive deeper in the theory about the standards recommendation.
I’m mostly interested in receiving webmentions from Twitter since that’s my main source of traffic.
Twitter doesn’t send any webmentions themselves. Fortunately there’s a service that solves this problem: Bridgy. Whenever a link to my blog is posted on Twitter, Bridgy polls for replies, retweets, and likes to send them as webmentions.
That’s just half of the story: the mentions need to be received too. When a webmention is sent, the sender will scan for a specific
link tag on the mentioned page.
<link rel="webmention" href="...">
If it finds one, it will post the mention to the configured URL.
I set up my to receive webmentions on another third party service: Webmention.io.
<link rel="webmention" href="https://webmention.io/sebastiandedeyne.com/webmention" />
Webmention.io stores webmentions on their servers, so I can retrieve them to display on my blog. It also acts as a spam filter. Fake mentions from bots will be filtered out so they won’t appear under my posts.
To summarize the flow:
Webmentions stored on Webmention.io can be retrieved with a simple API call. For example, to receive mentions for this post:
That’s all there is to it! Most of the mentions I’m receiving are from Twitter, but anyone can add comments with a service like comment parade too. Try it out by mentioning this post!
I occasionally send out a newsletter with personal stories, things I’ve been working on in the past month, and interesting things I come across.
Pinky swear that I won't use your data for any other purposes. Your email address will be stored on Mailchimp and nowhere else.
I've been interested in the IndieWeb since my colleague, Chris R, hosted the first London IndieWeb meetup years ago and at various points I've played with a few bits of it on my website, e.g. OpenID and IndieAuth. As part of my efforts to move away from Twitter and Facebook, I recently joined the very friendly fosstodon.org Mastodon instance and I noticed quite a lot of toots about the IndieWeb including one which mentioned the indiewebify.me website which walks you through various levels of IndieWeb "compliance". I've been interested in finding out more about Webmentions for a while and this gave me the motivation I needed to give them a try.
It turns out I had already become a citizen of the IndieWeb, i.e. Level 1 compliance, back in June 2013 and amazingly (to me anyway) that functionality was still working. Level 2 compliance is about publishing on the IndieWeb and Level 3 compliance is about federating IndieWeb conversations.
For level 2, the first step was to markup my home page using the h-card microformat, not to be confused with the older hCard microformat. I started doing this by creating separate hidden markup, but I was unhappy with the amount of duplication. And so, after faffing about with middleman for a while and discovering its nested layouts, I managed to markup some of the existing content to reduce the amount of duplication: h-card & p-name, p-org, p-job-title, p-locality & p-country-name and u-photo, p-note, u-uid & u-url. The validator suggested that it was working OK. So far, so good.
The next step was to markup my blog posts with the h-entry microformat. This was relatively straightforward to implement now that I had a separate
blog layout and the validator suggested that it was working OK.
At this point, I should have added the ability to send Webmentions to other IndieWeb sites, but it's not completely obvious to me how to do this for a static site. I think I could do it by hooking the
webmention gem into my GitHub Action-based build, but I decided to skip this step for now given that it's relatively easy to send a Webmention manually using
curl and it's not as if I currently blog that frequently!
I checked that my website is receiving Webmentions OK by commenting on a blog post using commentpara.de. 🎉🎉
Clearly I haven't yet fully achieved even level 2 IndieWeb compliance, but I'm pleased with what I've done so far and, more to the point, what I've learnt in doing it. I should also mention that I found lots of useful advice in the following articles: