Posting comments

Two of the things I like most about the IndieWeb are the principles of ownership and connections. I really like the independence that posting on my own website gives me from any of the big silos and their (possibly) impending shutdowns (you never know, right?). I also like Webmentions: they're this crazy hybrid of oldschool blogs and pingbacks mashed up with the modern reality of social media.

A POSSE of responses#

When I relaunched this site with Eleventy, I added basic Webmention support via Webmention.io. I'm also using Bridgy to check social networks (just Twitter, for now) for posts containing links to my blog posts and send those as webmentions.

A typical IndieWeb pattern is POSSE – "Publish on your Own Site, Syndicate Elsewhere". Twitter is a great syndication silo: I can compose a quick summary or excerpt of the longform article, add the URL and fire it off (automatically or manually, whichever is preferable). Replies to this tweet are then collected by Bridgy and sent back to my site. So even though a discussion may take place on Twitter, I can archive and publish that same discussion in the context of my original article.

A "post a comment" button on a static website?#

But something was still missing. How could I connect with visitors that find their way here via different means, like a Google search or a link on someone else's blog? They might never come across my tweet and not know about the magic of webmentions. Then I came across an article by Max Stoiber (covering an unrelated but polarising topic), read it and discovered his brilliantly simple answer to my question: he had added a link pointing to a Twitter Web Intent URL! Maybe this was obvious to you from the beginning, but I didn't think of it.

It works like this: Web intents take query parameters, so one can use the url parameter to add the URL of a blog post. Clicking the link will then open a form where one can compose a new tweet with the URL already added. Here's how that looks in my Nunjucks template:

{%- set absoluteUrl -%}{{ page.url | url | absoluteUrl(metadata.url) }}{%- endset -%}

<a href="https://twitter.com/intent/tweet/?url={{ absoluteUrl | urlencode }}">Post a comment</a>

Because this is a statically generated site, new webmentions are only fetched from the API and appended as HTML comments during my build process. It would absolutely be possible to fetch and render them dynamically with some client-side Javascript, but I find the thought of not-instant updates strangely endearing. I'm instead using IFTTT to trigger hourly builds via a Netlify build hook (it's a recipe from the official Eleventy docs).

And that's it! A comment function via Twitter, Bridgy, Webmention.io, Netlify and IFTTT. It's a bit circuitous, certainly, but has the added benefit of exposing any comment to the wider twitterverse and a potentially much larger audience.

I like it. 👍