You dont mention, webmentions

Cover image

Perhaps you've heard whispers or mention of them and now you are finally ready to wield the awesome power of webmentions. is a hosted service created to easily receive webmentions on any web page.

Imagine for a second you have a blog, and you also read other blogs. Normally if you wanted to comment on a blog you would be faced with either an email signup and confirmation, or some individually coded social providers, or... Disqus.

That was 2019, now welcome the future. When you link another post from a site, the post owner can see what you wrote and share it like a commment on that post. No messy 3rd party javascript dragging down that sweet, sweet lighthouse score.

Now we can take this another step further by monitoring popular social media sites for mentions of your posts. Sweet so you can basically have a static site with a javascript free commenting and like system.

The basic setup is available on but be forewarned the latter part of the setup may take some time investment; I will try to aid with that. This article is super helpful and you should start there I will make use of the authors gridsome plugin.

Here's the end result of my first web mentions from twitter.

Cool so I've added each twutter user image and linked it back to their profile, then tallied up the like and retweets, this is filtered per post.

I'm using Vue.js and GraphQL via gridsome but you can adapt to your needs.

Go ahead and add @zefman/gridsome-source-webmention to your gridsome project.

add the plugin to your gridsome config

    use: '@zefman/gridsome-source-webmention',
    options: {
    domain: '', // Your webmention domain
    token: 'your-webmention-io-token', // Your secret webmention token

Super cool, let's now fetch and display some webmentions.

<div class="mentions">
    <div v-for="edge in $static.mentions.edges" :key="edge.node.wmId">
    <a :href=""><img :alt="" :src="" width="50" /></a> <br />

    likes {{likes}}<br />
    reposts {{reposts}}
  query  {
    mentions: allWebMention(filter: { wmTarget: { } }) {
      edges {
        node {
          content {
          author {
computed: {
    likes() {
      return this.$static.mentions.edges.filter(edge => edge.node.likeOf)
    likesCount() {
      return this.likes.length
    reposts() {
      return this.$static.mentions.edges.filter(edge => edge.node.repostOf)
    repostsCount() {
       return this.repost.length

That's all for now folks!