Adding Webmention support my Astro site
svg]:size-4 [&>svg]:shrink-0" role="menuitem" tabindex="0" data-slot="dropdown-item" href="/bookmarks">
Bookmarks
svg]:size-4 [&>svg]:shrink-0 w-full" role="menuitem" tabindex="0" data-slot="dropdown-item" id="theme-button">
Theme<br>svg]:size-4 [&>svg]:shrink-0" role="menuitem" tabindex="0" data-slot="dropdown-item" href="/api/auth/login?returnTo=%2Fposts%2Fwebmentions-comments-and-likes">
Login
Adding Webmention support my Astro site<br>A walkthrough on how I added Webmention support to my Astro site to display comments and likes from other websites.
28 May 2026
Fraser McLean
5 minute read
Introduction
When I am writing a blog post, I often share it to communities on Reddit, Mastodon and Bluesky. In the IndieWeb community, this is called POSSE. I love engaging with people in those communities, and I often get comments and likes on my posts. However, those interactions are happening on other platforms, and they aren’t visible on my personal site. I wanted to find a way to bring those interactions back to my site so that visitors can see the conversations happening around my content.
I like social features, they make a site feel more alive and interactive. I was looking for a way to add some social features to my personal site, and I came across Webmentions. It took me a little while to get my head around how Webmentions work, but once I understood the basics, it was pretty straightforward to implement. In this post, I’ll walk you through how I added Webmention support to my Astro site to display comments and likes from other websites.
What are Webmentions?
Webmention is an open web standard which is designed for conversations and interactions across the web. It facilitates cross-site communication by allowing websites to send notifications when they are mentioned or linked to by other sites. It is one of the key building blocks of the IndieWeb movement, which emphasizes user ownership and control over their online presence.
Implementation
Here, I will go through the steps I took to implement Webmention support on my Astro site.
Add Webmention Endpoint
The first thing we need to do is add the ability for our site to receive Webmentions. We could read through the protocol specifications and implement the endpoint ourselves, but I found a great tool called webmention.io that simplifies the process. It provides a hosted Webmention endpoint that we can use to receive Webmentions without having to set up our own server logic.
Webmention.io sign-in page<br>Enter your site URL and sign in. Your site will need to have IndieLogin.com support which is relatively easy to set up. Once you have signed in, you will be given a Webmention link tag that you can add to your site’s section. This tag should be on every page and tells other websites where to send Webmentions when they mention your site.
The link tag for my site looks like this:
link rel="webmention" href="https://webmention.io/frasermclean.com/webmention" /><br>Testing the Endpoint
Now that we have our Webmention endpoint set up, we can test it out to make sure that we can actually receive Webmentions. I came across this great validation tool called Webmention Rocks that allows you to test your Webmention endpoint by sending a test Webmention to it.
Connect Social Platforms
It would be amazing if we could automatically receive Webmentions from the social platforms where we share our content. Well, it just so happens there are tools that do exactly that! Bridgy is a awesome service that can connect your site to various social platforms and send Webmentions when your content is mentioned or liked on those platforms.
Bridgy backfeeding responses from Mastodon<br>I set up Bridgy to connect my site to Reddit , Mastodon and Bluesky , so that I can receive Webmentions for interactions happening on those platforms.
Back on the webmention.io dashboard, we can view the recent Webmentions that we have received.
Webmention.io dashboard showing recent Webmentions<br>Querying the Webmention.io API
Webmention.io provides an API that allows us to query the Webmentions we have received through the service. This is useful as we can use this API to fetch the comments and likes and display them on our site.
We can use the cURL command line utility to test out the API and see what kind of data we get back:
curl "https://webmention.io/api/mentions.jf2?target=https://example.com/posts/123"<br>You would need to replace the target parameter with the URL of the page on your site that you want to fetch Webmentions for. The API will return a JSON response containing the Webmentions that have been received for that URL. Here is an example response showing just a single Webmention:
"type": "feed",<br>"name": "Webmentions",<br>"children": [<br>"type": "entry",<br>"author": {<br>"type": "card",<br>"name": "example-user",<br>"photo": "https://avatars.webmention.io/www.redditstatic.com/abcdef.png",<br>"url": "https://reddit.com/user/example-user/"<br>},<br>"url":...