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.
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.
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.
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.
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.
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.)
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" />
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.)
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
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?
Hello everyone! My name is Chris Aldrich. I’m an independent researcher in a variety of areas including the overlap the internet and education. You can find more about me on my website https://boffosocko.com
Today I’ll be talking about Webmentions for open pedagogy.
For a variety of reasons (including lack of budget, time, support, and other resources) many educators have been using corporate tools from Google, Twitter, Facebook, and others for their ease-of-use as well as for a range of functionality that hadn’t previously existed in the blogosphere or open source software that many educators use or prefer.
This leaves us and our students open to the vagaries and abuses that those platforms continually allow including an unhealthy dose of surveillance capitalism.
In the intervening years since the blogosphere and the rise of corporate social media, enthusiasts, technologists and open source advocates have continued iterating on web standards and open protocols, so that now there are a handful of web standards that work across a variety of domains, servers, platforms, allowing educators to use smaller building blocks to build and enable the functionalities we need for building, maintaining, and most importantly owning our online courseware.
Some of these new W3C specs include Webmention, Micropub, WebSub, IndieAuth, and Microsub. Today I’ll talk abut Webmentions which are simply site-to-site @mentions or notifications which don’t involve corporate social media silos.
For those who’d like more information about Webmentions and how they could be used, I’ve written a primer for A List Apart entitled Webmentions: Enabling Better Communication on the Internet.
Many common content management systems support Webmention either out of the box or with plugins including: our friend WordPress, Drupal, WithKnown, Grav, and many others.
WordPress can use this new standard with the Webmention plugin. (Surprise!) I also highly recommend the Semantic Linkbacks plugin which upgrades the presentation of these notifications (like Trackback, Pingback, or Webmention) to more user-friendly display so they appear in comments sections much like they do in corporate social media as comments, reposts, likes, and favorites, detected using microformats2 markup from the source of the linkback.
Another plugin I love is Post Kinds Plugin (Classic editor only at present) which automatically parses URLs I want to reply to, like, bookmark, etc. and saves the reply context to my website which helps prevent context collapse. My commentary and notes then appear below it.
(I also use a plugin that saves the content of URLs on my site to the Internet Archive, so I can reference them there later if necessary.)
These plugins with WordPress allow teachers to post course content and students can then post their responses on their own sites and send notifications that they’ve read, listened to, or watched that content along with their ideas and commentary.
Examples of webmentions in a course setting: Greg McVerry and I ran an experiment with Webmentions in a class in 2018.
Example assignment: https://archive.jgregorymcverry.com/5570-2/
Notice the replies underneath which came from other sites including my response which is mirrored on my site at https://boffosocko.com/2018/08/04/highlighting-some-of-my-favorite-edtech-tools/
Example podcast post for a class: https://archive.jgregorymcverry.com/2toponder-episode-one/
Notice the listen webmention in the comments which links to my listen response at: https://boffosocko.com/2018/08/06/2toponder-episode-one-intertextrevolution/ where I own a copy of the context and my own response. As a student, even if the originals disappear, I’ve got the majority of the important content from the course.
When the course is over, the student has an archive of their readings, work, and participation (portfolio anyone?) on a site they own. They can choose to leave it public or unpublish it and keep private copies.
[Copies for Facebook, Google+ or Big EdTech Giants? They can ask for them nicely if they want them so desperately instead of taking them surreptitiously.]
By taking the content AND the conversation around it out of the hands of “big social media” and their constant tracking and leaving it with the active participants, we can effect far more ethical EdTech.
[No more content farming? What will the corporate social media silos do?]
Imagine Webmentions being used for referencing journal articles, academic samizdat, or even OER? Suggestions and improvement could accumulate on the original content itself rather than being spread across dozens of social silos on the web.
[Webmentions + creativity: How might you take their flexibility and use it in your online teaching practices?]
There’s current research, coding work, and thinking going on within the IndieWeb community to extend ideas like private webmentions and limiting audience so that this sort of interaction can happen in more secluded online spaces.
I’ve also been able to use my WordPress website to collect posts relating to my participation in conferences like PressEdConf20 or Domains 2019 which included syndicated content to Twitter and the responses from there that have come back to my site using Brid.gy which bootstraps Twitter’s API to send Webmentions back to my website.
If Twitter were to go away, they may take some of my connections, but the content and the conversations will live on in a place under my own control.
Thanks for your time and attention! I’m around on Twitter–or better: my own website!–if you have any questions.