Conversations about a blog post often happen somewhere else. Someone shares a link, replies on their own site or reacts to a post on social media. I wanted to bring some of that activity back here.
This implementation was directly inspired by Matt Hobbs’s article, Implementing Webmentions on this blog, published on Nooshu.
I liked its simple presentation: links to mentions and replies, followed by small groups of avatars for likes and reposts. So I added a similar section to this blog, using the typography, colors and buttons from Chulapa.
How it works
A Webmention is a notification that one page links to another. If you write about one of my posts on your own site, you can send its URL so the link can appear below the original article.
This blog already advertised a Webmention.io endpoint. The missing piece was displaying the mentions it had collected. A small JavaScript file now requests the public mentions for each post’s canonical URL and builds the section automatically when the page opens.
Mentions and replies appear as a numbered list of links and authors. Likes and reposts have their own counts and rows of overlapping avatars. The content stays on its original site; each link takes you to the conversation. The existing GitHub comments are still available, too.
A small addition to a static blog
The implementation uses a Jekyll include, a stylesheet and plain JavaScript. There is no extra Jekyll plugin or change to the deployment workflow. Webmention.io handles receiving and verifying links, while the browser loads the results through its public API.
I tried it with the geobounds post, which already had mentions, and with a recent post that had none. Both cases matter: an empty section should still explain how to join in.
Social reactions need a bridge that sends them as Webmentions; they do not appear automatically just because a link was shared on a social network.
Send a link
Written something that links to this post? Open Shared your thoughts on this post? Drop your link here! below and submit your page’s URL. The form works without JavaScript, although displaying existing mentions requires it.
Thanks to Matt Hobbs for the inspiration and for sharing his implementation. It is a nice way to let a static blog take part in a wider conversation.
AI assistance: I wrote this post with help from Codex, including drafting and editing the text. Codex also helped implement and test the Webmentions section. The header image was also generated with AI.