Simple Twitter UI buttons on an IndieWeb-enabled site can allow Twitter to become part of your commenting system.
Back at IndieWebCamp Austin, I became enamored of adding additional methods of interacting with my website, particularly for those who weren’t already on the IndieWeb train. I’d seen these types of interactions already on Tantek Çelik’s site in the past, so naturally I figured I would start there.
Some basic searching revealed that in IndieWeb parlance, these types of functionalities are known as web actions. While they’re often added to make it easier for one site with the proper infrastructure to interact with another, they’re also designed for social web silos (Like Twitter, Facebook, et al.) to do this type of interaction simply as well.
As a small scale experiment, I thought I would begin manually and add some simple interface to allow Twitter users (who may not yet have their own websites to use to respond to me instead) to be able to quickly and easily reply to, repost, or like posts on my site. A little bit of reading on the wiki and Twitter’s developer site allowed me to leverage something into existence pretty quickly.
Interestingly, although there are many plugins that help users simply share a blog post to Twitter, I couldn’t easily find a WordPress plugin that already allows these other interactions as options at all. I suspect it may be because the other side of the interaction of bringing the replies back to one’s site isn’t commonly known yet.
I was able to write a post, syndicate it to Twitter, upload the button images, and then inject the Twitter post ID (939650287622434816 in this example) for my syndicated copy into my post like so:
And voila! My new post now had some simple buttons that allow users a simple one click interaction with a popup window to reply to, repost, or like my post.
Naturally, through the “magic” of Brid.gy, I’m able to collect these responses via backfeed with the Webmention protocol using the Webmention Plugin for WordPress back to my own website. In simpler and less technical terms, if you use one of these buttons, your interaction with my website as posted to Twitter comes back to live on my website. Thus users can use Twitter to write a comment or reply on Twitter and it will display in my comments section just as if they had written it directly in my comments box. Likes and reposts are sent to my site and are displayed relatively naturally as facepiles under the comment headings “Likes” and “Reposts”.
I’ll do another manual example with this particular post, so feel free to use the buttons at the bottom of this post to make your response via Twitter if you wish.
Taking some of this code and abstracting into a plugin for others to use would be a nice feature. Doing this would also potentially make it available as a potential plugin in the larger IndieWeb suite of WordPress plugins. Perhaps it could be easily added into the codebase in one or another pre-existing plugins? I might think that David Shanske’sSyndication Links plugin or Bridgy Publish plugin might make sense as they’re already adding functionality for part of the publishing half of the cycle by either publishing to Twitter and/or importing the Tweet ID back into one’s WordPress site for potential display. One or the other could do a simple if/then on the existence of a syndicated Tweet, then extract the Twitter ID, and add the buttons to the interface appropriately.
It would be interesting to add full mark up to make <indie-action> functionality possible for a broader class of web actions, particularly if it could be integrated directly into WordPress in a more interesting manner to work with the Post Kinds Plugin or the IndieWeb PressThis type of bookmarklet functionality.
Instead of having these types of interactions injected at the bottom of the post, it may make more sense to have it display in the comment block instead.
I suspect that Facebook, Instagram, and others also enable some types of functionality, so adding the ability to use them the same way would be awesome. And even more so in the case of RSVP’s to events since Brid.gy handles those relatively well between Facebook and WordPress sites. (See this example.)
Try it yourself
Go ahead and use the buttons below to interact with this post via Twitter.
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!
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.
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.
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.)
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.
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:
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.
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:
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:
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.
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.
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:
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.
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!
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.
Today I was reminded while thinking about Disqus that I had an Intense Debate account from April 23, 2009. Apparently it’s still functioning all these years later–possibly as a result of their purchase by Automattic in 2008. Not that there was much there, but I took a few minutes and exported out all my data and now own it here on my site.
One of the interesting parts was that it featured a comment about Twitter pulling the rug out from underneath developers–an event that foreshadowed even more of the same in the coming years as well as a conversation about the gamification of follower accounts, something which has gotten us into a sad state of affairs today nearly a decade later. Apparently while they tried to cap follower accounts, their early efforts just didn’t go far enough to help the civility of the platform.
There has been an ongoing discussion as to whether or not blogs should always have comments enabled to allow its readers to be part of the conversation. I myself firmly believe that each blog post should be thought of as a starting point of, or a response to, a conversation.
Some deal with this issue from an ideological perspective in that they disable comments because they feel that people will behave differently when commenting than they would if they wrote from their own Web sites.
Written nearly a decade ago to the day, much of what this post has to say about blog comments is still roughly true. There are some interesting thoughts which inform a lot of what is going on in the IndieWeb community today.
In anecdotal conversations with some and certainly in my own personal experience, I’ve heard/seen that posting your own thoughts and replies on your own website encourages (perhaps forces?) you to do a bit more thinking and examination before replying. The fact that you’re not limited to a certain number of characters also helps to expound on your ideas/thoughts as well.
I’m curious, however, given the state of politics today, if it will scale? Perhaps if there’s still a technological or financial hurdle in which people have more invested in their web presences it will. Given the dumpster fire that some sectors of social media have become–in some part because of the lack of resistance as well as anonymity–it may not.
I still hope for the best, and am glad for the friends and colleagues I’ve met through doing all of this thus far.
Today I’m happy to announce I’ve added a discussions section to the website, directly below each article. Here you’ll be able to directly respond to what you’ve just read, share your thoughts, and have a discussion with other readers of my site. Today’s post is going to take a bit of a look inside why I’m doing this and how discussions work.
Jason your blogpost does a great job of laying out the values (and distractions) of comments on blogs and why someone would want to have them. I particularly like your choice to call this area of his personal site a “Discussion” area instead of the traditional “Comments” moniker most would give it.
While you use the oft-quoted statement (usually said in a dismissive tone in my experience):
If you want to respond, do so on your own website and tell me.
in the section espousing not allowing comments, I realize that this long-held concept of writing on your own website not only has significant value, but that the Indieweb way of replying and utilizing Webmentions (with moderation enabled if one prefers) for the notifications portion adds even more tremendous value.
Far too often, either in a blog’s comments section or even within social media, it’s all too easy to post an ill-conceived or hurtful drive-by response. It takes little time and thought to say “me too”, “I hate you”, “insert slur here”, or even click an innocuous “like” button many which do nothing for the conversation or discussion being proffered by the site owner. Worse, a very small portion of the world will see that a reader took these actions because they don’t really reflect heavily, if at all, within the reader’s own online presence–who searches for comments others have made online? How would you easily? It’s usually in these interactions that only the writer who spent some significant time trying to communicate can be crushed by overwhelming negativity rather than being showered with the intelligence, logic, or forethought they deserve for putting themselves out there, much less receiving praise for their work. It’s no wonder that people prefer to turn off comments.
Earlier this evening as I was reviewing the online discussion from the San Francisco Homebrew Website Club, I saw a comment from bdesham captured by Tantek Çelik, “I heard not having comments on Tumblr was a deliberate design, to avoid abuse, so to comment you have to reblog?” I recall having an HWC at Yahoo’s LA headquarters and hearing from someone within Yahoo that indeed this was exactly the reason that drove this piece of UX/UI. If you wanted to comment on Tumblr, you had to repost the content to your own front page along with the comment. This meant that you had to take true ownership of your words as they appeared front and center on your own site there. Who wants to publicly mark themselves with a proverbial Scarlet Letter just to be mean? (Some will, but increasingly many won’t because it redounds directly to their reputation.) Perhaps this is why some of the most marginalized people on the internet heavily use Tumblr and feel safe within their communities there?
As some will know, for the past few years I’ve been using the W3C’s recommended Webmention specification, a sort of cross-website universal @mention or @reply, which I’ve implemented on WordPress with the Webmention plugin and a few others, to accept replies/comments and other associated interactions on my blog in addition to the traditional comments box. While the traditional comment box has largely been unused on my site–making it often feel in the early days like I was “spewing words out into the void” as Jason describes–the Webmention piece seems to have made a far larger difference to me.
The majority of the interaction my site receives comes via Webmentions from Brid.gy in the form of short one-offs or simple “likes” which are backfed from Facebook, Twitter, or Google+. However a growing number of interactions are actually interesting and more substantive discussions. It’s these more “traditional” replies via Webmention that have the most value to me. They are better thought out replies and helpful commentary, which almost always appear front and center on the commenter’s own site (much the way Tumblr designed theirs) before they ever appear on my site as a comment. As Jason astutely points out, having comments that are longer than 140 characters can be very valuable as well; since my commenters are posting on their own sites where they have ultimate freedom, most of them aren’t constrained in any way except perhaps for the amount of time they wish to take.
So here you are Jason, I’ve commented by posting on my own site first and notifying you by manually copying it to your discussion section where others can participate as well. (If you supported receiving Webmentions, the interaction would be automatic and nearly seamless.) I’m curious if you’d consider implementing the Webmention spec (both sending and receiving) on your website and if you think it would have the same intended effect you mean when you enabled “Discussions” on yours?–I know it feels like it has on mine.
If you care to reply back, feel free to reply on your own site, include a permalink to my original and use the manual Webmention form (below the traditional comment box) and click “Ping Me!” Of course, if you’re old school, feel free to dust off the old comment box and give that a whirl too!
Some additional miscellaneous thoughts, highlights, and short comments on Jason’s post:
Comments sections often become shouting matches or spam-riddled.
They can also become filled with “me too” type of commentary which more than often doesn’t add anything substantive to the conversation.
One of my all-time favorite comment moderation notes comes from the FAQ section of Peter Woit’s blog under “Why Did you Delete my comment?” He writes:
I delete a lot of the comments submitted here. For some postings, the majority of submitted comments get deleted. I don’t delete comments because the commenter disagrees with me, actually comments agreeing with me are deleted far more often than ones that disagree with me. The overall goal is to try and maintain a comment section worth reading, so comments should ideally be well-informed and tell us something true that we didn’t already know. The most common reason for deleting a comment is that it’s off-topic. Often people are inspired by something in a posting to start discussing something else that interests them and that they feel is likely to interest others here. Unfortunately I have neither the time nor inclination to take on the thankless job of running a general discussion forum here.
I hope my thoughts pass the Woit-comment-test for Jason.
For a website the size and popularity of Daring Fireball, it’d probably be madness to foster any kind of coherent conversation.
Certainly to do it without a staff would be difficult… Again here, Audrey Watter’s post about turning off comments indicates to some extent that even though she views her site as her personal blog, it’s audience, like that of Daring Fireball, has gotten so large that it’s not just friends, family, and community, but something beyond “community” (beyond the pale) that changes the dynamic of accepting comments.
I never felt like I was talking with anyone or anyone’s website, but more like I was spewing words out into the void.
I often feel this way, but supporting Webmentions and backfeed has largely negated these feelings for me in the last few years. I can now communicate directly with websites (and their authors) that support these open protocols.
It has the added benefit of making one-word smart-ass posts impossible.
I do remember the days of old, when people would comment “First!”, but beyond that #OneWordSmartAss is usually overrated unless you’re a professional comedian like Jon Stewart.
Web annotations became a W3C standard last week but the world hardly noticed. For years, most conversations on the web have happened in the form of comments. Annotations are different in that they usually reference specific parts of a document and add context. They are often critical or explanatory in nature.
Web annotation seems to promote more critical thinking and collaboration but it’s doubtful that it would ever fully replace commenting systems.
But why not mix annotations and comments together the way some in the IndieWeb have done?! A few people are using the new W3C recommendation spec for Webmention along with fragmentions to send a version of comments-marginalia-annotations to sites that accept them and have the ability to display them!
A good example of this is Kartik Prabhu’s website which does this somewhat like Medium does. One can write their response to a sub-section of his post on their own website, and using webmention (yes, there’s a WordPress plugin for that) send him the response. It then shows up on his site as a quote bubble next to the appropriate section which can then be opened and viewed by future readers.
While annotation systems have the ability to overlay one’s site, there’s certainly room for serious abuse as a result. (See an example at https://indieweb.org/annotation#Criticism.) It would be nice if annotation systems were required to use something like webmentions (or even older trackback/pingbacks) to indicate that a site had been mentioned elsewhere, this way, even if the publisher wasn’t responsible for moderating the resulting comments, they could at least be aware of possible attacks on their work/site/page. #
Not a day goes by that I don’t run across a fantastic blog built or hosted on WordPress that looks gorgeous–they do an excellent job of making this pretty easy to accomplish.
Invariably the blog’s author has a generic avatar (blech!) instead of a nice, warm and humanizing photo of their lovely face.
Or, perhaps, as a user, you’ve always wondered how some people qualified to have their photo included with their comment while you were left as an anonymous looking “mystery person” or a randomized identicon, monster, or even an 8-bit pixelated blob? The secret the others know will be revealed momentarily.
Which would you prefer?
Somehow, knowing how to replace that dreadful randomized block with an actual photo is too hard or too complicated. Why? In part, it’s because WordPress separated out this functionality as a decentralized service called Gravatar, which stands for Globally Recognized Avatar. In some sense this is an awesome idea because then people everywhere (and not just on WordPress) can use the Gravatar service to change their photo across thousands of websites at once. Unfortunately it’s not always clear that one needs to add their name, email address, and photo to Gravatar in order for the avatars to be populated properly on WordPress related sites.
(Suggestion for WordPress: Maybe the UI within the user account section could include a line about Gravatars?)
So instead of trying to write out the details for the third time this week, I thought I’d write it once here with a bit more detail and then point people to it for the future.
Another quick example
Can you guess which user is the blog’s author in the screencapture?
The correct answer is Anand Sarwate, the second commenter in the list. While Anand’s avatar seems almost custom made for a blog on randomness and information theory, it would be more inviting if he used a photo instead.
How to fix the default avatar problem
What is Gravatar?
Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. Avatars help identify your posts on blogs and web forums, so why not on any site?
Need some additional motivation? Watch this short video:
Step 1: Get a Gravatar Account
If you’ve already got a WordPress.com account, this step is easy. Because the same corporate parent built both WordPress and Gravatar, if you have an account on one, you automattically have an account on the other which uses the same login information. You just need to log into Gravatar.com with your WordPress username and password.
If you don’t have a WordPress.com account or even a blog, but just want your photo to show up when you comment on WordPress and other Gravatar enabled blogs, then just sign up for an account at Gravatar.com. When you comment on a blog, it’ll ask for your email address and it will use that to pull in the photo to which it’s linked.
Step 2: Add an email address
Log into your Gravatar account. Choose an email address you want to modify: you’ll have at least the default you signed up with or you can add additional email addresses.
Step 3: Add a photo to go with that email address
Upload as many photos as you’d like into the account. Then for each of the email addresses you’ve got, associate each one with at least one of your photos.
Example: In the commenters’ avatars shown above, Anand was almost there. He already had a Gravatar account, he just hadn’t added any photos.
Step 4: Fill out the rest of your social profile
Optionally you can additional social details like a short bio, your other social media presences, and even one or more websites or blogs that you own.
Step 5: Repeat
You can add as many emails and photos as you’d like. By linking different photos to different email addresses, you’ll be able to change your photo identity based on the email “key” you plug into sites later.
If you get tired of one photo, just upload another and make it the default photo for the email addresses you want it to change for. All sites using Gravatar will update your avatar for use in the future.
Step 6: Use your email address on your WordPress account
In the field for the email, input (one of) the email(s) you used in Gravatar that’s linked to a photo.
Don’t worry, the system won’t show your email and it will remain private–WordPress and Gravatar simply use it as a common “key” to serve up the right photo and metadata from Gravatar to the WordPress site.
Once you’ve clicked save, your new avatar should show up in the list of users. More importantly it’ll now show up in all of the WordPress elements (like most author bio blocks and in comments) that appear on your site.
WordPress themes need to be Gravatar enabled to be able to use this functionality, but in practice, most of them do, particularly for comments sections. If yours isn’t, then you can usually add it with some simple code.
In the WordPress admin interface one can go to Settings>>Discussion and enable View people's profiles when you mouse over their Gravatars under the heading “Gravatar Hovercards” to enable people to see more information about you and the commenters on your blog (presuming the comment section of your theme is Gravatar enabled.)
Some WordPress users often have several user accounts that they use to administer their site. One might have a secure administrator account they only use for updates and upgrades, another personal account (author/editor admin level account which uses their name) for authoring posts, and another (author/editor admin level) account for making admin notice posts or commenting as a generic moderator. In these cases, you need to make sure that each of these accounts has an email address with an an associated Gravatar account with the same email and the desired photo linked to it. (One Gravatar account with multiple emails/photos will usually suffice, though they could be different.)
Example: In Nate’s case above, we showed that his photo didn’t show in the author bio box, and it doesn’t show up in some comments, but it does show up in other comments on his blog. This is because he uses at least two different user accounts: one for authoring posts and another for commenting. The user account he uses for some commenting has a linked Gravatar account with email and photo and the other does not.
Want more information on how you can better own and manage your online identity? Visit IndieWeb.org: “A people-focused alternative to the ‘corporate web’.”
To help beautify your web presence a bit, if you notice that your photo doesn’t show up in the author block or comments in your theme, you can (create and) use your WordPress.com username/password in an account on their sister site Gravatar.com. Uploading your preferred photo on Gravatar and linking it to an email will help to automatically populate your photo in both your site and other WordPress sites (in comments) across the web. To make it work on your site, just go to your user profile in your WordPress install and use the same email address in your user profile as your Gravatar account and the decentralized system will port your picture across automatically. If necessary, you can use multiple photos and multiple linked email addresses in your Gravatar account to vary your photos.