The Indieweb movement is all about controlling all your content by publishing it on your own site and selectively syndicating it from there to anywhere else you want it to appear. How, then, do you enable popular shared social experiences such as conversations across people's posts, likes and resharing? These are easy when everyone's content is all on the same site (like Facebook or Twitter), but harder to implement otherwise.

The answer is Webmention, a standard for federating comments, likes, reposts, and other rich interactions across the decentralized social web. Eleventy doesn't incorporate support for Webmention, and as a static site generator it's not obvious how to add that support on your own.

Max Böck, who has done a lot of great work with Eleventy, has an excellent post describing in detail his approach to using webmentions on static sites. There's a lot to do to get all Max's elements in place and rather than try everything all at once I realized from his article that I could take a simple first step to render mentions and/or mention counts on any of the posts or articles on my site. As Max's post suggests the key to that is Webmention.io, a third party service that can receive webmentions on behalf of your site and provides an API for retrieving your webmention data at any time.

First, I registered with Webmention.io and followed the instructions there to add the necessary link tags to my site's main page. Easy.

Next I added a snippet of Javascript as an embedded script on all my Eleventy page templates that render a post or article. Those pages already had a footer section at the bottom of each post to display post-related tags so adding that embedded script was easy. It retrieves webmention information from Webmention.io whenever the page is loaded and passes it to a second Javascript function that'll dynamically write the information into the page:

<div class="wm_summary" id="wm_sum"></div>
<script type="text/javascript">
    fetch("https://webmention.io/api/count.json?target=https://www.disquisitioner.com/this_post_url")
    .then(response => {return(response.text());})
    .then(myJson => {showMentions(JSON.parse(myJson));});
</script>

That second Javascript function resides in my site-wide Javascript file to process the received webmention data and add it as appropriate to the post footer:

function showMentions(data) {
    // If no webmentions of any kind then just return
    if(data.count == 0) return;

    // A container <div> was created in the HTML to hold webmention info
    var m_div = document.getElementById("wm_sum");
    m_div.innerHTML = data.count + " webmentions";
}

To make things easy I just wanted to show a icon-based summary of webmention counts such as:

which is little more than a stylized unordered list and an icon font. (You'll see that at the bottom of this page, by the way.) Later on I'll want to come back and display more webmention information such as the mentioning author, a link to their post, and the date it was published.

For my home page, which strings together a number of posts to produce a timeline, the script embedded in HTML assigns a different unique id to each post footer and passes an additional parameter to the showMentions() function accordingly. Doing that with a templating engine like Nunjucks is easy as I'm already building the page by looping through an Eleventy collection so can just use the loop counter as part of the post footer's id.

One other tip: However you intend to implement webmentions on your site you should make full advantage of webmention.rocks, which provides all sorts of tools for testing webmentions. For my simple initial effort I just needed the receiver tests, but as I add more webmention functionality I'll need the other tests there too.

If you want to know more you'll find all my code on Github