- Ensure your social media links are added in
src/components/SocialList.astro, most importantly the email address
- Create an account @ Webmention.io.
- Add the link feed to
siteConfig.webmentions, found in
- Create a
.envfile, or rename the included
.example.env, and add the key
WEBMENTION_API_KEYand set the api key as the value.
- Go to brid.gy and sign-in to each social account[s] you wish to link.
- Publish and build your website, remember to add the api key, and it should now be ready to receive webmentions!
- That’s it, I just wanted to finish on a cool number.
What are webmentions
Put simply, it’s a way to show users who like, comment, repost and more, on various pages on your website via social media.
This theme displays the number of likes, mentions and replies each blog post receives. There are a couple of more webmentions that I haven’t included, like reposts, which are currently filtered out, but shouldn’t be too difficult to include.
Steps to add it to your own site
Your going to have to create a couple of accounts to get things up-and-running. But, the first thing you need to ensure is that your social links are correct.
Head over to
src/components/SocialList.astroand enter your details into the
socialLinksarray. By default, the most important is your email address as this has the
isWebmentionproperty. This just adds the
rel="me authn"value to the social link. You don’t have to include an email, you can just delete it and any others, just make sure that at least one social link has the
isWebmentionproperty, or set the
relproperty yourself. See IndieLogin.com for more information on how to authenticate your domain via links.
Next up, head over to Webmention.io and setup an account by Signing in with your domain name, e.g.
https://astro-cactus.chriswilliams.dev/. Please note that .app TLD’s don’t function correctly. Once in, it will give you a couple of links for your domain to accept webmentions. Make a note of these and head over to
src/site.config.tsand add them to
Quick note: You don’t have to include the pingback link. Maybe coincidentally, but after adding it I started to receive a higher frequency of spam in my mailbox, informing me that my website could be better. Tbh they’re not wrong. I’ve now removed it, but it’s up to you.
Next is to add your api key, also from Webmention.io, to a
.envfile. Rename the
.example.env, or create your own, with
WEBMENTION_API_KEY=and then your personal key. Please try not to publish this to a repository.
You’re now going to have to sign-up to brid.gy. As the name suggests, it links your website to your social media accounts (you need to add your website to these social accounts if you don’t already), so sign-up/connect each account you intend brid.gy to search. Just a thing to note again, brid.gy currently has an issue with .app TLD domains.
With everything set, it’s now time to build and publish your website. REMEMBER to set the
WEBMENTION_API_KEY key with your host, I also forgot this part.
Testing everything works
With everything setup and live, you can check to see if everything is working by sending a test webmention via webmentions.rocks. Log in with your domain, enter the auth code, and then the url of the page you want to test. For example, to test this page I would add
https://astro-cactus.chriswilliams.dev/posts/webmentions/. To view it on your website, rebuild or [re]start dev mode locally, and you should see the result at the bottom of your page.
You can also view any test mentions in the browser via the api.
Things to add, things to consider
At the moment, fresh webmentions are only fetched on a rebuild or restarting dev mode, which obviously means if you don’t update your site very often you wont get a lot of new content. It should be quite trivial to add a cron job to run the
src/utils/webmentions.tsand populate your blog with new content. This is probably what I’ll add next as a github action.
I have seen some mentions have duplicates. Unfortunately, they’re quite difficult to filter out as they have different id’s.
I’m not a huge fan of the little external link icon for linking to comments/replies. It’s not particularly great on mobile due to its size, and will likely change it in the future.
Many thanks to Kieran McGuire for sharing this with me, and the helpful posts. I’d never heard of webmentions before, and now with this update hopefully others will be able to make use of them. Additionally, articles and examples from kld and ryanmulligan.dev really helped in getting this set up and integrated, both a great resource if you’re looking for more information!
Webmentions for this post
This test verifies that you accept a Webmention request that contains a valid source and target URL. To pass this test, your Webmention endpoint must return either HTTP 200, 201 or 202 along with the appropriate headers. If your endpoint returns HTTP 201, then it MUST also return a Location header. If it returns HTTP 200 or 202, then it MUST NOT include a Location header.
Responses powered by Webmentions