Adding Webmentions to my personal site

— 3 minute read

Update 21 October 2019: I decided to remove these from my site as monitoring and moderating them became a lot of work on popular articles. I think the tech is cool as heck, it’s just not for me at this time.

I might pick it up again in the future without the Twitter integrations. Hopefully this article will be useful for you, regardless of my choice!

I think Webmentions are cool because they are a proper web standard, so I’ve been keen to get them going on my site—especially after I burned it to the ground and replaced it with an instance of Hylia.

I’ve had Max’s tutorial bookmarked for ages and it is a fantastic resource. I basically followed it to the letter, with a couple of modifications to match the code style of this site. If you’re looking to implement yourself, definitely head over to his site.

I did do the implementation with a PR, though, so if you want to see the code that I implemented, check it out.

A basic implementation permalink

This implementation that I’ve added is rough as hell, but it’s a good starting point. I really want to improve the rebuild setup and also post Webmentions from my site as replies to other folks blogs. I’ll certainly be using Remy’s project for that.

For the builds, I have IFTTT running a Netlify hook every hour, on the hour. It’ll do for now, but if anyone has any tricks for a slicker process, let me know.

I’ve also got Bridgy on the go to pull in likes and replies from Twitter. That service was very easy to implement. Very handy indeed.

User experience and barrier to entry permalink

Something that I can't stop thinking about with Webmentions is that the barrier to entry is very high. I’ve been making websites for a long time and it certainly had me sweating. I’m also a very confident developer who grinds through being stuck, so I do worry about how easy it would be for folks to drop-off and implement a nasty comments system like Disqus when they get stuck, if they’re not super confident.

I think the user experience for users manually posting their Webmentions to websites is pretty shit too, but as it stands, we don’t really have any other options other than a crappy little <input /> at the end of our pages.

With both of those issues, I would love it if a group of us got our heads together and worked out ways to both reduce the barrier to entry and consider the user experience of posting Webmentions. Jump into my Webmentions if that sounds like something you’d like to do.

One thing you could do to help is blog about implementing Webmentions on your site. If it wasn’t for Max, I probably wouldn’t have bothered, so your input about your context will be valuable. I can promise that.

Wrapping up permalink

This has been fun and it certainly kept me entertained on the long journey to Brighton.

I imagine folks are wondering if I’m going to implement this stuff on Hylia. I’m not going to do that quite yet because my implementation is rough, so I think it’d cause people more headaches. Maybe after some more thought and work, I can write some helpful docs or a very specific Hylia tutorial.

Anyway, you can now comment on any post, note or link!

Hi 👋, I’m Andy — an educator and web designer

I produce front-end development tutorials over at Front-End Challenges Club and Piccalilli. You can sign up for updates on Piccalilli to stay up to date with its progress.

Sign up for updates