The IndieWeb and Webmentions

I don’t know if you’ve noticed, but a while back I added a nifty feature to posts on this site which displays activity from Twitter and Mastodon (likes, retweets, replies) on each post. In most cases, more responses to my work happen on social media than in post comments, so I really wanted to be able to integrate those social mentions with the existing comments. This is a static site running on Jekyll, so it took a little extra work and relies on a few external services.

I got the idea for this from Evan Travers, who did a writeup of how he’s accomplishing it on his own site. It all starts with the IndieWeb. I’m going to list the steps I took for reference, but don’t consider this any kind of tutorial. All of the information you need can be found in the Evan’s post, as well as posts from Kieth Grant and tips from indiewebify.me.

Here’s what it took:

• I added microformat markup to the site
  • hcard with my author/contact info for every post and on index pages
  • hentry for post bodies
  • hfeed for indexes and feeds
  • Validation via indiewebify.me and xray
• Set up IndieWeb sign-in
  • I used GitHub as my sign-in source, ensuring my profile there had a link to my site, and then including a rel="me" link to my GitHub profile on my own site
• set up Bridgy Fed to scrape for mentions on my various social platforms, and webmention.io as an API for collecting them.
• To be kind to the WebMention API, I set up a script that runs at 30-minute intervals, retrieving new mentions and caching them in a JSON file
• To prevent massive filtering in the browser, I added a CGI to my site that reads the cached JSON server-side and returns all mentions for a particular post as an array, sorted by date received
• The markup for the mentions is generated and inserted dynamically on page load using jQuery.getJSON and the output of the CGI

You can see a good example of the result in action on this post from November. Scroll to the end of the post to see the social activity (“mentions”).

It was a fun experiment, and I’m happy to have broader interactions than just local comments on the posts. If you’re interested in any of the scripts I’m using (crawler, CGI, jQuery), just let me know, I’m happy to share.