Threaded Replies and Comments with Webmentions in WordPress

Introduction to what one would consider basic web communication

A few days ago I had written a post on my website and a colleague had written a reply on his own website. Because we were both using the W3C Webmention specification on our websites, my site received the notification of his response and displayed it in the comments section of my website. (This in and of itself is really magic enough–cross website @mentions!)

To reply back to him I previously would have written a separate second post on my site in turn to reply to his, thereby fragmenting the conversation across multiple posts and making it harder to follow the conversation. (This is somewhat similar to what Medium.com does with their commenting system as each reply/comment is its own standalone page.)

Instead, I’ve now been able to configure my website to allow me to write a reply directly to a response within my comments section admin UI (or even in the comments section of the original page itself), publish it, and have the comment be sent to his reply and display it there. Two copies for the price of one!

From the comments list in my Admin UI, I can write a reply and it not only lives on my site but it can now be sent as a comment to the site that made the original comment! As an example, here’s my first one and the resultant copy on the site I was replying to.

This means that now, WordPress-based websites (at least self-hosted versions running the WordPress.org code) can easily and simply allow multiple parties to write posts on their own sites and participate in multi-sided conversations back and forth while all parties maintain copies of all sides of the conversation on their own websites in a way that maintains all of the context. As a result, if one site should be shut down or disappear, the remaining websites will still have a fully archived copy of the entire conversation thread. (Let’s hear it for the resilience of the web!)

What is happening?

This functionality is seemingly so simple that one is left wondering:

  • “Why wasn’t this baked into WordPress (and the rest of the web) from the start?”
  • “Why wasn’t this built after the rise of Twitter, Facebook, or other websites which do this as a basic function?”
  • “How can I get it tout suite?!” (aka gimme, gimme, gimme, and right now!!!)

While seeming simple, the technical hurdles aren’t necessarily because there had previously never been a universal protocol for the web to allow it. (The Webmentions spec now makes it possible.) Sites like Facebook, Twitter, and others enable it because they’ve got a highly closed and highly customized environment that makes it a simpler problem to solve. In fact, even old-school web-based bulletin boards allowed this!

But even within social media one will immediately notice that you can’t use your Facebook account to reply to a Twitter account. And why not?! (While the web would be far better if one website or page could talk to another, these sites don’t for the simple economic reason that they want you using only their site and not others, and not enabling this functionality keeps you locked into what they’re selling.)

I’ll detail the basic set up below, but thought that it would be highly illustrative to have a diagram of what’s physically happening in case the description above seems a bit confusing to picture properly. I’ll depict two websites, each in their own column and color-coded so that content from site A is one color while content from site B is another color.

A diagram of where comments live when sent via webmention.
Each site composes and owns its own content and sends the replies to the other site.

It really seems nearly incomprehensible to me how this hasn’t been built into the core functionality of the web from the beginning of at least the blogosphere. Yet here we are, and somehow I’m demonstrating how to do this from one WordPress site to another via the open web in 2017. To me this is the entire difference between a true Internet and just using someone else’s intranet.

Implementation

Prerequisites

While this general functionality is doable on any website, I’ll stick to enabling it specifically on WordPress, a content management system that is powering roughly 30% of all websites on the internet. You’ll naturally need your own self-hosted WordPress-based website with a few custom plugins and a modern semantic-based theme. (Those interested in setting it up on other platforms are more than welcome to explore the resources of the IndieWeb wiki and their chat which has a wealth of resources.)

Plugins

As a minimum set you’ll want to have the following list of plugins enabled and configured:

Other instructions and help for setting these up and configuring them can be found on the IndieWeb wiki, though not all of the steps there are necessarily required for this functionality.

Themes

Ideally this all should function regardless of the theme you have chosen, but WordPress only provides the most basic support for microformats version 1 and doesn’t support the more modern version 2 out of the box. As a result, the display of comments from site to site may be a bit wonky depending on how supportive your particular theme is of the microformats standards. As you can see I’m using a relatively standard version of the TwentySixteen theme without a lot of customization and getting some reasonable results. If you have a choice, I’d recommend one of the following specific themes which have solid semantic markup:

Plugin

The final plugin that enables sending comments from one comment section to another is the WordPress Webmention for Comments plugin. As it is still somewhat experimental and is not available in the WordPress repository, you’ll need to download it from GitHub and activate it. That’s it! There aren’t any settings or anything else to configure.

Use

With the plugin installed, you should now be able to send comments and replies to replies directly within your comments admin UI (or directly within your comments section in individual pages, though this can not require additional clicks to get there, but you also don’t have the benefit of the admin editor either).

There is one current caveat however. For the plugin to actually send the webmention properly, it will need to have a URL in your reply that includes the microformats u-in-reply-to class. Currently you’ll need to do this manually until the plugin can properly parse and target the fragmentions for the comments properly. I hope the functionality can be added to the plugin to make the experience seamless in the future.

So what does this u-in-reply-to part actually look like? Here’s an example of the one I used to send my reply:

<a class="u-in-reply-to" href="https://islandinthenet.com/manually-adding-microfomats-markup/">Khürt</a>

The class tells the receiving site that the webmention is a reply and to display it as such and the URL is necessary for your webmention plugin to know where to send the notification. You’d simply need to change the URL and the word (or words) that appear between the anchor tags.

If you want to have a hidden link and still send a webmention you could potentially add your link to a zero width space as well. This would look like the following:

<a class="u-in-reply-to" href="http://www.example.com">&​#8203;​</a>

Based on my experiments, using a <link> via HTML will work, but it will send it as a plain webmention to the site and it won’t show up natively as a reply.

Sadly, a plain text reply doesn’t work (yet), but hopefully some simple changes could be made to force it to using the common fragmentions pattern that WordPress uses for replies.

Interestingly this capability has been around for a while, it just hasn’t been well documented or described. I hope now that those with WordPress sites that already support Webmentions will have a better idea what this plugin is doing and how works.

Future

Eventually one might expect that all the bugs in the system get worked out and the sub-plugin for sending comment Webmentions will be rolled up into the main Webmentions plugin, which incidentally handles fragmentions already.

Caveats

In addition to the notes above, I will say that this is still technically experimental code not running on many websites, so its functionality may not be exact or perfect in actual use, though in experimenting with it I have found it to be very stable. I would recommend checking that the replies actually post to the receiving site, which incidentally must be able to accept webmentions. If the receiving website doesn’t have webmention support, one will need to manually cut and paste the content there (and likely check the receive notification of replies via email, so you can stay apprised of future replies).

You can check the receiving site’s webmention support in most browsers by right clicking and viewing the pages source. Within the source one should see code in the <head> section of the page which indicates there is a webmention endpoint. Here is an example of the code typically injected into WordPress websites that you’d be looking for:

<link rel="webmention" href="http://example.com/wp-json/webmention/1.0/endpoint" />
<link rel="http://webmention.org/" href="http://example.com/wp-json/webmention/1.0/endpoint" />

Also keep in mind that some users moderate their comments, so that even though your mention was sent, they may need to approve it prior to it displaying on the page.

If you do notice problems or issues or have quirks, please file the issue with as full a description of what you did and what resulted as you can so that it can be troubleshot and made to work not only for you, but hopefully work better for everyone else.

Give it a try

So you’ve implemented everything above? Go ahead and write a reply on your own WordPress website and send me a webmention! I’ll do my best to reply directly to you so you can send another reply to make sure you’ve got things working properly.

Once you’re set, go forward and continue helping to make the web a better place.

Special Thanks

I wanted to take a moment to give special thanks to Aaron Parecki, Matthias Pfefferle, and David Shanske who have done most of the Herculean work to get this and related functionality working. And thanks also to all who make up the IndieWeb community that are pushing the boundaries of what the web is and what it can accomplish. And finally, thanks to Khürt Williams who became the unwitting guinea pig for my first attempt at this. Thank you all!

​​​​​​

Syndicated copies to:

👓 We messed up. We’re sorry, and we’re not rolling out the fees change. | The Patreon Blog

We messed up. We’re sorry, and we’re not rolling out the fees change. (Patreon)
We’ve heard you loud and clear. We’re not going to rollout the changes to our payments system that we announced last week. We still have to fix the problems that those changes addressed, but we’re going to fix them in a different way, and we’re going to work with you to come up with the specifics, as we should have done the first time around. Many of you lost patrons, and you lost income. No apology will make up for that, but nevertheless, I’m sorry.

It is our core belief that you should own the relationships with your fans. These are your businesses, and they are your fans.

I almost want to continue reading this as: “Yet, you’re all still stuck on our silo and we intend to keep taking a percentage for keeping you in business…”

If they were really all-in on helping the way they’re signaling here, they would be building it in a decentralized way that allows creators to take their patrons with them to another platform. They would also be expanding on features, which they don’t seem to be doing much of. I get the need to watch the bottom line and work on scaling, but they should also continue innovating and experimenting, particularly for the smaller fish who could become bigger fish.

Syndicated copies to:

Reply to Owning my Reading and 100 Days of Reading Chapters by Eddie Hinkle

Owning my Reading and 100 Days of Reading Chapters by Eddie Hinkle (eddiehinkle.com)
One of my goals in 2018 is to own my reading data rather than using Goodreads for all of that information. This will allow me to track information the way I want rather than have to do it like Goodreads wants me to.

Welcome to the club. It seems like there’s a growing interest in owning read posts lately. Doing a 100 day experiment seems like a brilliant way to self-dogfood it while simultaneously getting more material read. I may have to steal the idea!

❤️ IndieWebCamp Austin wrap-up by Manton Reece

IndieWebCamp Austin wrap-up by Manton Reece (manton.org)
Over the weekend we hosted the first IndieWebCamp in Austin. I’m really happy with the way the event came together. I learned a lot in helping plan it, made a few mistakes that we can improve next time, but overall came away as inspired as ever to keep improving Micro.blog so that it’s a standout platform of the IndieWeb movement. There’s nothing like meeting in person with other members of the community. I know this from attending Apple developer conferences, but the weekend in Austin only underscored that I should be more active in the larger web community as well.

IndieWeb and Webmentions plugin for WordPress FTW!

I don’t think I’d used it before or really seen it happening in the wild, but Khurt Williams used his website to reply to one of my posts via Webmention. I was then able to write my reply directly within the comments section of my original post and automatically Webmention his original back in return! Gone are the days of manually cutting and pasting replies so that they appear to thread correctly within WordPress!

Without all the jargon, we’re actually using our own websites to carry on a back and forth threaded conversation in a way that completely makes sense.

In fact, other than that our conversation is way over the 280 character limit imposed by Twitter, the interaction was as easy and simple from a UI perspective as it it is on Twitter or even Facebook. Hallelujah!

This is how the internet was meant to work!

A hearty thanks to those who’ve made this possible! It portends a sea-change in how social media works.

Three cheers for the #IndieWeb!!!

Syndicated copies to:

Reply to Creating an Archive of a Set of Tweets by Aaron Davis

Creating an Archive of a Set of Tweets by Aaron DavisAaron Davis (collect.readwriterespond.com)
I really like Barnes’ intent to share. I just wonder if there is a means of owning these notes. Ideally, taking a POSSE approach, she might live blog and post this to Twitter. I vaguely remember Chris Aldrich sharing something about this recently, but the reference escapes me. This is also limited with her blog being located at WP.com. I therefore wondered about the option of pasting the content of the tweets into a blog as an archive.

Aaron, the process I use for taking longer streams of Tweets to own them (via PESOS) has Kevin Marks‘ excellent tool Noter Live at its core. Noter Live allows you to log in via Twitter and tweet(storm) from it directly. As its original intent was for live-tweeting at conferences and events, it has some useful built in tools for storing the names of multiple speakers (in advance, or even quickly on the fly) as well as auto-hashtagging your conversation. (I love it so much I took the time to write and contribute a user-manual.)

The best part is that it not only organically threads your tweets together into one continuing conversation, but it also gives you a modified output including the appropriate HTML and microformats classes so that you can cut and paste the entire thread and simply dump it into your favorite CMS and publish it as a standard blog post. (It also strips out the hashtags and repeated speaker references in a nice way.) With a small modification, you can also get your site to add hovercards to your post as well. I’ll also note in passing that it’s also been recently updated to support the longer 280 characters too.

The canonical version I use as an example of what this all looks like is this post: Notes from Day 1 of Dodging the Memory Hole: Saving Online News | Thursday, October 13, 2016.

Another shorter tweetstorm which also has u-syndication links for all of the individual tweets can be found at Indieweb and Education Tweetstorm. This one has the benefit of pulling in all the resultant conversations around my tweetstorm with backfeed from Brid.gy, though they’re not necessarily threaded properly in the comments the way I would ultimately like. As you mention in the last paragraph that having the links to the syndicated copies would be useful, I’ll note that I’ve already submitted it as an issue to Noter Live’s GitHub repo. In some sense, the entire Twitter thread is connected, so having the original tweet URL gives you most of the context, though it isn’t enough for all of the back feed by common methods (Webmentions+Brid.gy) presently.

I’ll also note that I’ve recently heard from a reputable source about a WordPress specific tool called Publishiza that may be useful in this way, but I’ve not had the chance to play with it yet myself.

 

Clearly, you can embed Tweets, often by adding the URL. However, there are more and more people deleting their Tweets and if you embed something that is deleted, this content is then lost. (Not sure where this leaves Storify etc.)

It’s interesting that you ask where this leaves Storify, because literally as I was reading your piece, I got a pop-up notification announcing that Storify was going to be shut down altogether!! (It sounds to me like you may have been unaware when you wrote your note. So Storify and those using it are in more dire circumstances than you had imagined.)

It’s yet another reason in a very long list why one needs to have and own their own digital presence.

As for people deleting their tweets, I’ll note that by doing a full embed (instead of just using a URL) from Twitter to WordPress (or using Noter Live), that the original text is preserved so that even if the original is deleted, a full archival copy of the original still exists.

Also somewhat related in flavor for the mechanism you’re discussing, I also often use Hypothesis to comment on, highlight, and annotate on web pages for academic/research uses. To save these annotations, I’ll add hashtags to the annotations within Hypothesis and then use Kris Shaffer’s excellent Hypothesis Aggregator plugin to parse the data and pull it in the specific parts I want. Though here again, either Hypothesis as a service or the plugin itself may ultimately fail, so I will copy/paste the raw HTML from its output to post onto my site for future safekeeping. In some sense I’m using the plugin as a simple tool to make the transcription and data transport much easier/quicker.

I hope these tips make it easier for you and others to better collect your content and display it for later consumption and archival use.

Syndicated copies to:

An update to read posts for physical books

Inspired by gRegor Morrill’s IndieWebCamp Austin project, I went back and took a look at some of my read posts, and particularly for books.

For online material, I use the Post Kinds Plugin which does a good job of adding h-cite and p-read-of (experimental) microformats classes to the data for the things I’ve read.

Because Post Kinds doesn’t (yet?) support percentage finished or number of pages read, I generally do read posts for books by hand as notes with the relevant data. So I decided to add some better mark up to my book-specific read posts and added microformats classes of h-cite, u-url, u-read-of, p-name, p-author, h-card and dt-published. I’m far from an expert on microformats, but hopefully the way I’m nesting them makes sense to parsers off in the future. (Suggestions for improvement are more than welcome.)

I like Gregor’s idea of p-read-status for things he’s posting and will have to see how I can pull that off for posts in the future (or suggest it as an addition to Post Kinds). Presently I’m just adding a want to read tag, but that could be improved to better match the functionality I appreciate in silos like Goodreads. I’ll also have to load up Gregor’s recent modifications to Quill and test them out on my site as well. I know David Shanske has expressed interest in better aligning Quill and micropub clients to post to WordPress with Post Kinds in mind.

Here’s an example of the mark up of a recent read post:

Read pages 381-461 to finish reading <span class="h-cite"><cite><a class="u-url u-read-of p-name" href="http://amzn.to/2zXnQDC" target="_blank" rel="noopener">Origin: A Novel</a></cite> by <span class="p-author h-card"><a class="p-name u-url" href="http://danbrown.com/">Dan Brown</a></span><time class="dt-published" datetime="2017-10-103 00:00:00"></time></span>

It’s also made me begin to feel itchy about some of my past quote posts and potentially revisiting them to add the appropriate h-cite and related mark up to them as well. (Or at least fix it moving forward.)

Incidentally, my real camp project was some heavy editing work on “The Book.” More on that later…

Syndicated copies to: