Under the hood of Webmention.io

As I mentioned when I was talking about my nascent Webmention setup, the tiny Drupal module I’ve coded up only sends Webmentions, it doesn’t (yet) receive them: for that I’m outsourcing things to Webmention.io.

This was as simple as inserting two lines in the header of each page of this website:

<link rel="pingback" href="https://webmention.io/ruk.ca/xmlrpc" />
<link rel="webmention" href="https://webmention.io/ruk.ca/webmention" />

Once I authenticate myself on Webmention.io as the owner of this site, I have access to a “dashboard” that shows me all my Webmentions; right now there’s only one, resulting from this post on Ton’s blog:

I can also query Webmention.io’s API with a simple GET request, including the target, like:

https://webmention.io/api/mentions?target=https://ruk.ca/content/heres-my-opml

which returns JSON with all the Webmentions sent to that target:

{
  "links": [
    {
      "source": "https://www.zylstra.org/blog/2018/07/4347/",
      "verified": true,
      "verified_date": "2018-07-08T07:59:45+00:00",
      "id": 532400,
      "private": false,
      "data": {
        "author": {
          "name": "Ton Zijlstra",
          "url": "https://www.zylstra.org/blog/author/admin-2/",
          "photo": "https://webmention.io/avatar/secure.gravatar.com/59b7acc0ea30bd7a2bf210318b4640c2d1fe5d7d8f6358513edc1df0bd842535.jpg"
        },
        "url": "https://www.zylstra.org/blog/2018/07/wrapping-my-head-around-webmentions-pt-2/",
        "name": "#4347",
        "content": "<p>Hey Brad, <a href=\"https://ramblinggit.com/2018/07/the-indieweb-discovery-and-web-search/\">discovery</a> is why I started publishing the <a href=\"https://www.zylstra.org/blog/2018/04/time-for-a-return-of-the-blogroll/\">feeds I read as opml</a> for others to explore, and some I read <a href=\"https://ruk.ca/content/heres-my-opml\">do so too</a>. In <a href=\"https://www.zylstra.org/wp/wp-content/uploads/2018/07/Schermafbeelding-2018-07-03-om-15.07.38-541x1024.png\">2005 I used to have photos of blog authors I read</a>. Do you publish your feed list somewhere? <a href=\"https://tomcritchlow.com/feeds/\">Tom Critchlow also shows all the content of the feeds he follows</a> on his site. Works well as a discovery mechanism too I found. Maybe I’ll start doing that as well from my <a href=\"http://tt-rss.org\">TinyTinyRSS</a> instance I installed earlier this week.</p>\n<ul>\n<li style=\"background-color:#b3b3b3;\"><a href=\"https://share.diasporafoundation.org/?url=https%3A%2F%2Fwww.zylstra.org%2Fblog%2F2018%2F07%2F4347%2F&amp;title=%234347\" title=\"Share on Diaspora\" style=\"background-color:#999;color:#fff;\">share </a></li>\n<li style=\"background-color:#9baec8;\"><a title=\"Share on Mastodon\" style=\"background-color:#2b90d9;color:#fff;\">share </a></li>\n<li style=\"background-color:#1488bf;\"><a href=\"https://www.linkedin.com/shareArticle?mini=true&amp;url=https%3A%2F%2Fwww.zylstra.org%2Fblog%2F2018%2F07%2F4347%2F&amp;title=%234347\" title=\"Share on LinkedIn\" style=\"background-color:#0077b5;color:#fff;\">share </a></li>\n<li style=\"background-color:#32bbf5;\"><a href=\"https://twitter.com/share?url=https%3A%2F%2Fwww.zylstra.org%2Fblog%2F2018%2F07%2F4347%2F&amp;text=%234347&amp;via=ton_zylstra\" title=\"Share on Twitter\" style=\"background-color:#55acee;color:#fff;\">tweet </a></li>\n<li style=\"background-color:#4273c8;\"><a href=\"https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.zylstra.org%2Fblog%2F2018%2F07%2F4347%2F\" title=\"Share on Facebook\" style=\"background-color:#3b5998;color:#fff;\">share </a></li>\n<li style=\"background-color:#a8a8a8;\"><a href=\"mailto:?body=https%3A%2F%2Fwww.zylstra.org%2Fblog%2F2018%2F07%2F4347%2F&amp;subject=%234347\" title=\"Send by email\" style=\"background-color:#999;color:#fff;\">e-mail </a></li>\n</ul>",
        "published": "2018-07-05T16:50:27+00:00",
        "published_ts": 1530809427
      },
      "activity": {
        "type": "link",
        "sentence": "Ton Zijlstra posted 'Hey Brad, discovery is why I started publishing the feeds I read as opml for oth...' linking to https://ruk.ca/content/heres-my-opml",
        "sentence_html": "<a href=\"https://www.zylstra.org/blog/author/admin-2/\">Ton Zijlstra</a> posted 'Hey Brad, discovery is why I started publishing the feeds I read as opml for oth...' linking to <a href=\"https://ruk.ca/content/heres-my-opml\">https://ruk.ca/content/heres-my-opml</a>"
      },
      "target": "https://ruk.ca/content/heres-my-opml"
    }
  ]
}

You’ll see that it includes a host of rich metadata about the Webmention, including the contents of the posts with the mention, a snippet that includes the sentence in which the mention appears, and the name and avatar of the author.

Right now I’m not rendering that anywhere on my original post; I’m considering whether the best way to do that is to simply pull the Webmentions in real time via JavaScript or, instead, to set up a webhook at Webmention.io that pushes the Webmentions to a process in my Drupal that converts them to a regular old Drupal comment.