Bookmarked Getting Started With Webmention and NextJS by Monica PowellMonica Powell (aboutmonica.com)
This past week I had the pleasure of being on the Learn with Jason Show to show how to add Webmention functionality to a NextJS website. Webmentions let you pull tweets, other blogs, and other activity from around the web into your site? It was fun live pair programming the implementation of webmentions. Check out the video or read some of the highlights below!
Thanks for writing this up and bundling it with the video Monica! I can’t wait to see how you puzzle out sending Webmentions automatically as well.

Monica notes that they had issues with an .app TLD, which sounds a bit like Max’s previous issue with the .dev TLD. Any chance this is the case Ryan?

Webmention for TiddlyWiki to enable website to website notifications and communication

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:

  1. Log into Webmention.io to create an account
  2. 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:

Screenshot of my GitHub accounts details featuring a link to my website

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?

Replied to a tweet by Matthias Ott Matthias Ott (Twitter)
Oh, we’re reading you Tania Rascia (@taniarascia)! Even easier for you it looks like Chris Biscardi (@chrisbiscardi) has already built out some infrastructure for webmentions on Gatsby(@gatsbyjs).
https://indieweb.org/gatsby#Plugins

Chris has written a bit about his process as well: Building Gatsby Plugin Webmentions.

 

 

Replied to a tweet by Tom CritchlowTom Critchlow (Twitter)
“@jgmac1106 Thanks - been trying to get my head around webmentions for a while and still haven't figured it out....”
Tom, for the basics of what Webmention is you might try this intro article Webmentions: Enabling Better Communication on the Internet.

To get started quickly, just to have the notifications, you might try creating an account with Webmentions.io and put the endpoint into the <head> of your site so you can receive them in the erstwhile on a separate service and worry about direct integration at a later date. As I recall Aaron Gustafson has a Webmention.io Jekyll Plugin for display and some of the outline is covered in this recent article by Max Böck.

If necessary, you can get help in the #Dev channel of the IndieWeb chat.

👓 What is Discourse? | Discourse

Read What is Discourse? (Discourse - Civilized Discussion)
Discourse is the 100% open source discussion platform built for the next decade of the Internet.
As I look at this it makes me wonder when small, single-purpose services might allow themselves to be white listed and/or custom styled to live on a users personal domain, yet still look like they’re part and parcel of that user’s native site.

As an example, Disqus and Webmention.io are interesting examples of how a company could specialize into handling comments for user’s sites. These two are both doing things very differently and at much different price points. Disqus is large and bloated and seems to have quite innovating and iterating. I have to wonder what it would look like with more players and more competition in the space?

In fact, I’m still wondering why hasn’t Disqus picked up and run away with the Webmention spec?

👓 Blocking Domains in webmention.io | Aaron Parecki

Read Blocking Domains in webmention.io by Aaron PareckiAaron Parecki (Aaron Parecki)
For the past week or so, I've been getting a series of Pingbacks from a spam blog that reposts a blog post a couple times a day as a new post each time. It's up to about 220 copies of the post, each one having sent me a Pingback, and each one showing up in my reader as a notification, which also cau...

👓 Displaying Webmentions with Posts | Amit Gawande

Bookmarked Displaying Webmentions with Posts by Amit GawandeAmit Gawande (amitgawande.com)
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 ...
A nice little tutorial for using Webmention.io with content management systems like Blot.​​​​​​​​​​