Egg. On. Face. I just got done with no fewer than 3 articles and 3 YouTube videos bragging about how great my design work has been lately to get a 500% improvement on our conversion rate. And now, I’ve lost a huge chunk of that improvement with some recent changes. Let’s talk about Google AMP. ...
It’s not possible to run fully static sites with dynamic features, such as webmention handling - you can get close to it, but you do need to embrace external services.
Editor’s note: This is a copy of an article that was originally published on A List Apart.
Over 1 million Webmentions will have been sent across the internet since the specification was made a full Recommendation by the W3C—the standards body that guides the direction of the web—in early January 2017. That number is rising rapidly, and in the last few weeks I’ve seen a growing volume of chatter on social media and the blogosphere about these new “mentions” and the people implementing them.
So what are Webmentions and why should we care?
While the technical specification published by the W3C may seem incomprehensible to most, it’s actually a straightforward and extremely useful concept with a relatively simple implementation. Webmentions help to break down some of the artificial walls being built within the internet and so help create a more open and decentralized web. There is also an expanding list of major web platforms already supporting Webmentions either natively or with easy-to-use plugins (more on this later).
Put simply, Webmention is a (now) standardized protocol that enables one website address (URL) to notify another website address that the former contains a reference to the latter. It also allows the latter to verify the authenticity of the reference and include its own corresponding reference in a reciprocal way. In order to understand what a big step forward this is, a little history is needed.
The rise of @mentions
By now most people are familiar with the ubiquitous use of the “@” symbol in front of a username, which originated on Twitter and became known as @mentions and @replies (read “at mentions” and “at replies”). For the vast majority, this is the way that one user communicates with other users on the platform, and over the past decade these @mentions, with their corresponding notification to the receiver, have become a relatively standard way of communicating on the internet.
I been smashed the idea of that album even existing. I got joints to roll @kanyewest
Many other services also use this type of internal notification to indicate to other users that they have been referenced directly or tagged in a post or photograph. Facebook allows it, so does Instagram. Google+ has a variant that uses + instead of @, and even the long-form article platform Medium, whose founder Ev Williams also co-founded Twitter, quickly joined the @mentions party.
The biggest communications problem on the internet
If you use Twitter, your friend Alice only uses Facebook, your friend Bob only uses his blog on WordPress, and your pal Chuck is over on Medium, it’s impossible for any one of you to @mention another. You’re all on different and competing platforms, none of which interoperate to send these mentions or notifications of them. The only way to communicate in this way is if you all join the same social media platforms, resulting in the average person being signed up to multiple services just to stay in touch with all their friends and acquaintances.
Given the issues of privacy and identity protection, different use cases, the burden of additional usernames and passwords, and the time involved, many people don’t want to do this. Possibly worst of all, your personal identity on the internet can end up fragmented like a Horcrux across multiple websites over which you have little, if any, control.
Imagine if AT&T customers could only speak to other AT&T customers and needed a separate phone, account, and phone number to speak to friends and family on Verizon. And still another to talk to friends on Sprint or T-Mobile. The massive benefit of the telephone system is that if you have a telephone and service (from any one of hundreds or even thousands of providers worldwide), you can potentially reach anyone else using the network. Surely, with a basic architecture based on simple standards, links, and interconnections, the same should apply to the internet?
The solution? Enter Webmentions!
As mentioned earlier, Webmentions allow notifications between web addresses. If both sites are set up to send and receive them, the system works like this:
Alice has a website where she writes an article about her rocket engine hobby.
Bob has his own website where he writes a reply to Alice’s article. Within his reply, Bob includes the permalink URL of Alice’s article.
When Bob publishes his reply, his publishing software automatically notifies Alice’s server that her post has been linked to by the URL of Bob’s reply.
Alice’s publishing software verifies that Bob’s post actually contains a link to her post and then (optionally) includes information about Bob’s post on her site; for example, displaying it as a comment.
A Webmention is simply an @mention that works from one website to another!
If she chooses, Alice can include the full text of Bob’s reply—along with his name, photo, and his article’s URL (presuming he’s made these available)—as a comment on her original post. Any new readers of Alice’s article can then see Bob’s reply underneath it. Each can carry on a full conversation from their own websites and in both cases display (if they wish) the full context and content.
Using Webmentions, both sides can carry on a conversation where each is able to own a copy of the content and provide richer context.
User behaviors with Webmentions are a little different than they are with @mentions on Twitter and the like in that they work between websites in addition to within a particular website. They enable authors (of both the original content and the responses) to own the content, allowing them to keep a record on the web page where it originated, whether that’s a website they own or the third-party platform from which they chose to send it.
Interaction examples with Webmention
Webmentions certainly aren’t limited to creating or displaying “traditional” comments or replies. With the use of simple semantic microformats classes and a variety of parsers written in numerous languages, one can explicitly post bookmarks, likes, favorites, RSVPs, check-ins, listens, follows, reads, reviews, issues, edits, and even purchases. The result? Richer connections and interactions with other content on the web and a genuine two-way conversation instead of a mass of unidirectional links. We’ll take a look at some examples, but you can find more on the IndieWeb wiki page for Webmention alongside some other useful resources.
Marginalia
With Webmention support, one could architect a site to allow inline marginalia and highlighting similar to Medium.com’s relatively well-known functionality. With the clever use of URL fragments, which are well supported in major browsers, there are already examples of people who use Webmentions to display word-, sentence-, or paragraph-level marginalia on their sites. After all, aren’t inline annotations just a more targeted version of comments?
An inline annotation on the text “Hey Ev, what about mentions?” in which Medium began to roll out their @mention functionality.
Reads
As another example, and something that could profoundly impact the online news business, I might post a link on my website indicating I’ve read a particular article on, say, The New York Times. My site sends a “read” Webmention to the article, where a facepile or counter showing the number of read Webmentions received could be implemented. Because of the simplified two-way link between the two web pages, there is now auditable proof of interaction with the content. This could similarly work with microinteractions such as likes, favorites, bookmarks, and reposts, resulting in a clearer representation of the particular types of interaction a piece of content has received. Compared to an array of nebulous social media mini-badges that provide only basic counters, this is a potentially more valuable indicator of a post’s popularity, reach, and ultimate impact.
Listens
Building on the idea of using reads, one could extend Webmentions to the podcasting or online music sectors. Many platforms are reasonably good at providing download numbers for podcasts, but it is far more difficult to track the number of actual listens. This can have a profound effect on the advertising market that supports many podcasts. People can post about what they’re actively listening to (either on their personal websites or via podcast apps that could report the percentage of the episode listened to) and send “listen” Webmentions to pages for podcasts or other audio content. These could then be aggregated for demographics on the back end or even shown on the particular episode’s page as social proof of the podcast’s popularity.
For additional fun, podcasters or musicians might use Webmentions in conjunction with media fragments and audio or video content to add timecode-specific, inline comments to audio/video players to create an open standards version of SoundCloud-like annotations and commenting.
SoundCloud allows users to insert inline comments that dovetail with specific portions of audio.
Reviews
Websites selling products or services could also accept review-based Webmentions that include star-based ratings scales as well as written comments with photos, audio, or even video. Because Webmentions are a two-way protocol, the reverse link to the original provides an auditable path to the reviewer and the opportunity to assess how trustworthy their review may be. Of course, third-party trusted sites might also accept these reviews, so that the receiving sites can’t easily cherry-pick only positive reviews for display. And because the Webmention specification includes the functionality for editing or deletion, the original author has the option to update or remove their reviews at any time.
Getting started with Webmentions
Extant platforms with support
While the specification has only recently become a broad recommendation for use on the internet, there are already an actively growing number of content management systems (CMSs) and platforms that support Webmentions, either natively or with plugins. The simplest option, requiring almost no work, is a relatively new and excellent social media service called Micro.blog, which handles Webmentions out of the box. CMSs like Known and Perch also have Webmention functionality built in. Download and set up the open source software and you’re ready to go.
If you’re working with WordPress, there’s a simple Webmention plugin that will allow you to begin using Webmentions—just download and activate it. (For additional functionality when displaying Webmentions, there’s also the recommended Semantic Linkbacks plugin.) Other CMSs like Drupal, ProcessWire, Elgg, Nucleus CMS, Craft, Django, and Kirby also have plugins that support the standard. A wide variety of static site generators, like Hugo and Jekyll, have solutions for Webmention technology as well. More are certainly coming.
A weak form of Webmention support can be bootstrapped for Tumblr, WordPress.com, Blogger, and Medium with help from the free Bridgy service, but the user interface and display would obviously be better if they were supported fully and natively.
As a last resort, if you’re using Tumblr, WordPress.com, Wix, Squarespace, Ghost, Joomla, Magento, or any of the other systems without Webmention, file tickets asking them to support the standard. It only takes a few days of work for a reasonably experienced developer to build support, and it substantially improves the value of the platform for its users. It also makes them first-class decentralized internet citizens.
Webmentions for developers
If you’re a developer or a company able to hire a developer, it is relatively straightforward to build Webmentions into your CMS or project, even potentially open-sourcing the solution as a plugin for others. For anyone familiar with the old specifications for pingback or trackback, you can think of Webmentions as a major iteration of those systems, but with easier implementation and testing, improved performance and display capabilities, and decreased spam vulnerabilities. Because the specification supports editing and deleting Webmentions, it provides individuals with more direct control of their data, which is important in light of new laws like GDPR.
In addition to reading the specification, as mentioned previously, there are multiple open source implementations already written in a variety of languages that you can use directly, or as examples. There are also a test suite and pre-built services like Webmention.io, Telegraph, mention-tech, and webmention.herokuapp.com that can be quickly leveraged.
Maybe your company allows employees to spend 20% of their time on non-specific projects, as Google does. If so, I’d encourage you to take the opportunity to fbuild Webmentions support for one or more platforms—let’s spread the love and democratize communication on the web as fast as we can!
And if you already have a major social platform but don’t want to completely open up to sending and receiving Webmentions, consider using Webmention functionality as a simple post API. I could easily see services like Twitter, Mastodon, or Google+ supporting the receiving of Webmentions, combined with a simple parsing mechanism to allow Webmention senders to publish syndicated content on their platform. There are already several services like IndieNews, with Hacker News-like functionality, that allow posting to them via Webmention.
If you have problems or questions, I’d recommend joining the IndieWeb chat room online via IRC, web interface, Slack, or Matrix to gain access to further hints, pointers, and resources for implementing a particular Webmention solution.
The expansion of Webmentions
The big question many will now have is Will the traditional social media walled gardens like Facebook, Twitter, Instagram, and the like support the Webmention specification?
At present, they don’t, and many may never do so. After all, locking you into their services is enabling them to leverage your content and your interactions to generate income. However, I suspect that if one of the major social platforms enabled sending/receiving Webmentions, it would dramatically disrupt the entire social space.
In the meantime, if your site already has Webmentions enabled, then congratulations on joining the next revolution in web communication! Just make sure you advertise the fact by using a button or badge. You can download a copy here.
About the Author
Chris Aldrich is developer and researcher who lives in Los Angeles. When not working on the abstract mathematics of digital communication, he tinkers on the web. An active member of the IndieWeb community, he enjoys replacing his dependency on social silos with his website which doubles as his commonplace book.
After putting up their front gate, the mad scientists at Extend Labs anticipated future separate parts of their site for: A blog to reflect on their Domain Camp work (you will want that too). A place to perhaps install or build a photo gallery of their experiments (perhaps just uploaded via the File Manager?). Read more
If you've ever developed software you've surely had users ask you to add an option. "Rather than forcing everyone into behavior A," they'll reason, "why not add an option so users can choose between behaviors A and B?"
This post is an attempt at producing a canonical consolidated answer to why the answer to this is often "no".
Itty bitty sites are contained entirely within their own link. (Including this one!) This means they’re… 💼 Portable – you don’t need a server to host them 👁 Private – nothing is sent to–or stored on–this server 🎁 Easy to share as a link or QR code
Itty bitty sites can hold about as much as a printed page, and there is a lot you can do with that: ✒️ Compose poetry 🛠 Create an app 🐦 Bypass a 140 280 char limit 🎨 Express yourself in ascii
What is it about Sass that turns me into a fanatic? How is Sass like your favorite TV show? And why am I often alone at parties?
hat tip
Ever since I read “The Sass Jerk”, I think of it every time I feel myself getting a bit too evangelical about some tech. I think to myself, “OK, better tone it down or I’ll be the https://t.co/GotRar26hi jerk.” https://t.co/WwfEnShqKb
I discovered the IndieWeb about six weeks ago and wrote then about why I think it’s an important movement and community. Since that time, I’ve made a concerted effort to update my web site so that it looks like I want it to look. Although I’m not yet done, I’ve made good progress. I recently...
I love how you’re trying to take control of all of the parts of your website. In particular, I think it’s a great idea to improve the usability of particular pages (both for yourself as well as for others) based on how you’re using the pages. I think more people should be considering this as an option.
Certainly having multiple WordPress installs can be a headache, though it will obviously work. I know some IndieWeb tech related to syndicating to various silos and using services like Brid.gy for backfeed will be hard to do when using more than two domains and targeting a single silo presence, so it’s not only a maintenance tax, but you might not have the flexibility you’d like if you syndicate content in multiple locations.
Another option is to use the same WordPress install to run multiple websites, which is also a possibility. Or you could also run a multi-site installation and go that route. This at least would cut down on needing to maintain and update multiple sites one at a time.
Possibly the best option, however, is to know that you can custom theme any and every page generated within your website. This isn’t done quite as often as it may take a bit more upfront development work and knowledge of how WordPress works internally as well as how to tweak your theme. The easiest thing to do is to create custom templates for each of the particular pages you want to change. When WordPress tries to build a page it relies on a nested hierarchy of templates potentially available within your theme. It starts at the top and stops when it finds one available and then uses that template. By targeting the particular page you’re making (by a variety of means) you can have direct control over what your page will look like. The nice part is if you’ve got templates from other themes, you can use those as a guide and include their CSS files to get the exact look and feel you want.
Now that you know it exists as an option, there are a huge variety of resources on the web that you can consult to begin tinkering. Below are a few potentially useful ones:
I suspect even for those without a development background, one could do a bit of reading followed by some judicious cutting and pasting to get some reasonable results. I’m far from an expert in this area myself, but I was recently able to create a sort of landing page template for my podcast recently by creating a custom page that displays when the archive page for my ‘podcast’ category is rendered. Essentially I copied the archive template from my theme, added a bit of detail about the podcast just above the part where it renders the reverse chronological order of the category posts (I did this in simple raw HTML, without any ‘real’ coding), gave the file a new name category-podcast.php so it would trigger when /category/podcast/ is the URL, put it into my child theme (so it wouldn’t be overwritten if I update my theme), and voila–a landing page for the podcast!
If you’re not much of a developer/tinkerer, you could likely ask your departmental, divisional, or institutional web developer, someone at a local WordPress meetup or maybe a Homebrew Website Club to help you out a bit. I think once you’ve done it once with even some simple changes like I did on one page, you’ll have the gist of it and the sky is the limit for every other page on your site.
In this episode, David Shanske and Chris Aldrich discuss how the Post Kinds plugin mapped IndieWeb types of posts to WordPress and why, the defined as opposed to implied types set up, and avatars.
While the conversation is WordPress-centric, there are a lot of discussions here relevant to a broader IndieWeb audience about adding new types of posts to your site, trying to design things flexibly (although a developer’s guide is probably needed), etc.
Does your site pass the Taft Test? Generate or swap images of Taft for web development.
I wish I had lots of bookmarklets that did quirky things like this. Interestingly this one has a relatively useful use-case in addition to its unintended comedic service.
I’ve been meaning to write regular updates to highlight some of the useful changes in the functionality of the IndieWeb suite of WordPress plugins, but never gotten around to it. There’s been a few really interesting ones lately, so I thought I’d start. Observant watchers who read through either the code or even the scant change logs before they update their code may catch some of these features, but sometimes interesting tidbits can slip by the most vigilant. Here are some interesting recent ones:
Display of Reads, Listens, and Watches in comments sections
David Shanske’s excellent Post Kinds Plugin allows one to post what they’re reading, listening to, or watching in simple IndieWeb fashion. (Examples of these on my site: read posts, listen posts, watch posts.) These posts types automatically include the appropriate microformats classes so the user doesn’t need to bother doing them manually. For a long time when replying to another’s site, bookmarking it, or even mentioning it when also using the Webmentions plugin would send the site a Webmention that would generally cause it to show up as a native comment, bookmark or mention. With an update late last year, from within the Discussion settings in WordPress, one could set toggles so that many of these webmentions could be displayed as facepiles. Other broadly unsupported post types would typically default to a simple mention.
Recently David Shanske and I started a podcast, and he thought it would be useful if his site could accept listen posts and show them visually within his comments section just like these replies, bookmarks, and mentions. Thus over the past month he’s added code to the Semantic Linkbacks Plugin to add the functionality for these types of posts to properly render showing facepiles for listens, reads, and watches.
This is what webmentions of listen posts look like on his site in his comments section:
User Interface example of how listen posts on David Shanske’s podcast appear on his site
What’s happening
Listen (or scrobble) posts can send webmentions (or notifications) to the original content potentially with the experimental listen-ofmicroformat. In the case of scrobbles of podcasts, these webmentions could be displayed as “Listens” which would provide the canonical copy of the podcast some indicator of its popularity and actual audience. It is tremendously difficult to obtain data on the actual number of listens within most of the podcast community and typically a fraction of the number of downloads must be used as an indicator of the actual reach. Being able to display listens could potentially be a boon to the podcasting market, particularly with respect to advertising as this type of open social web functionality spreads.
Similarly read posts with the read-of microformat and watches with watch-of will be accepted and show up within the comments section. Like the previous types, they can be set to display as facepiles within the user interface.
From the Discussion options settings page (typically at: /wp-admin/options-discussion.php#semantic_linkbacks) one can choose the mention types one wants to have appear as facepiles within their comments section.
Knowing that this read functionality would be available, this week I helped ColoradoBoulevard.net set up their site to be able to accept and display reads of their articles. Here’s an example from their site:
The display of a read post on ColoradoBoulevard.net
I haven’t yet seen one for watches in the wild yet, but maybe you’ll be either the first to send or receive one?
The microformats on these posts is generally considered to be experimental, but with the ~500+ users of this suite of tools as well as others who are already using them on other sites, they’ve now taken a dramatic step into the open internet and more widespread use and potential official adoption.
Editable Webmention Types and Avatars
Webmention Types
Just yesterday, I spent a few minutes in the IndieWeb chat helping someone to laboriously delve into their mySQL databaset and find a particular snippet of data so they could manually change a received webmention from being a simple mention to being a reply so that it would display as a native comment on their website. I’ve often done this to take what sometimes seem like simple mentions and change them to replies to reveal the richer content they often contain for the broader conversation. Sadly the process is boring, laborious, and fraught with potential ways to mess things up.
As of this weekend, this process is no longer necessary. One can now go to the admin interface for their comments and webmentions (found at the path /wp-admin/edit-comments.php), click on edit for the particular comment they’re changing and then scroll down to reveal a droplist interface to be able to manually change the webmention type.
Samantic Linkbacks Data metabox within the comment editing interface on WordPress. One can use the dropbox to change the webmention type as well as manually update the commenter’s avatar.
As another example of a use for this functionality, perhaps you’ve received a listen mention on one of your podcast episodes that has a lot of useful notes or commentary germane to your episode? Instead of hiding it as a simple listen, why not change the type to reply to allow a richer conversation around your content? After all, with a reasonable reply it will be implicit that the commenter actually listened to the episode, right?
Avatars
Because there is currently no functionality in WordPress for saving or caching the avatars of commenters via webmention, when users change their profile images on siloed services like Facebook, Twitter, et al. the link to their old avatars quits working and they were displaying blank spaces. This is an unfortunate form of linkrot, but one that can become more visually apparent over time.
Likes and Reposts concatenated on my site now after converting them into facepiles. They still give the social “proof” and indicate the interaction, but don’t interfere in the conversation now–especially when there are hundreds of them.
As one can see in the image for the commenting edit box above, the field for the Avatar is now editable. This means one can update out-of-date or blank avatars. One now also has the ability to moderate/edit or easily remove/switch avatars if users are sending inappropriate photos for one’s site’s audience.
Peter Molnar (petermolnar.net)
Huffduff this Episode
