Tag: guide

Displaying Webmentions with Posts

I have been using Blot, a simple blogging platform with no interface, for quite some time now for running my blog. I am not alone when I say this, but am mighty impressed with how simple it is to post things on blot and maintain the overall site. They are just some files in Dropbox – that’s about it. So, it was pretty straightforward to customise the theme to my liking and to enable the support for IndieWeb principles.

Post Notes

One thing I have noticed, though, is that most of the IndieWeb principles are not visible. They enable a more open web, providing sites a grammar they can talk to one another with. But for someone who owns the website or even someone who reads the posts on a website, whatever changes go in just aren’t apparent. Except, of course, for webmentions.

I have already detailed the steps to Indiewebify one’s website (specifically one built with Hugo). I did not go into the details of setting up webmentions. And that is exactly what I get asked the most about – how does one display mentions along with the posts.

The need is more evident with microblogging – and especially so with micro.blog. The platform fosters a very active and pleasant community focused more on the interactions (replies) than meaningless reactions (likes, reposts). It also sends webmentions for every reply to a post to the sites that can receive them. So the desire to display the interactions along with the posts, microposts more so, is understandable.

In this post, I will (finally!) document the steps that can help one receive, fetch and display the webmentions along with the posts. The steps are documented from a reference of a blot website. However, the steps below can be altered at appropriate places, primarily formats, to implement the support for any other platform.

Essential Indieweb

Before you can start receiving the webmentions at your site, there is an essential step from IndieWeb to be achieved – to make your website your identity online. It involves declaring openly your social network profiles as rel-me links and link those profiles back to your site. This allows you to login to any IndieAuth enabled services using your website’s homepage – no need to create an account or maintain passwords.

To achieve this, modify the head.html of the site’s theme to add such links to your other online profiles in <head> element. These profiles can be at Twitter, Github, Facebook, or even email – anything where you can link back to your website from. Some reference links are shown below.

<link rel="me" href="https://twitter.com/abcxyz" /> <link rel="me" href="http://github.com/abcxyz" /> <link rel="me" href="mailto:abcxyz@example.com" />

After you declare your website with either Twitter or Github, they can authenticate your identity. With email, a link is sent to the configured email address to do the same, very much like any email-based two-factor authentication.

You also need to declare the service which will act as an authorization endpoint when needed. This is used by other services, mostly IndieAuth clients, to validate your identity. To configure this, just add the below link to your site’s head.

<link rel="authorization_endpoint" href="https://indieauth.com/auth">

Once you have this enabled, you can test your setup using Indiewebify.Me. Test the Set up Web Sign In” section.

You are now ready to receive the webmentions from other sites, including Micro.blog.

Receive Webmentions

This primarily involves hosting and declaring a webmention endpoint. Of course, the active IndieWeb community already has a ready solution for this – webmention.io by Aaron Parecki. It is a hosted service created to easily handle webmentions”. All you have to do is sign-in with your domain (i.e. validate your identity) and let Webmention.io receive all mentions to your site. Once that’s done, just declare the webmention endpoint as below in your site’s head.

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

The username is typically the url of your site (you can also find these details on the settings page). To test this setup, login to webmentions.io dashboard and you should start seeing the mentions sent to your site (which includes the replies on Micro.blog.

Display Webmentions

Webmention.io also provides APIs for you to fetch the webmentions to your posts/site. You can implement a custom solution using Javascript for fetching and displaying these mentions along with posts. Below is one of the ways this can be achieved. It specifically pulls the likes, reposts and replies and puts them below the posts. The code might look a bit untidy, but it would be easier to follow what’s going on. You can improve over this eventually.

To start with, declare a placeholder for the webmentions. Place the below div element in your entry.html file between {{#entry}} and {{/entry}} – preferably towards the end of the file, just above {{/entry}}.

<div class="post-mentions" id="post-mentions" style="display:none"> <ul class="mentions-list" id="mentions-list"></ul> </d
iv>

Of course, you could replace the unordered list ul element with anything else. This is just one of the ways you can do it.

Next, you need to fill this div element with the mentions the entry has received. You can use the javascript snippet available at this gist to fetch and display the webmentions along with the post. Just place the complete code available there at the end of script.js file of your blot’s theme. So it would look something like below (note that this is an incomplete snapshot).

{{{appJS}}} var post_url = window.location.href; $(document).ready(function(){ $("ul#mentions-list").empty(); $.getJSON("https://webmention.io/api/mentions?jsonp=?", { target: post_url }, function(data){ ... ... 

Make sure the first {{{appJS}}} line is not removed. This import makes sure the additional javascripts necessary for some specific features provided by Blot – for example jQuery for image zoom, Google Analytics etc. – are imported.

The above javascript snippet does below.

  1. Gets the current post url and fetches the webmentions for that url from Webmention.io.
  2. Divides and groups the mentions by the activity type (like, repost, link, reply). This is so that you can control how each activity-type is styled.
  3. Finally, populates these mentions into the above-created placeholder div element.

At this point, you should start seeing the webmentions along with the posts once the above-mentioned steps are carried out.

In case, the webmentions are available on the webmentions.io dashboard, but aren’t getting loaded on the post, one possible root cause is failure of jQuery import. Declare a jQuery import explicitly in head.html by adding below statement within the head tags.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script> 

You will also note that all the html elements in the javascript code are tagged with class attribute. This allows you to control the style of the elements as per your liking. Just modify the main css file for your theme (typically style.css) to add styling for these classes.

For reference, find below a sample styling for the main post-mention class.

.post-mentions { padding-top: 15px; margin-top: 10px; border-top: 1px solid #AEADAD; border-bottom: 1px solid #AEADAD; font-size: 16px; } .post-mentions ul { list-style:none; padding:0; margin-left: 0; }

Similarly, you can also style the mention, mention-author, mention-social and mention-text classes.

Interactions from Social Media

Though references to your posts from IndieWeb sites are handled, what about the references made on Twitter or Facebook? It can be in any form of response (i.e. likes/retweets/reposts) to the syndicated post. Of course, they do not send webmentions (wish they did).

One option is to implement your own backfeed to poll for such interactions and handle them as response. Well, the community has made sure there is a simpler hosted option. Enter Bridgy.

Bridgy is an open source project and proxy that implements backfeed and POSSE as a service. Bridgy sends webmentions for comments, likes, etc. on Facebook, Twitter, Google+, Instagram, and Flickr.

Just connect your social accounts with your website at Bridgy and every time there is an interaction about your post on a service, Bridgy captures that and sends a webmention to your endpoint configured earlier.


I understand that the IndieWeb journey can get overwhelming. Webmentions are a critical part of this journey and, as I said earlier, one of the more prominent pieces of the overall puzzle. I have never been comfortable using any of the commenting systems, be it those that come native with the CMSes or external commenting systems like Disqus. I have also observed that the new platforms, like Blot or Micro.blog, rarely come bundled with commenting systems of their own.

Webmention has a potential to address that need. I hope the steps detailed above come in handy for anyone who wants to display webmentions on his or her site right next to the posts. The source for the theme that styles my blog at Blot is openly available at GitHub. So, if you like anything that you see at my blog, you can refer to the source and get inspired.

Do let me know if you face issues with getting any of steps carried out. If you don’t face any issue and get everything working perfectly, send me a webmention — the best way would be to link to this post. If all’s well, your links would be visible below this post as mentions.

IndieWebify Your Hugo Website

For many, that’s too much of jargon right there in the title. So to a bit of basics first. I would not go into the history or setup of this website. TL;DR this site is was at one time build with a static site generator Hugo themed by a custom port of Ghostwriter theme. In this post, I want to focus mainly on why and how of IndieWeb.

Ever since I built this site, I had grown pretty determined to styling this exactly to my liking. Every section in here is thought through and has a purpose. When I was happy with what I had at the core, I started exploring how to make this my primary identity online. I had realised that thanks to all the silos of Facebook, Twitter, Medium, et al., my online presence was scattered across multiple sites. IndieWeb calls it sharecropping your content.

Our online content and identities are becoming more important and sometimes even critical to our lives. Neither are secure in the hands of random ephemeral startups or big silos. We should be the holders of our online presence.

When you post something on the web, it should belong to you, not a corporation. Too many companies have gone out of business and lost all of their users’ data. By joining the IndieWeb, your content stays yours and in your control.

Yes, absolutely. I just couldn’t stop nodding my head in agreement as I read along. I want this site to be the primary place where my content exists. And I hope everyone spending time online, doing as basic a task as consuming content on social media and liking stuff there, should do so first primarily on a place he controls. Post on your website, syndicate it everywhere else1.

And it doesn’t take much to enable this. The steps I mention below can be incorporated on any platform you base your site on. Here I specifically jot down the steps I did for my site. It’s just a set of principles, many of them already W3C Recommendations.

Hugo Basics

Hugo allows you to completely define how your website is structured and styled. It allows you to even define the behaviour of the pages across. Typically a user chooses a theme from a varied selection and lets it handle everything. However, you always have access to the theme files and the code — just some Go snippets spread across HTML pages, making it fairly simple to modify the same.

  1. Familiarise yourself with your theme, typically present in <site_root>/themes/<theme_name>
  2. Identify the customisations made
  3. Make changes to the code, typically present either in layouts folder of your site or the theme

Web Sign-in via IndieAuth

The first step in owning your identity online is allowing your site to be your identity online. All these needs is to declare openly your social network profiles as rel-me links and link those profiles back to your site. This allows you to log in to any IndieAuth enabled websites using just your website homepage, no need to create an account or maintain more passwords.

For me, I already had links to my social network profiles in my /layouts/partials/header.html file. All I had to do was add a rel-me tag to it — a sample snippet to Twitter profile below.

<a data-hint="Twitter" title="Twitter" href="{{ . }}" target="_blank" rel="me"> 
      ... 
</a>

I have selected Twitter and Github as the social network profiles to be used for identification.

You also need to declare the service which will act as an authorization endpoint when needed. This is used by other services, mostly IndieAuth clients, to validate your identity. To configure this, just add the below link to your site’s head.

<link rel="authorization_endpoint" href="https://indieauth.com/auth">

Identity via h-card

Of course, once you decide your site will be your identity, your profile online, you need to make sure it clearly declares your basic information, i.e. define that identity. This allows other sites and services to know more about you. This is done via an h-card, a part of the microformats2 specification.

I added an h-card with my name, nickname, email and photo in /layouts/partials/footer.html

<p class="h-card vcard"> 
   <a style="text-decoration: none" href={{ .Site.BaseURL }} class="p-name u-url url author metatag" rel="me"> {{ .Site.Author.name }} </a> / 
   <a class="p-nickname u-email email metatag" rel="me" href="mailto:{{ .Site.Author.email }}"> {{ .Site.Author.nick }} </a> 
   <img class="u-photo" src="img/headshot.png" alt="" /> 
</p> 

This way your social networks are not ones that define your identity, rather it is you who declare and control it.

Content definition with microformats

After defining yourself, the next step is to define your content. It is important for other sites and services to not just identify you, but your content too. Just add an h-entry markup (again part of microformats2 specification) to the posts template. This is possible by identifying the layouts that handle your posts and adding some markups to it.

I had to modify the /layouts/partials/post-header.html, /layouts/partials/post-content.html and /layouts/post/single.html. The information I declare is post title (p-name), post URL (u-url), author (p-author), date (dt-published) and, of course, the content (e-content). Finally, a typical post template looks as below.

<article class="h-entry"> 
    <h1 class="post-title p-name" itemprop="name headline">{{ .Title }}</h1>
    <span>Published <a class="u-url" href="{{ .Permalink }}"> 
        <time class="dt-published">{{ .Date }}</time>
    </a> </span> 
    <span>by</span> <span class="p-author">{{ .Params.author | default .Site.Author.name }}</span> 
    <div class="post-content clearfix e-content" itemprop="articleBody"> {{ .Content }} </div> 
</article>

Cross-site conversations via Webmentions

All the steps done till now allow defining your and your content’s identity for external websites. However, how do you enable conservations with them? If enabled, every time you or your website is referenced online, if they are IndieWeb Level 2 enabled, you are notified by Webmentions, another W3C Recommendation.

Webmention is a simple way to automatically notify any URL when you link to it on your site. From the receivers perspective, it’s a way to request notification when other sites link to it.

In short, it is a modern alternative to erstwhile Pingback mechanism in prime blogging days. Of course, you have to enable your site to both send and receive web mentions.

To send a webmention to the page you have referenced, you can notify by

  • using a form made available on the referenced page
  • using curl or one of the many open-source clients

If the referenced site can receive webmentions, they would be notified that you have linked to them. But how do you enable your site to receive web mention?

Again, it involves hosting and declaring a webmention endpoint. Of course, the active community already has a ready solution for this – webmention.io by Pelle Wessman. It is a hosted service created to easily handle webmentions”. All you have to do is sign in with your domain (i.e. validate your identity) and let webmention.io receive all mentions to your site. Once that’s done, just declare the web mention endpoint as below in your head.

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

Webmention.io also provides APIs for you to fetch the webmentions to your content/site. You can implement your own solution for fetching and displaying these mentions along with posts. I have a simple Javascript to fetch and display them with posts — this is still a work in progress.

Interactions from Social Media

Though references to your posts from IndieWeb sites are handled, what about the references made on Twitter or Facebook? It can be in any form of response (i.e. likes, retweets/reposts) to the syndicated post. Of course, they do not send webmentions (wish they did).

One option is to implement your own backfeed to poll for such interactions and handle them as a response. Well, of course, the community has made sure there is a simpler hosted option. Enter Bridgy.

Bridgy is an open source project and proxy that implements backfeed and POSSE as a service. Bridgy sends webmentions for comments, likes, etc. on Facebook, Twitter, Google+, Instagram, and Flickr.

I was set — now, every time there is interaction about my post on a service, bridgy captures that and sends a webmention to my endpoint.

One More Thing – Micropub

At this point, I had completely IndieWebified this site. I understand it might get overwhelming if you read it as a long sequence of steps. But trust me, the changes to be made are neither too many nor too complicated. It is just setting your site with appropriate markups and endpoints. There is also a really helpful guide in IndieWebify.me that walks you through every step, and also validates if you have everything set up correctly. But if you still do not want to go through the trouble, I have open sourced the changes I made to the theme I was using. You can use this theme, style it as per your liking, if needed, and get going.

For me though, there was one more thing pending. At the same time I was doing setting this up, micro.blog had caught my attention. I already had a section dedicated for the microposts. I configured a feed for these posts, the microblogs, to syndicate to my micro.blog timeline too. I was enjoying the interactions I was being part of with the community there2.

There was just one issue, I could not use it to post to my site. My process to post to this site still involved text editors and git commits. I wish it was simpler
 — at least for such microblogs. I wish I could just post from micro.blog and have an entry made. Enter Micropub, again another W3C Recommendation.

It is the trickiest part of the puzzle. Again it involves creating an endpoint which can accept a request to post, verify that it is coming from an authorised source and finally create the post file in required structure for Hugo to build and deploy. I have enabled the support for Micropub on this site, thanks again to Paul.

I would like to detail out the solution I have running. But that would be a topic for another detailed post. In short, I hosted Paul’s open-source micropub endpoint3, configured it to generate the post in the format I need, configured it to commit to my website source at GitHub, declared it as my site’s micropub endpoint and then let Netlify handle the rest.

You bet I would say it was all simple. I won’t.


I have realised that the idea of owning your identity online is a crucial facet of protecting yourself and your content in this fragile, siloed world of internet. It may be perceived as ostentatious by many, but it is rather humble, driven by a virtuous intent. There is nothing wrong in attempting to control what you post online, to make sure it stays online till you want it to. IndieWeb project allows that.

I do also realise that it is naive to think no one getting online will find this process irksome. Even though well defined, the principles are not for all. The simplicity of using and posting on social media services will continue to attract regular users4. However, here’s wishing that at least a part of these users are inspired to get their own personal domain. After all, it’s the first step in getting started on this IndieWeb journey.

Update (23rd September 2020): Updated the post to clarify the site has been moved recently to WordPress.


  1. IndieWeb terms it POSSE – Post on Site, Syndicate Elsewhere

  2. It really is a great community. I would urge every one with a blog or a site of there own to join the platform. It is open, stays focused on letting you own your content and makes you be part of a wonderful set of people, all with some varied talent. With an open mind, there is so much to learn.

  3. Though it’s primarily created for Jekyll, it does work with Hugo too.

  4. In a way, this simplicity brought more people online, gave them a platform to create and publish their content. Gave them a voice. It would be pretentious to only blame them for their frailties and not appreciate what they have fostered.