Updated on by ,

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!

Implementing WebMentions

Most of this post is going to be about how I added client-side webmentions to my site which uses Astro for static site generation and Svelte for client-side components. Some of the initial setup will apply to bare-bones HTML/CSS sites, though, so if you don’t know JavaScript you can still add some basic WebMention functionality to your site.

Web Sign-in

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 IndieWebify.me 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:

Web Sign-in verification on indiewebify.me

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.

Integrating Webmention.io

Now we’re going to sign up for webmention.io . 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 <body>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

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 src of https://webmention.io/js/mentions.js.

<script src="https://webmention.io/js/mentions.js"></script>

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.


No mentions yet

Say something about this post!