Content

Eclectic ENFJ, sketcher, bioinformagician. 		Gabriele Girelli's avatar

Webmentions: letting Disqus go

I have taken a clear direction in this ever more connected life: trying to retain possession of my content and privacy. Let me explain.

Privacy and content ownership

I was one of the last in my circle to jump onboard the social media ship back in 2009. From there, I ended up with accounts all over the net. Some on platforms with clear privacy policies, others in shadier places (I would probably place Facebook in the latter, to be frank).

Still, before entering the mainstream social media bubble, I was administrating a forum with a handful of beautiful regular users (that’s where the name of this blog comes from, by the way). All while posting sporadically on a hidden-away blog.

After a few years, though, handling the forum became too time-consuming, and I decided to focus mainly on the blog. So, I moved it from a blogging platform to a self-hosted solution based on WordPress. But I always found the WordPress box to be somewhat too tight, so I eventually dropped even that.

User-generated content on a static website page

That is how I ended up using Jekyll, a static webpage generator, which simplified my life enormously. Suddenly, I could type my posts in my favorite text editor (SublimeText), such a joy! Then, I just had to save them as markdown files to let Jekyll do its magic and seamlessly integrate them into my blog.

Eventually, once GitHub started offering a Jekyll service (Pages), I decided to use that to replace the need for an FTP file-transfer client with a simple git push. But, somehow, one thing remained out of reach in this new static blogging environment: dynamic content. And, more specifically, an easy way to let users interact with the website.

Until recently, I solved this problem by integrating Disqus on my blog - a free commenting platform. But, of course, any time you see something free, you are probably paying for it in some other form than money, most usually with your data. That is precisely the case of Disqus.

Now, I am based in the EU, which has that new beautiful thing known as GDPR. Thus, Disqus tried its best to provide somewhat more transparent terms of use. But, as one can easily see from the ToS;DR website, there are still some shady bits in it.

So here are the new dilemmas. What are the alternatives to Disqus? And how easily and freely can I integrate them into my setup?

The answer, in the end, was to drop comments entirely. Instead, I decided to go for a new (i.e., 2017) W3C recommendation: Webmentions!

Webmentions: a not so new recommendation

Okay. But what is a “Webmention” exactly? The original recommendation (from January 2017) states:

Webmention is a simple way to notify any URL when you mention it on your site. From the receiver’s perspective, it’s a way to request notifications when other sites mention it.

In other words, any time someone using Webmentions publishes some new content (let’s call it A) that includes a link to your content (let’s call it B), your website will be notified that A is mentioning B.

In this way, everyone retains ownership of their content! Moreover, the only information that third parties might store is the mention, if you decide not to host it yourself.

Always from the original recommendation:

A Webmention is a notification that one URL links to another. For example, Alice writes an interesting post on her blog. Bob then writes a response to her post on his own site, linking back to Alice’s original post. Bob’s publishing software sends a Webmention to Alice notifying that her article was replied to, and Alice’s software can show that reply as a comment on the original post.

How to set up your static website for webmentions

The easiest way to setup a static website to support webmentions is to use Webmention.io. All you need to do is take the following code:

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

And add it to the <head></head> block of all your website’s pages, replacing the username part with your Webmention.io username (usually your domain). That’s it, now you are ready to receive webmentions! ☺️

This code allows Webmention.io to start collecting webmentions and pingbacks on your behalf (as stated on their homepage). You could also setup your own server to receive pingbacks via Webmention.io and store the webmentions yourself, but I will not cover this topic here.

Check this link for more details on the Webmention.io API.

Webmentions from your social media accounts

If everything went smoothly, your website should now be able to handle webmentions. But how can one start collecting webmentions from their own social media posts?

For example, you might be used to share your own blog posts via your social media accounts. The webmentions protocol potentially allows to collect any reaction to these shared links. A service that simplifies this process is Brid.gy.

If you connect Brid.gy to your social media accounts, you will see your Webmention.io dashboard begin to populate with webmentions coming from them (e.g., likes, retweets, replies,…).

Note: self-replies and such are not considered webmentions and Brid.gy will not forward them to Webmention.io. To test your setup, you should have a third-party account react to one of your social media posts (which must include a link to a webmention-enabled page of your website).

How to show Webmentions on your website

I recently implemented a simple, and a bit ugly, Javascript file that allows to visualize webmentions on any website. Since this is quite minimal and easy to fiddle with, I ended uploading it to GitHub with the name: easy-webmention-js.

To use easy-webmention-js, all you need to do is load its script and stylesheet on your website, by adding the following in your <head></head> block, after importing Bootstrap and jQuery:

<script
  type="text/javascript"
  src="https://ggirelli.github.io/easy-webmention-js/src/easy-webmention.min.js"
></script>

Then, place the following where you would like your webmentions to appear:

<!-- WEBMENTIONS -->
<div id="webmentions-wrap" class="border-top pt-2"></div>
<script type="text/javascript">
  $(function () {
    ew_init({
      tag: "ggirelli.info", // Webmention.io username
      target: "https://ggirelli.info/blog/2021/08/08/webmentions", // This page's URL
      read_more_uri: "https://ggirelli.info/blog/2021/08/08/webmentions", // URL to help page (optional)
      wrap_id: "#webmentions-wrap", // ID of element where to add webmentions
    });
  });
</script>

Here, EW_TAG should be your Webmention.io username (usually your domain), and EW_TARGET should be the URL to the current page. You can also setup EW_READ_MORE_URI to add a help button that redirects the users to a help page related to Webmentions.

This page is currently running easy-webmentions-js. At the end of this page you can find the number of webmentions, separated by type. All webmentions of type “reply” include a small excerpt with the author’s avatar and homepage link, alongside a link to reply directly to the mention (currently supporting webmentions coming from Twitter or GitHub).

Moreover, by clicking on the button, one can manually provide a webmention coming from a website that does not support webmentions yet! If you think this project could be of interest, feel free to contribute or ask new features on the easy-webmention-js repo.

Resources

Webmentions: letting Disqus go
(Updated: )
Interact with this post on
Categories
Tags