Refactor your blog comments system with


As a blogger, you know how important it is to engage with your audience and facilitate meaningful discussions around your content. Traditional comment systems can be cumbersome to maintain, and they often limit conversations to your website (Hey Disqus, I'm not cuing you here!). Inspired by Maxime Heckel's blog (opens in a new tab), I found an exciting solution that brings a retro, classcial, decentralized feel to blog comments system. (opens in a new tab) – a convenient, open, and easy-to-use service that brings all the interactions from social media platforms right to your blog.

In this article, I'll briefly introduce the benefits of, explain how it works, and guide you through the step-by-step process of integrating it into your personal blog.

Embracing the IndieWeb Philosophy is built on the principles of the IndieWeb (opens in a new tab) movement, which aims to empower individuals to own and control their online content.

We should all own the content we're creating, rather than just posting to third-party content silos. Publish on your own domain, and syndicate out to silos. This is the basis of the 'Indie Web' movement. (opens in a new tab)

What is

From W3C proposal (opens in a new tab):

Webmention is a simple way to notify any URL when you mention it on your site. From the receiver's perspective, it's a way to request notifications when other sites mention it.

In other words, it's like seeing mutual references between papers or mutual mentions between tweets. By leveraging, you can enjoy the following benefits:

How to Integrate into Your Blog

Step 1: Sign Up and Configure Your Domain

Visit (opens in a new tab) and sign up using your domain name. Once registered, you'll possibly be prompted to connect your social media accounts, such as Twitter. This allows to aggregate mentions from those platforms. After connecting your accounts, you'll be redirected to the dashboard, where you'll find an API key for your domain, which you'll need later to retrieve mentions (actually I got the whole batch of webmentions even I don't use the API key...) . uses IndieLogin (opens in a new tab) to log you in, so you need a HTML tag with rel="me" to any of your social links that is able to mark you. I added my twitter into the <link> in <head>:

{/** Required by */}
  title="Follow me on Twitter"

Step 2: Add HTML Tags to Your Blog

To enable on your blog, you'll need to add specific HTML tags to your blog's source code. In the <head> section of your website, insert the following lines of code:

<link rel="webmention" href="" />
<link rel="pingback" href="" />

Replace with your actual domain name. Remember, you may need to redeploy and make your blog live and it can take effect then.

As of now, your system should be running correctly, but it only retrieves references (links) to your website from other sites. How can you get replies and references from Twitter or Mastodon? This is where you need Bridgy (opens in a new tab).

Bridgy (opens in a new tab) "connects your web site to social media" according to the home page but moreso it converts conversations on social media to webmentions to send back to -Adding Webmentions to Your Site (opens in a new tab)

All you need to do is log in to Bridgy (opens in a new tab) with your social media account and wait for your mentions to be crawled...

Step 3: Display Webmentions on Your Blog

To display webmentions on your blog, you'll need to create a script that fetches mentions using the API. Here's a simple JavaScript example:

  .then(response => response.json())
  .then(data => {
    // Process and display webmentions here

Replace with the URL of your blog post and YOUR_API_KEY with the API key generated in Step 1. You can also reference my source code here (opens in a new tab).

Screenshot of my webmention comments system

Customize the appearance of webmentions on your blog using CSS. Don't limit your imagination, trying to use a innovative forms and tell me back.


Finally you can effortlessly transform the way you engage with your audience and create more open and visible conversations around your content. Say goodbye to privacy concerns and heavy comment systems, and start benefiting from the simplicity and openness of