Deze blogpost is speciaal voor Frank, die zich op Twitter het volgende afvroeg:

Webmentions blijven tovenarij voor me. @tonzylstra reageert op http://micro.blog op mijn post. Ik reageer daar op zijn verhaal en beiden staan onder de post.
Als dit kan met sociale netwerken... Crossplatform reageren....

Hierbij een poging om Webmentions uit te leggen, niet om de magie ervan weg te nemen, want ik blijf me er zelf ook steeds over verbazen, maar wel om uit te leggen hoe dingen werken.

Waarover we praten als we over Webmentions praten

Het lastige aan de term 'Webmention' is dat verschillende mensen er verschillende dingen onder verstaan. Of liever: de feitelijke Webmention is onzichtbaar, waardoor het zichtbare resultaat al snel ook 'Webmention' gaat heten.

De devs, en dan vooral de spec-lezers (jep, jij, Martijn), verstaan onder de Webmention de interactie tussen twee servers volgens het Webmention-protocol (waarover later meer). De gebruikers, waaronder denk ik ook Frank, bedoelen met 'Webmention' vooral de reacties van andere mensen die automagisch onder je eigen post verschijnen als je een Webmention-plugin installeerd.

Ikzelf vind beide definities acceptabel, maar het is fijn als iedereen op dezelfde pagina zit. Daarom een uiteenzetting.

De Webmention als Ding an sich

Laat ik beginnen met het Webmention-protocol zelf. Dit is een manier om een site op de hoogte te stellen dat er een andere pagina bestaat die naar de site linkt, en waarop informatie te vinden is die mogelijk relevant is. Een voorbeeld.

Stel dat Adriaan en Bassie allebei een blog hebben dat Webmention ondersteunt. Adriaan heeft een stukje geschreven en post deze op zijn blog. Bassie leest dat en heeft er een mening over. Om deze mening te uiten, post Bassie op zijn eigen blog een kattenplaatje, en geeft daarbij aan dat het een antwoord is op Adriaans stukje.

Zodra Bassie het kattenplaatje post, stuurt Bassie's server een notificatie (een POST request) naar Adriaans server, met daarin de link van Bassie's post en Adriaans stukje. Omdat Bassie heeft aangegeven dat het een reactie betreft, staat er een link in zijn stukje een link naar Adriaans stukje. Adriaans server bekijkt de pagina, ziet de link naar de eigen site, en accepteert daarna de Webmention door 'OK' terug te sturen. (Meer precies, een HTTP 200, 201 of 202.)

Met de bovenstaande flow verschijnt er natuurlijk nog niet magisch een reactie op je site. Feitelijk staat daar niets over in het Webmention protocol. Wat gebruikers dus onder 'Webmention' verstaan, is in feitte een extraatje.

Webmention++

In het voorgaande voorbeeld heeft Bassie 'aangegeven' dat zijn stukje een reactie is. Dit aangeven behoort eigenlijk al niet tot Webmention (een gewone link is voldoende), maar kan dus wel nuttig zijn voor de ontvangende partij. Door bijvoorbeeld Microformats toe te voegen aan je website, maak je je website leesbaar voor andere computers en servers. Hieronder een voorbeeld van hoe Bassie's kattenplaatje eruit kan zien in HTML met Microformats:

<div class="h-entry">
  <a href="https://adriaan.example/blogpost-over-b300" class="u-in-reply-to">
    Voor Adriaantje,
  </a>
  <img src="/https/seblog.nl/images/lolz/kattenplaatje.jpg" alt="een kattenplaatje" class="u-photo">
  van <a href="https://bassie.example" class="u-author h-card">Bassie</a>.
</div>

In dit geval is de Microformats-opmaak vrij specifiek in de boodschap verweven, maar Bassie's blog-software kan deze voor Bassie genereren, indien juist ingesteld. Daar hoeft Bassie dan verder niet meer over na te denken.

Dankzij deze Microformats-opmaak, kan Adriaans server de volgende data uit de pagina halen:

{
  "type": "entry",
  "author": {
    "name": "Bassie",
    "url": "https://bassie.example" 
  },
  "in-reply-to": "https://adriaan.example/blogpost-over-b300",
  "u-photo": "https://bassie.example/images/lolz/kattenplaatje.jpg",
}

... en die data is voor Adriaans server genoeg om het kattenplaatje weer te geven als reactie!

Wat er daarna met de data gebeurt verschilt per Webmention-implementatie. De meesten slaan het op voor latere weergave. (Het zou niet zo praktisch zijn om bij elk bezoek aan de pagina Microformats te parsen van een X aantal andere sites.) Wie gebruik maakt van een CMS-plugin slaat deze data dus op op de eigen server, Webmention-services zullen de Webmentions op hun server cachen.

Inter-social-mediale webmentions

Tot slot zijn er de reacties op blogs via sociale media. Webmention wordt door sommigen gezien als een magisch protocol waardoor reacties van Twitter op je blog verschijnen. Daar is echter nog wel een extra stap voor nodig: een backfeed-service.

Op dit moment wordt vrijwel alle 'backfeed' van reacties op social media verzorgd door Bridgy. Deze service houdt, als je je aanmeldt, je Twitter, Facebook of Instagram-account in de gaten, op zoek naar reacties, likes en dergelijke en stuurt een Webmention naar de originele post op je website als het er een vindt.

Om dit voor elkaar te krijgen maakt Bridgy een nieuwe pagina aan voor elke like of reactie die het vindt. Op die nieuwe pagina staan de nodige Microformats om aan te geven of het om een like, reactie of anderszins gaat. Daarna stuurt Bridgy een Webmention en treedt de bovenbeschreven flow in werking. Het idee is dat Bridgy op deze manier de taak overneemt tot Twitter, Facebook en Instagram zelf Webmentions gaan sturen.

Webmentions, dus

Het is dus geen magie, al blijft het wel magisch voelen. Ikzelf vind nog steeds een 'indie-Webmention', een webmention tussen twee sites zonder tussenkomst van derden, een van de gaafste dingen die er is. Maar uiteindelijk is een Webmention dus niet meer dan een link van post A naar post B, een POST-request en wat markup die vertelt waar post B nou eigenlijk over gaat. En een brouwseltje van kikker, kamperfoelie en haarlak, tweemaaldaags na de maaltijd.