What is a Webmention?
Webmention is a relatively recent web standard (or W3C recommendation) that allows notifications when one website mentions a URL on another website. Think of it like @mentions on social platforms, but instead of just working within a particular website from one account to another, they work across websites. Your website can now @mention my website!
For those who are interested in delving deeper into the idea and its implications, I’ve written a primer in the past : Webmentions: Enabling Better Communication on the Internet.
The goal is for other websites to be able to reference content in my TiddlyWiki website, and if those websites support sending the notifications as either webmentions (or the older pingbacks), I’ll get a notification that my content was referenced elsewhere on the web. This is just the beginning of allowing two way communication between websites.
My exploration today is how to quickly get these up and running on a public TiddlyWiki instance. The public part is important because webmentions won’t work for non-public URLs which includes private TiddlyWikis. If you’re wondering how to self-host a TiddlyWiki on your own domain, I’ve recently written up a tutorial for doing just that. At the end of this article, I’ll make a few notes about how one might use webmentions, particularly in a TiddlyWiki ecosystem.
I’ll start out by saying that writing a full JavaScript implementation of the Webmention spec is beyond my capabilities presently, but it could be something that TiddlyWiki core might implement in the future. (Maybe something like Lazymention which is written in node.js might be leveraged?)
Here I’m going to focus on using a third party service to do all of the heavy lifting and code our behalf. It’s relatively common, especially in the static website space, for websites to rely on third party or publisher services to either send or receive Webmentions on their behalf. Given my current knowledge of TiddlyWiki and how its internals work and my knowledge of Webmention services, I thought it would be quickest and easiest to look at using the Webmention.io service to handle receiving these @mentions from other sites on my behalf.
While this article may seem long, I’m hoping it’s detailed enough for those who are code averse to follow the recipe and do this themselves. If you can create a Tiddler, cut and paste some text, and follow the tutorial you won’t need to know anything about code. I did the entire thing myself in about five minutes from start to finish.
Receiving Webmention notifications for your TiddlyWiki
As a quick overview, we’re going to cut and paste a few lines of code into a special tiddler of our TiddlyWiki based website. This will allow us to do two things:
- Log into Webmention.io to create an account
- Allow other sites that send webmentions to us to find an endpoint on our TiddlyWiki website that accepts them on our behalf.
We’ll then rely on the Webmention.io dashboard to show us our notifications or received webmentions.
Logging into Webmention.io
Webmention.io requires you to log in with your domain name/URL and relies on you being able to authenticate yourself using it. Since I’m not aware of an IndieAuth or equivalent mechanism for using TiddlyWiki to log into Webmention.io, the quickest method to accomplish this is to rely on RelMeAuth using IndieAuth.com to log into Webmention.io using either a Twitter or GitHub account. From a non-technical perspective, we’ll be using either our Twitter or GitHub account and it’s OAuth2 security to log into the service.
First we want to put a link to our public TiddlyWiki website into the website field on either Twitter or GitHub using the profile settings of one of those services. Here’s what mine looks like on GitHub:
Next we want to place a corresponding link to the relevant service into the <head> of our TiddlyWiki site using one (it’s okay to use both) of the the following lines of code:
<link rel="me" href="https://twitter.com/username" />
<link rel="me" href="https://github.com/username" />
where you will replace the username in these links with the respective usernames of your accounts. (I’ll note that you don’t need to do this for both accounts, you can use either Twitter or GitHub.)
To place these lines into the appropriate location on your TiddlyWiki, you’ll want to create a tiddler with a name like $:/plugins/indieweb/core/rawMarkup and the tag $:/tags/RawMarkup.
Then cut and paste one or both of these links as appropriate into this tiddler and save it (and your TiddlyWiki).
You should now be able to go to webmention.io and enter the URL for your TiddlyWiki into the web sign in box and click “sign in”. The service will parse your website’s page, find the link to either Twitter or GitHub and present you with the appropriate sign in button for one or both of those services. Click on the button for your chosen service. IndieAuth.com will then take you to that service to log into it, or, if you’re already logged in, it will take you back to webmention.io to your new account.
Creating your Webmention endpoint
Within webmention.io you can now go to the “settings” page which will give you two more links which are your webmention and pingback endpoints. They will look something like this:
<link rel="webmention" href="https://webmention.io/example.com/webmention" />
<link rel="pingback" href="https://webmention.io/example.com/xmlrpc" />
where example.com will be replaced with the URL for your website.
Now you should cut and paste these two <link>s into the same tiddler you created above: $:/plugins/indieweb/core/rawMarkup. Now save the Tiddler and your TiddlyWiki. (Be sure to leave the previous links in case you need to log back into webmention.io in the future.)
You’re done!
That hopefully wasn’t too hard.
But what does this do? When another website links to your website and sends you a notification, the code on your page will delegate the receipt of the webmention to webmention.io which will verify that the sending site has your URL on a publicly viewable page (this helps to cut down on spam problems that pingbacks used to have). It will then store the notification for you.
If you need a reminder to check them occasionally, maybe you could add a Tiddler with the link to your dashboard to appear on your wiki when you open it next.
Perhaps in a future tutorial I’ll delve into the specifics of actually showing these mentions directly within your TiddlyWiki on the Tiddlers to which they relate.
Optional Webmention badge
Some may notice that I’ve put a small Webmention badge into the footer of my TiddlyWiki site to visually indicate to human readers that the site accepts webmentions. You can optionally do this for fun if you’d like.
Sending Webmentions with TiddlyWiki
Sending Webmentions seems to be an issue as the fragment-based URLs that TiddlyWiki uses as permalinks using JavaScript seem to cause an issue with many receivers. They apparently have problems resolving and parsing pages due to js;dr related issues. I would send webmentions manually, but most receivers I’m aware of have this js;dr problem. I’m not sure if there is an easy way around this issue.
Hyperchats, Wikis, and Open Educational Resources
What’s interesting about supporting Webmention, particularly from a TiddlyWiki perspective, is that if my TiddlyWiki is notified of mentions of it from outside sources, I can quickly cut and paste those responses directly into my Wiki pages in a pseudo-comment section similar to the comments section on this post which could serve as a model. If those mentions of a particular Tiddler are from other TiddlyWikis, I could also choose to drag-and-drop (or import) them into my TiddlyWiki!
If I want to go a step further, I could transclude those imported Tiddlers into the Tiddler that they’re in reference to. Perhaps I might do this under a heading of “@mentions” or perhaps “Comments” and suddenly I’ve got a way of displaying two-way conversations on my own TiddlyWiki site.
As is mentioned in Kicks Condor’s post about Hyperchat Modality, one could potentially use custom theming information (cleverly named “whostyles” in that post) from imported Tiddlers (or themes from other platforms) to identify the web identities of the sites they’re received from. I’ll also mention Kicks’ post about Hypertexting which is related and forms an interesting melange of websites, blogs, wikis, and hypertext of all kinds to form a more interesting web medium.
For the broader information collecting and building or academic communities (and here I can’t help thinking about the Open Educational Resources space that uses Creative Commons licensing to build their teaching resources), one could use these webmentions as a means of notifying sites that their content has been used, changed, or updated (typically those using Creative Commons will credit their source using a link). Then the receiver of the notification could optionally add to or change their version or even just collect the changes. This becomes particularly useful when the Tiddlers can be easily dragged and dropped between TiddyWikis!
As an explicit example, imagine a professor who wanted to build a textbook anthology, but who could do so by dragging and dropping a variety of Tiddlers from one site to another to create a quick textbook or reader for their students. This idea is particularly exciting to me when combined with the idea behind TW5-powered ebooks!
What could you imagine doing with webmention notifications on your TiddlyWiki site?
TiddlyWiki is a very solid looking platform for IndieWeb use (essentially using TW as a personal website). I am having some issues with the js;dr (cURL-ability) issue, but there are some methods for using it to create a static website.
To help others out and provide some examples, I’ve started a stub page for TiddlyWiki on the IndieWeb wiki, which uses MediaWiki. (If you have the rel=”me” stuff set up in the second article about h-card linked below, you should be able to use your TiddlyWiki URL to log into the IndieWeb wiki and document yourself, changes, and ideas.)
I’ve been writing up some of my explorations using TiddlyWiki for IndieWeb on my primary website (with copies on my TiddlyWiki) for those who are interested in taking a look or experimenting for themselves.
Self-hosting TiddlyWiki with GitHub Pages
An h-card for my TiddlyWiki
Webmention for TiddlyWiki to enable website to website notifications and communication
For those interested in following my particular progress, you can find all of my related content on my site with this tag: https://boffosocko.com/tag/tiddlywiki/ or follow via RSS at https://boffosocko.com/tag/tiddlywiki/feed/.
For those who are interested in delving in further, I might suggest looking at my IndieWeb/TiddlyWiki To Do List for things that could potentially be worth working on next:
adding proper h-entry and h-feed microformats markup
adding microformats markup and/or customizing tiddlers as articles, notes, bookmarks, and other types of posts
backfeed of comments from Twitter, Flickr, Instagram, GitHub, Mastodon using Brid.gy
adding a full implementation of webmentions for core
figuring out the js;dr problem for sending webmentions
Adding set up to potentially allow posting to TiddlyWiki using Micropub (may run into js;dr problems?)
Look into using TiddlyWiki as a Micropub server
Adding header information for using TiddlyWiki with Microsub readers (this should be fairly easy)
There is a lot of open source code in a variety of languages that does a lot of this stuff already in addition to lots of examples, so do search the IndieWeb wiki or ask in the IndieWeb chat for help or pointers so that you won’t necessarily need to reinvent the wheel.
I’ve previously written about setting up receiving Webmention for TiddlyWiki by logging into webmention.io and creating an account to delegate the receipt of the notifications.
Naturally, these notifications can be more fun for cross-site conversations if one has the ability to display the webmentions on the posts to which they relate. There are probably a number of ways of doing this, but following the TiddlyWiki advice of keeping Tiddlers as small as possible, it seemed like creating a tiddler for the response and then transcluding or embedding it into the original would be the best course of action.
At the recent Gardens and Streams: Wikis, Blogs, and UI—a pop up IndieWebCamp session there was some discussion on internal bi-directional linking in wikis, but I thought it would also be fun to show off bi-directional linking between my wiki and other websites. To do that will require displaying at least some Webmentions.
My wiki currently doesn’t have very many webmentions or incoming links, but after writing about a Bookmarklet for pasting content into TiddlyWiki, I got an email from Anne-Laure Le Cunff that she’d used some of the code to write a bookmarklet for Roam Research. Since her article didn’t send a webmention, I used Telegraph to manually force her article to send my wiki a Webmention so my account would have a record of it for the future for potential exporting or other use.
Now I’d like to display this webmention on that tiddler. Doing it automatically would be great, but I thought, since I don’t expect to receive many on my wiki that I ought to try out a manual set up to see how things might work and how I might display them if they were automated.
Since I had created that bookmarklet, I used it to copy and paste the text from Anne-Laure Le Cunff‘s website into a new tiddler. I then massaged it a bit to format it to look like a response and I’ve transcluded it into the original post under a heading of Responses.
The side benefit of doing this is that the stand alone tiddler that has the link and the context from her post also sits in my wiki as a bookmark of her post as well. As a result, I get a two-for-one deal: I get the bookmark of her post with some context I’m interested in, but my original post can now also display it as a response! Now I can also use that bookmark in other places in my website as well. If only one could do this so easily in other CMSes?!
I’ve yet to hear of another example of this in the wild, so unless I’m missing something, this may be the first displayed Webmention on a TiddlyWiki in the wild.
Next steps
Data formats
TiddlyWiki has lots of ways to display data in Tiddlers, so perhaps one might use various fields in a bookmark tiddler to create the necessary comment display. This could give a more standardized method of displaying them as well. It could be particularly useful if someone was using a microformats parser to import the data of such mentions. If this were the case, then the tiddler that is being commented on could do a filter/search for all tiddlers in the wiki that mention it and transclude the appropriate pieces in a list format with the appropriate mark up as well as links back to the individual tiddlers and/or the links to the sending site.
I’m curious if others have ideas about how to best/easiest implement the display portion of webmentions on a public TiddlyWiki? Since I’m also hosting my entire TiddlyWiki on GitHub pages, there might be other potential considerations if I were to be hosting it statically instead. This may require some experimentation.
I’ve got a few mental models about how one might implement showing Webmentions in TiddlyWiki, but it may take some more thinking to figure out which way may be the best or most efficient.
Automation
I don’t anticipate a lot of incoming webmentions to my wiki at present, but if they become more prevalent, I’ll want to automate the display of these notifications somehow. This will take some thought and coding as well as more knowledge of the internals of TiddlyWiki than I’ve currently got. If someone with the coding chops is interested, I could probably brainstorm a set up fairly quickly.
Microformats
It would also be nice to be able to have full microformats support in TiddlyWiki so that the stand alone “bookmark” mention works properly, but also so that the transcluded version might have the correct mark up. This may rely on the two things to be properly nested to make them work in both contexts.
Syndicated copies:
I have a great fondness for IndieWeb building blocks, and Webmention is a wonderful meta-building-block that connects so many individual websites together.
Obligatory “what is Webmention?”: it’s a specification that describes a way to “tell” a website that some document out on the web links to one of the pages on that site.
Sound simple? It is! Perhaps even suspiciously simple. Webmention enables whole new kinds of interactions between sites (there are some great examples in this A List Apart piece). Unfortunately, almost all of the coordination to support these interactions happens outside of the “Webmention” spec itself.
So when I see blog post titles like these I am not sure exactly what to expect:
Integrating Webmention with my blog
Pelican, Pingback and Webmentions
Webmention for TiddlyWiki to enable website to website notifications and communication
and this clickbait sensation: Add Webmention support to your website in ten minutes
There are many more like this! I just grabbed a handful off the last few pages of news.indieweb.org.
These examples and many more are referring to the most talked-about use of Webmention: enabling site-to-site comments and responses, like a souped-up independent alternative to terrible embeds like Disqus.
This may sound like a simple feature! We might expect it to look like this:
You see a post on the web that you like. Let’s call that “their post”.
On your own site, you make a post that links to theirs with some comment like “Nice post!”. We’ll call that “your post”.
Assuming that you both "have Webmention support", you might check their post a little later and see a nice summary of your post as a comment below their content.
However, for a webmention to “succeed”, a lot of coordination needs to happen.
On your side:
You publish "your post" which links to "their post". So far, so good. This is the web! You probably publish links on your site all the time.
When your post is live, you can try to send a webmention. How do you do that? It depends.
From here, it’s pretty much out of your hands. On their side:
Their post must advertise the URL of a service that will accept webmentions for that post.Their service must check that your post is a real post on the web, and that it contains a link to their post. Then it ... stores it somewhere? Maybe it goes into a moderation queue?
So then they have the webmention, but to actually display it, their site must:
Pull your post out of wherever their webmentions are stored.
Somehow understand what your post “is“.
Render that into their post. If they want to.
When I see folks posting “I added Webmentions to my site” I want to believe that they have some version of all of the bullet points above.
Unfortunately, there are lots of incompletes.
A list, without references, of partial Webmention support I have seen
The Junk Drawer
Folks in this category are collecting webmentions, probably by signing up for a receiving service like webmention.io. Their posts advertise webmention.io as the place to send mentions, webmention.io dutifully checks and stores them, and … that’s it.
This kind of “Webmention support” is often announced alongside a sentence like “Next up I’ll figure out how to display them!” For me, this conjures up images of the warehouse at the end of Raiders of the Lost Ark, or a house filled to the ceiling with stacks of moldy newspapers.
There are, I recognize, lots of good reasons not to display webmentions, beyond some of the technical speedbumps and pitfalls I talk about below. For example there are a lot of unanswered questions and not-yet-built tools and services for dealing with moderation and abuse.
“Why didn’t my reply show up on your site?”
Static sites are back and I love it. But if there’s one thing that static sites do extremely poorly it is responding dynamically to outside events. Some static sites (including my own!) will save webmentions as they come in, but won’t display them until the next time a post is added or modified on the site.
“Why does my reply look weird on your site?”
From services to command line tools to fancy build hooks on your fancy hosting service, there are many ways to automate sending webmentions. But unless the receiving end can understand the content of your post, it might not show up as you intended (or at all) on the receiving end. Current best practices would have you add some extra markup to your post so that the receiver can know that your post is a reply, or a like, or an RSVP, or something else. This is a hard coordination problem between your site and theirs! In fact, there is a whole community and standards process for figuring out how to do these things!
Making sure your posts have the “correct” markup to look like you want can be difficult even for developers writing their own HTML. Tools like indiewebify.me, Monocle’s preview, and microformats.io can help if you are getting your hands dirty. It’s much harder for folks that just redesigned their site with a new WordPress theme.
Bridgy Over Troubled Waters
Bridgy is an absolutely incredible suite of services provided by Ryan, also for free, for the community.
With the power of Bridgy Backfeed you can use Webmention to feed replies, likes, and reposts from your Twitter tweets to their corresponding post on your own site! This works despite the fact that twitter.com does not link to your website because Bridgy generates little “bridge” pages for which to send webmentions. And it’s just a little bit of tweaking to have your Webmention display code handle the quirks.
With the power of Bridgy Publish you can use Webmention to automatically copy posts from your website directly to social media silos like Twitter! You do this by hiding a link to Bridgy in your post, which sends a Webmention to Bridgy, and then Bridgy parses your post to understand it and figure out which bits to tweet. And then Bridgy responds with info about your new tweet. And it’s just a little bit of tweaking to have your Webmention sender handle those quirks and update your post with that link.
With the power of Bridgy Fed you can use Webmention to automatically copy posts from your website directly into The Fediverse where yadda yadda yadda. And it’s just a bit of tweaking to have your Webmention yadda yadda yadda yadda. 😩 I’ve tired myself out.
These are all fantastic things that are built on top of Webmention but that I often feel are conflated with Webmention.
“Just let JavaScript do it!”
This one is a bit… unfair on my part. In fact, I think this setup is the best you can get for the least effort, and I encourage folks to go for it. It looks like this:
Register with webmention.io to receive, verify, and store your webmentions.
Put webmention.js in the template for your posts.
I love webmention.io and use it myself. It is an amazing community resource run by Aaron at no charge! Kevin‘s mention.tech is another great tool, as is VoxPelli‘s webmention.herokuapp.com. By configuring one of them to accept webmentions on your behalf, you save yourself a lot of self-hosting trouble. Each of these services provides APIs that let you pull out the mentions for pages across your site.
Similarly, webmention.js is a really great tool developed by fluffy (at no charge!) that hides a lot of complexity and forethought about how to display webmentions with a single JavaScript include.
All that said, I have some issues with this particular combo long-term because all the fetching and display of webmentions happens in the browser of the person viewing your post.
If 1,000 people visit your post, that’s 1,000 requests to webmention.io, putting load on a service being run by one individual for free.
This setup also means that the webmentions for a post aren’t included in the original HTML. So, if your site sends a webmention and wants to check back automatically to see if it’s shown up, but their site only displays webmentions via JavaScript, then your site will never see it. Likewise, it becomes much harder to keep track of reply chains, for example.
Why are you being such a downer about this?
Despite, apparently, being a bit salty today, I really do get excited about Webmention, how it’s being used in so many ways to connect independent sites, and new ways it can be used in the future.
I’m worried, a bit, that “Webmention” is starting to lose its meaning in conversation. It’s starting to feel like a shorthand that hides important details.
Maybe Webmention can be thought of as less of a “building block” and more like a glue. You can do so many things with glue, like combining a bunch of planks into a table, or building a parade float sculpture with papier-mâché, or doctoring the photo in a passport!
You wouldn’t call them all “glue”.