Webmention.io is a hosted service created to easily receive webmentions on any web page.
You might also be interested in reading about this project
on the IndieWeb wiki.
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
.
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>
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
}
]
}
You can read more information in the project's README file.