Grafo.ZONE

Webmentions



I was finally able to put webmentions on my website and I will tell you how I did it.

Webmentions as it’s explained on the IndieWeb page

Webmention is a web standard for mentions and conversations across the web, a powerful building block that is used for a growing federated network of comments, likes, reposts, and other rich interactions across the decentralized social web. When you link to a website, you can send it a Webmention to notify it. If it supports Webmentions, then that website may display your post as a comment, like, or other response, and presto, you’re having a conversation from one site to another!

That sounds pretty cool, but (at least for me) the documentation is kinda convoluted and I couldn’t find a straight forward guide on how to implement it so after hiting my head against the keyboard for a while and managing to make it work on this page I will leave here what I did step by step. Enjoy!

Adding Webmentions to your cool site!

Step 1 - Preparing your website

First of all you need to create an account on webmention.io but before that you will need to do some prep on your website. On your homepage you will need a link to your email (there are more options if you don’t want to use that one, for that here is the full setup guide). The code for the link has to have this format:

<a href="mailto:me@example.com" rel="me">me@example.com</a>

Step 2 - sign in to webmention.io

Now you are ready to sign in into webmention.io.

Step 3 - Adding some code to your site

Once you log in there you need to go to Settings and there you will see that under Setup there is a block of code that you need to paste inside the <head> of your site.

Step 4 - Time to show the webmentions

Now you are ready to recieve webmentions, but still you need a way to show them. For this I used webmention.js. On that Github there are really good instructions on how to install it but to go quick it will be something like this:

  • you need to add webmention.min.js to your website
  • then you need to add this div: <div id="webmentions"></div> to wherever you want to display the comments
  • add the css of webmention.css to modify it to your liking

Great! now you have webmentions! but I was mostly interested on the next step:

Step 5 - Integrating webmentions with social media

Most of the times I make a new post it I share it on social media (mostly twitter and mastodon), with this the replies I got on those tweets/toots will appear as comments under the post on my website. For this we need to go to Bridgy. On that page you will link the social media accounts you wanna use and Boom! you will have webmentions from other sites and social media accounts ready to go.

Well, that’s it. I hope this guide writen like a cavemen helped someone.

Bye bye!

If you want to interact with this post you can do it with the following links!