Webmentions Revisted

When writing your blog, many, like myself,f would like comments from our readers. Comments, likes, reposts and similar let the author know what readers think and cultivate great new conversations or provide invaluable feedback and even criticism on which we can learn from and grow.

I first wrote a very light article on the implementation of Webmentions 5 years ago here.

I'd say, to my knowledge, there haven't been huge strides or adaptation of them in the mainstream web. There does seem to be traction in the FED web.

What is the FED web? from brid.gy fed and here fediverse and here on the verge

Bridgy Fed is a decentralized social network bridge. It connects the Fediverse, the web, and [bluesky]("https://bsky.app/profile/jswhisperer.bsky.social") . If you're on one of these networks, you can use Bridgy Fed to follow people on other networks, see their posts, and reply, like and repost them. Likewise, they'll be able to see you and your posts, too. Click here to get started, or read on for more information and setup details.

So last time I wrote about integrating with Gridsome "The Jamstack framework for Vue.js" and a GrapQL solution; I've since moved my blog to Astro

Astro is pretty cool, but this article isn't about it right now. It is another important Static Site generation tool.

const webmentionsUrl =
    'https://webmention.io/api/mentions.jf2?domain=example.uk&token=token'
const response = await fetch(webmentionsUrl)
const json = await response.json()
const webmentions = json.children.filter((mention: { [x: string]: URL[] }) =>
    mention['wm-target'].includes(pageUrl)
)

You might then render the results in your framework of choice as below. I've added rich data or microformats2 Microformat Microdata covered in my SEO starter article

<html>
<ul>
    <li itemscope="" itemtype="http://schema.org/UserComments" data-astro-cid-qesbhxo5="">
    <small>
        <time itemprop="commentTime" datetime="2025-01-24T10:15:16Z">January 24, 2025</time>
    </small>
        <div itemprop="creator" itemscope="" itemtype="https://schema.org/Person"
            class="u-author h-card">
            <div itemprop="name">Gregory</div>
                <a itemprop="url" href="https://jswhisperer.uk/author/greg"
                aria-label="author url">
                <picture>
                    <source srcset="greg.CZmlD_1D.jpeg" type="image/webp">
                    <img src="greg.CZmlD_1D.jpeg"
                        alt="Gmoney" data-astro-cid-qesbhxo5="true" width="800" height="800" loading="lazy"
                        decoding="async">
                </picture>
            </a>
        </div>
        <div class="information" data-astro-cid-qesbhxo5="">
            <div>
                <p>
                    replied on: <time datetime="2025-01-24T10:15:16Z">January 24, 2025</time></p>
                <blockquote itemprop="commentText">Wicked cool</blockquote>
            </div>
        </div>
    </li>
</ul>
</html>

The last step for me is having my static blog trigger a build for new Webmentions. I'm using Cloudflare Workers, but it's the same process for Github Pages / Workers, Vercel etc.

Take your webmention.io webhook

plug it into your static host

and Enjoy

Greg, The JavaScript Whisperer @jswhisperer

Webmentions Revisted

Comments 0 total