Hoe werken Webmentions?

27 November 2017 edit history

Er was ooit een tijd dat we geen sociale netwerken hadden. Ja lieve kinders, opa gaat weer vertellen….
In de begindagen van het online publiceren, de blogosfeer, waren de gesprekken rondom blogposts en artikelen voornamelijk te vinden rondom de individuele sites in de reactiepanelen. Natuurlijk gebeurt dat nog steeds, maar we kunnen niet ontkennen dat een aanzienlijk deel van de conversaties is verplaatst naar sociale netwerken.

Je hoeft niet te kniezen om dat feit, het is nu eenmaal zo. En laten we eerlijk zijn, op andere sites als Reddit en Twitter ontstaan net zo goed geweldige threads rondom een blogpost. Het is alleen jammer dat je er voor naar andere plaatsen moet gaan om ze te lezen. Je zorgvuldig geschreven artikel krijgt zeker wel aandacht en liefde van je fans, maar niet op de plek waar je het hebt gepubliceerd. De conversatie woedt hevig op andere plaatsen terwijl je eigen reactiepanelen stil blijven.

In het verleden is al eens getracht om met name de Twitter reacties onder te brengen in de standaard reactiepanelen van blogsoftware. Ik meen dat in de Wordpress community hier wat mee is geëxperimenteerd en er zijn wat start-ups die pogingen hebben gewaagd.

Webmentions are coming!

Webmentions zijn een W3C Recommendation sinds begin 2017 en deze technologie probeert om reacties van andere online plaatsen onder te brengen bij jouw artikel. De blogveteranen kennen wellicht nog de Pingback en Trackback, die ooit door Movable Type is geïntroduceerd. In Wordpress zit de functie nog, maar het hele systeem van de Pingback is nogal vervuild door spammers.
Webmentions trachten dit probleem te omzeilen. Het werkt in de basis als volgt. Sorry voor de fanboy uitleg, past wel een beetje bij de kop van deze paragraaf:

  1. Arya post een blog
  2. Sansa heeft een reactie en ze post een eigen blog die linkt naar Arya
  3. De blogsoftware van Sansa ziet de link en haalt de post op bij Arya, waar in de broncode het Webmention Endpoint van Arya staat
  4. De blogsoftware van Sansa stuurt een notificatie naar het endpoint.
  5. De blogsoftware van Arya pikt de blogpost op van Sansa om te verifiëren dat de link écht bestaat. Daarna zal de reactie van Sansa bij de post van Arya worden geplaatst

Doordat Arya als uitgever van de originele post een notificatie krijgt van een nieuwe post die naar haar linkt, kan ze alle reacties verzamelen en tonen bij de originele post. Of nog filteren op bepaalde kwaadwillende URL’s of spam en die verwijderen en op een blacklist zetten.

Welnu, in bovenstaande is het Sansa die een blogpost schrijft als reactie op Arya. Maar Webmentions kunnen even zo goed om gaan met Likes, reposts en retweets.

De brug tussen blogs en social

Jazeker… zoals je al ziet op eerdere blogposts kunnen Webmentions de reacties opvangen van Twitter die komen op tweets waar de post in is gelinkt. Dat kan zijn omdat ik het zelf op Twitter heb gezet óf omdat iemand anders mijn blogpost linkt en daar weer likes en reacties op komen. Twitter, Facebook, Instagram, ze zouden in een weekend de webmentions kunnen ondersteunen verwacht ik. Helaas doen ze dat nog niet, maar dat deert niet. Het internet klust zelf wel wat in elkaar. Ik maak bijvoorbeeld nu gebruik van Bridgy, een gratis dienst die als brug dient tussen de netwerken om de likes en retweets te verzamelen.

De uitdaging

Het klinkt allemaal als halleluja als je dit hierboven leest. Fantastisch! Met een paar klikken heb je alle conversaties op het sociale web bijeen ge-sleepnet op je eigen site. Heerlijk!

Nou…

Dat valt nog vies tegen. Ik ben twee middagen bezig geweest om Webmentions te activeren op mijn site en nog is het niet helemaal lekker werkend. Ik had voorheen de gratis webdienst Disqus als reactiepaneel maar ik vond het toch allemaal wat clunky en eronder gepropt. Gewoon niet zo netjes. Echter, voor Webmentions is er in mijn geval, een statische site in plaats van Wordpress, geen kant en klare plugin die ik even hoepsakee installeer en direct werkt. Ik ben met een aantal diensten in de weer geweest, waaronder al genoemde Bridgy, om ten eerste te snappen hoe het werkt en ten tweede het dan werkend te krijgen. Gisterenmiddag had ik de webmentions werkend. Ik zag ineens likes en reacties van Twitter onder mijn Jim & Andy post (dank je Twitter vrienden! Lobi!) Maar het ziet er niet uit. De code die ik van de gebruikte dienst kreeg is behoorlijk Spartaans. Mijn CSS en ontwerp_skills_ zijn eveneens roestig dus ik schiet op dat vlak nog niet echt op. Ik zou het liefste iets hebben als onderstaande afbeelding.

Je ziet hoe de likes op deze afbeelding netjes bij elkaar staan. Dit schijnt trouwens een facepile te heten. Wist ik ook niet. Nu ben ik meer van het type “doe mij een plugin die de basis wegzet en ik tweak het wat” dan dat ik alles helemaal zelf moet gaan uitvogelen en met teveel proberen tot een acceptabel resultaat komt. Het moet wel leuk blijven he, dat zelf publiceren… Ik wil nog overstappen naar een andere dienst, Webmention.io, voor het verzamelen en tonen van alle reacties en likes, maar die kreeg ik nog niet lekker aan de praat. Dus dat is voor later zorg.

Maar hoe reageer ik nu op deez’ schrijfsels?

Ja, dat is nog wel een dingetje om uit te vogelen. Ben ik nog niet aan toegekomen. Want als je dus direct onder de blogpost een reactie wilt achterlaten, dan moet dat wel mogelijk zijn natuurlijk. Ik wil uiteindelijk wel van Disqus af. Het is een flinke brok Javascript met allerlei toeters en bellen die ik niet nodig vind.
Ik leef echter niet in een wereld waar ik maar aanneem dat elke bezoeker op mijn site zijn eigen blog heeft en daar een reactie schrijft als eigen blog en die via Webmention naar mij stuurt. Ik word al moe van het opschrijven van die zin, laat staan dat het principe van Webmentions echt breed gedragen zal worden. Dus is het mooi als er wel een reguliere reactiemogelijkheid is. Ik heb Disqus nu nog even aan gezet. Tot ik een andere oplossing heb gevonden.

Hoe begin ik met Webmentions?

Om toekomstige knutselaars en web-hobbyisten al iets meer op weg te helpen, bij deze een extragratis Digging The Digital DoorlinkLijst met relevante documentatie en services voor Webmentions. Hij zal niet compleet zijn, vul aan waar nodig. Bijvoorbeeld door een webmention naar deze pagina te sturen…

Webmentions linklijst

PS: Waar ik nu echt in ben geinteresseerd is of een aantal links die hierboven staan, een webmention sturen naar hun moederschip en ik dáár weer automagisch wordt gelinkt. Zou mooi zijn als dat lukt….

Headerbeeld Adam Jang


Webmentions