A couple of days ago, I wrote about my first steps in the world of the IndieWeb. Then, I said my next steps were enriching my posts with microformats and implementing webmentions.
I did both of those things. I feel good.
The mythical Webmention
Webmentions is the new and improved version of the good old pingback. It’s a protocol that allows one website to notify another that you mentioned them. It’s as simple as that. But it’s also more than that: the interactions are not limited to mentions; a webmention can be a “like,” a repost, or a comment.
Like any other protocol, there are two parts to Webmentions: sending them and receiving them. I started with the easy one: receiving them.
Webmention.io receives the webmentions for you and lets you query them with a simple HTTP request. You get all your webmentions in a nice JSON object. You could do this call in a client-side script and render them that way. I prefer to make the call during the build process.
I wrote a small script to parse the JSON file with all the webmentions and separate them according to their target and type. I save each file in the same leaf bundle where the rest of the article lives, and I can simply query it from my template while building the site.
For now, I am only displaying likes and comments. The design looks very simple, and I may try to improve it in the future. I will implement other types of webmentions as I receive them if I receive them.
The cool stuff: Bridgy
After I implemented receiving webmentions, and to test them, I connected my Twitter account to Bridgy. This service allows you to transform your social media reactions to actual webmentions. So cool! So now, if you reply to one of my syndicated posts on Twitter, the answer shows up as a webmention under the original article.
The downside: not real-time
The one drawback of only collecting webmentions at build time is that I only build my blog hourly, sometimes not even that often. That means webmentions can take up to an hour to appear on the site after being sent. Is that really bad UX? Do people really expect their webmentions to show up quickly on the target website?
The missing part: sending webmentions
There’s another service that scans your articles to find links to sites with webmentions endpoints and sends them one: webmention.app. I haven’t set it up yet, and for now, I will send webmentions manually.
The webmention display right now is not tagged with any microformats. I believe I’m supposed to include some specific ones for these to be “real” webmentions. That’s my first task.
Next on my to-do list is creating new post types. I want to implement notes (as opposed to blog articles like this) and perhaps photo posts. Maybe even check-ins.
And then, the real fun will be implementing a micropub endpoint that will allow me to use all of these post types from a simple client. Blogging on the go has always been my dream!
Over to you
Do you use webmentions on your website? Do you have a favorite webmention design in the wild? Let me know! Send me a webmention!