Updated on by Jeff Caldwell,
Webmention is a web standard for notifying sites when they’re mentioned on the web. Adding them your own site is a way for your site to talk to other sites. It’s like using the whole web as a social network. If you’ve ever had concerns about billionaires wiping out your ability to talk to people, it’s worth adding to your site. Also, it’s just fun!
Before getting into adding WebMentions, you’ll want to make sure you have basic web sign-in functionality to your site. You’ll need this to sign in to webmentions.io later, but there are other benefits to setting this up. It’s also really, really easy.
If you already have links to your Twitter, GitHub, or Mastodon accounts, this will be really quick. If not, you’ll want to create a link to each of those services you have an account on. I made sure the links I created were visible at the root of my site, but it might work if you add the links to another page.
The most important thing about these links is the
rel="me" attribute. Here’s what the link to my Twitter account looks like:
<a href="https://twitter.com/trainingm0ntage" rel="me">Twitter</a>
You can also add them to the
<head> element if you prefer not to make them visible to casual users of your site, (though, the folks at IndieWeb say visible links are preferred). If you want to include the links in your
<head>, they should look something like this:
<link href="https://github.com/nemo-omen" rel="me">
Once you have those set up, it’s time to link back to your site from those services.
Now go sign in to whichever services you linked to from your site. Update your profile (or bio, etc.) and add your site’s URL:
All done? Head over to
and go to Step 2. Stick your site’s URL into the input field and click
Test. If everything goes right you should see something like this:
Oops! Looks like my verification couldn’t find the link on my Twitter profile. My guess is that it has something to do with how Twitter inserts shortened links on their platform in place of the original URL. Let me know if you get it to work.
Now we’re going to sign up for
. Before heading over there, add the following to your
<head> element and make sure to replace
username with your domain name:
<link rel="webmention" href="https://webmention.io/username/webmention" /> <link rel="pingback" href="https://webmention.io/username/xmlrpc" />
For reference, here’s what mine look like:
<link rel="webmention" href="https://webmention.io/jeffcaldwell.is/webmention" /> <link rel="pingback" href="https://webmention.io/jeffcaldwell.is/xmlrpc" />
Now head over to webmention.io and sign-in using your site’s URL.
Displaying a WebMention Counter
If you’re just working with HTML and CSS you can use a handy counter provided by the folks at webmention.io to display the number of webmentions your site has received.
First, you’ll need jQuery. Grab a version you like and add it in a
<script> tag at the top of your page’s
Now, add this
<span> where you want the counter to appear (replace
https://example.com with your site’s URL):
<span data-webmention-count data-url="https://example.com/page/100"></span> mentions
Finally, add another
script tag at the bottom of your page with a
That’s it! You should now have a fany webmention counter on your site! Next up, we add Bridgy so we can start polling for mentions on social networks.
This is an ongoing note. Jeff will update it soon with instructions for adding client-side webmentions in Astro with Svelte.