Webmention.io

Use it on your site

Once you have signed up, add the following tags to your HTML, replacing "username" with the username you got when you signed up:

    <link rel="webmention" href="https://webmention.io/username/webmention" />

The system will begin collecting webmentions on your behalf.

Note that the "username" here will most likely be your domain. For instance, if your domain is https://aaronparecki.com/, then your username will be aaronparecki.com.

Display a mention counter

You can use the API from Javascript to display a mention count of one or more URLs.

Getting the data manually

To retrieve the data manually (via Fetch API, jQuery, raw XHR, etc.), you can make a request like the following. Webmention.io sets Access-Control-Allow-Origin: * in response headers, so you can query from a browser as well as from a server.

fetch("https://webmention.io/api/count?target=https://example.com/page/100")
    .then(response => response.json())
    .then(responseJson => console.log(responseJson));

This will return a list of total mentions of the URL as well as grouped by type.

{
  "count": 6,
  "type": {
    "bookmark": 1,
    "mention": 2,
    "rsvp-maybe": 1,
    "rsvp-no": 1,
    "rsvp-yes": 1
  }
}

Displaying counts automatically

You can include some simple markup and a Javascript file to automatically display the mention counter for one or more URLs on a page.

First, choose an element that will be used to display the counter. Add the attribute data-webmention-count to it, as well as data-url="" with the full URL of the page you would like to count. This might look something like the following:

<span data-webmention-count data-url="https://example.com/page/100"></span> mentions

Then, add the following script tag to your page after you've included jQuery:

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

Show all mentions

You can also use the API to show all mentions of a URL. As with the count request, this will work from a browser or you can use the API directly from a server.

fetch("https://webmention.io/api/mentions.jf2?target=https://example.com/page/100")
    .then(response => response.json())
    .then(responseJson => console.log(responseJson));

Which will return data in this format:

{
  "type": "feed",
  "name": "Webmentions",
  "children": [
    {
      "type": "entry",
      "author": {
        "type": "card",
        "name": "Tantek Çelik",
        "url": "http://tantek.com/",
        "photo": "http://tantek.com/logo.jpg"
      },
      "url": "http://tantek.com/2013/112/t2/milestone-show-indieweb-comments-h-entry-pingback",
      "published": "2013-04-22T15:03:00-07:00",
      "wm-received": "2013-04-25T17:09:33-07:00",
      "wm-id": 900,
      "content": {
        "text": "Another milestone: @eschnou automatically shows #indieweb comments with h-entry sent via pingback http://eschnou.com/entry/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html",
        "html": "Another milestone: <a href=\"https:\/\/twitter.com\/eschnou\">@eschnou<\/a> automatically shows #indieweb comments with h-entry sent via pingback <a href=\"http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html\">http:\/\/eschnou.com\/entry\/testing-indieweb-federation-with-waterpigscouk-aaronpareckicom-and--62-24908.html<\/a>"
      },
      "mention-of": "https://indieweb.org/",
      "wm-property": "mention-of",
      "wm-private": false
    }
  ]
}

More API Docs

You can read more information in the project's README file.