This is the transcript of my lightning talk from the beyond tellerrand Berlin pre-conference warm-up on 6 November 2017. It was a condensed version of my longer, work-in-progress and upcoming talk on privacy as a core pillar of ethical UX design. If you are interested in the final talk or know about a conference or event that might be, I’d be thrilled to hear from you.
It’s sad the amount of not caring that both laws and apathy on the internet can make your life just dreadful in ways that it shouldn’t.
I love the fact that people are working on solving these seemingly mundane issues. This is a great little presentation Sebastian!
What does this mean? My personal website both sends and accepts Webmentions, a platform independent “at mention” or @mention, including those from the fantastic, free service brid.gy which sends replies/comments, likes, reposts, and mentions to my site from silo services like Facebook, Twitter, Instagram, Google+, and even Flickr.
As I’ve long known, and as someone noted at least once on my site, some of these likes, replies, and mentions, which provide some interesting social interaction and social proof of a post’s interest, don’t always contribute to the actual value of the conversation. Now with this wonderful facepiling UI-feature, I’m able to concatenate these types of interactions into a smaller and more concentrated section at the bottom of a post’s comments section, so they’re still logged and available, but now they just aren’t as distracting to the rest of the conversation.
Compare the before and after:
A Prime Example
In particular, this functionality can best bee seen on my article The Facebook Algorithm Mom Problem, which has over 400 such interactions which spanned pages and pages worth of likes, reposts, and mentions. Many of my posts only get a handful of these types of interactions, but this particular post back in July was overwhelmed with them when it floated to the top of Hacker News and nearly crippled my website. Without the facepile functionality, the comments section of this post was untenably unreadable and unusable. Now, with facepiles enabled, the comments are more quickly read and more useful to those who are interested in reading them while still keeping the intent.
For those who have already begun Indiewebifying their WordPress sites with plugins like Webmention and Semantic Linkbacks, the most recent 3.5.0 update to Semantic Linkbacks has the functionality enabled by default. (Otherwise you can go to your administrative dashboard and click on the checkbox next to “Automatically embed facepile” located under Settings » Discussion).
As a caveat, there’s a known bug for those who are using JetPack to “Let readers use WordPress.com, Twitter, Facebook, or Google+ accounts to comment”. If the facepiles don’t show up on your site, just go to your JetPack settings (at yoursite.com/wp-admin/admin.php?page=jetpack#/discussion) and disable this feature. Hopefully, the JetPack team will have it fixed shortly.
If you haven’t begun using IndieWeb principles on your WordPress website, you might consider starting with my article An Introduction to the IndieWeb, which includes some motivation as well as some great resources for getting started.
Nota bene: I know many in the WordPress community are using the excellent theme Independent Publisher, which already separates out likes, mentions, etc. (though without the actual “facepiles”), so I’m not sure if/how this functionality may work in conjunction with it. If you know, please drop me a note.
Hopefully most WordPress themes will support it natively without any modifications, but users are encouraged to file issues on the plugin if they run across problems.
There are certainly many in the IndieWeb community who can help you with this idea (and many others) in the IndieWeb’s online chat.
Give it a spin
Now that it’s enabled, if you’re reading it on my website, you can click on any of the syndicated copies listed below and like, retweet/repost, or mention this article in those social media platforms and your mention will get sent back to my post to be displayed almost as it would be on many of those platforms. Naturally comments or questions are encouraged to further the ongoing conversation, which should now also be much easier to read and interact with.
Thanks again to everyone in the IndieWeb community who are continually hacking away to allow more people to more easily own and control their content while still easily interacting with people on the internet.
Turning mentions into comments for native display
Following Aaron Davis’ comment, I thought I’d add a few more thoughts for those who have begun facepiling their likes, mentions, bookmarks, etc. As he indicates, it’s sometimes useful to call out a particular mention, a special like, or you might want to highlight one among the thousands for a particular reason. This is a feature that many are likely to want occasionally and code for it may be added in the future, but until then, one is left in the lurch a bit. Fortunately, as with all things IndieWeb, part of the point is having more control over your site to be able to do anything you’d like to it. So for those without the ability to write the requisite code to create a pull request against the Webmention or Semantic Linkbacks plugins (they’re more than welcome), here are a few quick cheats for converting that occasional (facepiled or not) webmention into a full comment within your WordPress site’s comment section.
Pro tip: This also works (even if you’re not using facepiles) to convert a basic mention into something that looks more like a native comment. It’s also useful when you’ve received a mention that you’d prefer to treat as a reply, but which wasn’t marked up as a reply by the sending site.
I’ll use an example from the Facebook Algorithm Mom Problem post referenced above. On that post, I’d received a webmention via Twitter from Anil Dash, a blogger and advocate for more humane, inclusive and ethical technology, with some commentary about usability. Here is his original tweet:
Can always tell things are going really well if your product forces people to explicitly exclude their mothers. https://t.co/lh41jVIU0E
That webmention is now hidden behind an avatar and not as likely to be seen by more casual readers. I’d like to change it from being hidden behind his avatar in that long mention list and highlight it a bit to make it appear as a comment in the full comments section.
Steps to convert a mention to a comment
Caution: I recommend reading through all the steps before attempting this. You’ll be modifying your WordPress database manually, so please be careful so you don’t accidentally destroy your site. When doing things like this, it’s always a good idea to make a back up of your database just in case.
Search for the particular comment you want to change in the WordPress Admin UI.
Hover over the date in the “Submitted On” column to find the comment ID number in the URL, in this case it’s http://boffosocko.com/2017/07/11/the-facebook-algorithm-mom-problem/#comment-35281. Make a note of the comment ID: 35281.
Open up the mySQL database for your WordPress install (I’m using phpMyAdmin) to view the data for your site.
Go to the wp_comments table in the database. (Yours may be slightly different depending on how your site was set up, but it should contain the word “comments”.)
Use the search functionality for your table and input your comment ID number into the field for comment_ID.
Now delete the word “webmention” from the comment_type field for the particular comment. This field should now be empty.
You should now be able to view your post (be sure to clear your cache if necessary) and see the mention you received displayed as a native comment instead of a mention. It should automatically include the text of the particular mention you needed.
If you need to convert a large number of mentions into comments, you may be better off searching for the particular post’s post_ID in the comments table and changing multiple comment_type fields at once. Be careful doing this in bulk–you may wish to do a database back up before making any changes to be on the safe side.
Tweetstorms have been getting a horrific reputation lately.  But used properly, they can sometimes have an excellent and beneficial effect. In fact, recently I’ve seen some journalists using it for both marketing and on the spot analysis in their areas of expertise.Even today Aram Zucker-Scharff, a journalism critic in his own tweetstorm , suggests that this UI form may have an interesting use case in relation to news outlets like CNN which make multiple changes to a news story which lives at one canonical (and often not quickly enough archived) URL, but which is unlikely to be visited multiple times:
Why not publish a sequence of small stories that connect together rather than one big one on the same URL that keeps changing?
Why not publish a sequence of small stories that connect together rather t
— Aram Zucker-Scharff (@Chronotope) February 10, 2017
A newsstorm-type user experience could better lay out the ebb and flow of a particular story over time and prevent the loss of data, context, and even timeframe that otherwise occurs on news websites that regularly update content on the same URL. (Though there are a few tools in the genre like Memento which could potentially be useful.)
It’s possible that tweetstorms could even be useful for world leaders who lack the focus to read full sentences formed into paragraphs, and possibly even multiple paragraphs that run long enough to comprise articles, research documents, or even books. I’m not holding my breath though.
Technical problems for tweetstorms
But the big problem with tweetstorms–even when they’re done well and without manthreading–is actually publishing them quickly, rapidly, and without letting any though process between one tweet and the next.
Noter Live–the solution!
Last week this problem just disappeared: I think Noter Live has just become the best-in-class tool for tweetstorms.
Noter Live was already the go-to tool for live tweeting at conferences, symposia, workshops, political debates, public fora, and even live cultural events like the Superbowl or the Academy Awards. But with a few simple tweaks Kevin Marks, the king of covering conferences live on Twitter, has just updated it in a way that allows one to strip off the name of the speaker so that an individual can type in their own stream of consciousness simply and easily.
But wait! It has an all-important added bonus feature in addition to the fact that it automatically creates the requisite linked string of tweets for easier continuous threaded reading on Twitter…
When you’re done with your screed, which you probably wrote in pseudo-article form anyway, you can cut it out of the Noter Live app, dump it into your blog (you remember?–that Twitter-like app you’ve got that lets you post things longer than 140 characters at a time?), and voila! The piece of writing that probably should have been a blog post anyway can easily be archived for future generations in a far more readable and useful format! And for those who’d prefer a fancier version, it can also automatically add additional markup, microformats, and even Hovercards!
Bonus tip, after you’ve saved the entire stream on your own site, why not tweet out the URL permalink to the post as the last in the series? It’ll probably be a nice tweak on the nose that those who just read through a string of 66 tweets over the span of 45 minutes were waiting for!
So the next time you’re at a conference or just in the mood to rant, remember Noter Live is waiting for you.
Aside: I really wonder how it is that Twitter hasn’t created the ability (UX/UI) to easily embed an entire tweetstorm in one click? It would be a great boon to online magazines and newspapers who more frequently cut and paste tweets from them to build articles around. Instead most sites just do an atrocious job of cutting and pasting dozens to hundreds of tweets in a long line to try to tell these stories.
The World Wide Web has been around for long enough now that we can begin to evaluate the twists and turns of its evolution. I wrote this book to highlight some of the approaches to web design that have proven to be resilient. I didn’t do this purely out of historical interest (although I am fascinated by the already rich history of our young industry). In learning from the past, I believe we can better prepare for the future.
You won’t find any code in here to help you build better websites. But you will find ideas and approaches. Ideas are more resilient than code. I’ve tried to combine the most resilient ideas from the history of web design into an approach for building the websites of the future.
I hope you will join me in building a web that lasts; a web that’s resilient.
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.