Adding webmentions to my blog
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.
Webmentions.
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:
https://webmention.io/api/mentions.jf2?target=https://sebastiandedeyne.com/adding-webmentions-to-my-blog
I’m using the fetch
API to grab the webmentions JSON, have a rudimentary script to render them beneath every 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.
Shirshak 🌿 🐄 🐷 Ⓥ
2019-06-28 09:44
Freek Van der Herten 🎆
2019-07-09 15:15
Tyler Leonhardt
2019-07-11 02:23
La semana PHP
2019-07-18 07:16
Star Tutorial
2019-07-25 03:18
Isabela Moreira
2019-08-06 23:37
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 also decided to skip the steps about posting replies to other people's posts and adding reply contexts to my own site until I actually want to reply to something someone has written.
However, I did configure my site to receive Webmentions using the excellent hosted webmention.io service. This was very easy.
I then added some very basic code to display Webmentions at the bottom of each blog post closely based on Sebastian De Deyne's implementation. For the moment, I'm using JavaScript running on the client-side, but I can see how in time this might lead to putting an unfair load on webmention.io.
A better solution might be to incorporate fetching the latest Webmentions and rendering them in HTML into the automated build, perhaps enhancing them with the latest Webmentions using JavaScript. I think this might be how the webmention.io Jekyll plugin works, but that's a job for another day.
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:
Adding webmentions to my blog by Sebastian De Deyne
Displaying Webmentions on my Hugo website by Jamie Tanna
Indieweb Webmentions on Middleman or Jekyll by Evan Travers