Step-by-Step Guide to Show Webmention Interactions on Bear Blog

This post shows how to use the Webmention.io API to display all the interactions people have had with your blog posts.

You’ll need two things to make this work:

1. Your website must be set up to use the Webmention.io service.
2. You’ll need a bit of custom JavaScript to show the interactions below each blog post.

Setting up Webmention.io itself is outside the scope of this post, as this website already provides detailed instructions.

Now, let’s move on to the custom JavaScript you’ll need.

The JavaScript Code

Below is the complete JavaScript code. I’ll explain how each part works after the code.

if (document.querySelector("body").classList.contains("post")) {
  function setContent(child) {
    switch (child["wm-property"]) {
      case "in-reply-to":
        return child.content?.text;
      case "like-of":
        return "liked this";
      case "repost-of":
        return "reposted this";
      default:
        return "interacted with this post in an unknown way";
    }
  }

  async function fetchInteractions(headerTitle) {
    const response = await fetch("https://webmention.io/api/mentions.jf2?target=" + document.URL);
    const data = await response.json();
    if (data && data.children.length > 0) {

      const interactions = document.createElement("div");
      interactions.innerHTML = `<h3>${headerTitle ?? "Interactions"}</h3>`;

      for (const child of data.children) {
        const interaction = document.createElement("div");

        interaction.innerHTML = `
              <p>
                  <strong><a href="${child.author.url}" target="_blank">${child.author.name}</a></strong>
                  <small> - ${new Date(child["wm-received"]).toLocaleString("en-US", {
          month: "short",
          day: "numeric",
          year: "numeric",
        })}</small>
              </p>
              <blockquote>${setContent(child)}</blockquote>
          `;

        interactions.appendChild(interaction);
      }

      const upvoteForm = document.getElementById("upvote-form");
      upvoteForm.parentNode.insertBefore(interactions, upvoteForm.nextSibling);
    }
  }

  fetchInteractions(document.currentScript.getAttribute("data-interactions"));
}

The main logic is in the fetchInteractions() function, which accepts one parameter: the text to display as the header for all interactions. By default, the header text is "Interactions," but you can customize it by setting a data-interactions attribute on the