Social Reading User Interface for Discovery

I read quite a bit of material online. I save “bookmarks” of all of it on my personal website, sometimes with some additional notes and sometimes even with more explicit annotations. One of the things I feel like I’m missing from my browser, browser extensions, and/or social feed reader is a social layer overlay that could indicate that people in my social network(s) have read or interacted directly with that page (presuming they make that data openly available.)

One of the things I’d love to see pop up out of the discovery explorations of the IndieWeb or some of the social readers in the space is the ability to uncover some of this social reading information. Toward this end I thought I’d collect some user interface examples of things that border on this sort of data to make the brainstorming and building of such functionality easier in the near future.

If I’m missing useful examples or you’d like to add additional thoughts, please feel free to comment below.

Examples of social reading user interface for discovery

Google

I don’t often search for reading material directly, but Google has a related bit of UI indicating that I’ve visited a website before. I sort of wish it had the ability to surface the fact that I’ve previously read or bookmarked an article or provided data about people in my social network who’ve done similarly within the browser interface for a particular article (without the search.) If a browser could use data from my personal website in the background to indicate that I’ve interacted with it before (and provide those links, notes, etc.), that would be awesome!

Screen capture for Google search of Kevin Marks with a highlight indicating that I've visited this page in the recent past
Screen capture for Google search of Kevin Marks with a highlight indicating that I’ve visited his page several times in the past. Given the March 2017 date, it’s obvious that the screen shot is from a browser and account I don’t use often.

I’ll note here that because of the way I bookmark or post reads on my own website, my site often ranks reasonably well for those things.

On a search for an article by Aaron Parecki, my own post indicating that I’ve read it in the past ranks second right under the original.

In some cases, others who are posting about those things (reading, commenting, bookmarking, liking, etc.) in my social network also show up in these sorts of searches. How cool would it be to have a social reader that could display this sort of social data based on people it knows I’m following

A search for a great article by Matthias Ott shows that both I and several of my friends (indicated by red arrows superimposed on the search query) have read, bookmarked, or commented on it too.

Hypothes.is

Hypothes.is is a great open source highlighting, annotation, and bookmarking tool with a browser extension that shows an indicator of how many annotations  appear on the page. In my experience, higher numbers often indicate some interesting and engaging material. I do wish that it had a follower/following model that could indicate my social sphere has annotated a page. I also wouldn’t mind if their extension “bug” in the browser bar had another indicator in the other corner to indicate that I had previously annotated a page!

Screen capture of Vannevar Bush’s article As We May Think in The Atlantic with a Hypothes.is browser extension bug indicating that there are 329 annotations on the page.

Reading.am

It doesn’t do it until after-the-fact, but Reading.am has a pop up overlay through its browser extension. It adds me to the list of people who’ve read an article, but it also indicates others in the network and those I’m following who have also read it (sometimes along with annotations about their thoughts).

What I wouldn’t give to see that pop up in the corner before I’ve read it!

Reading.am’s social layer creates a yellow colored pop up list in the upper right of the browser indicating who else has read the article as well as showing some of their notes on it. Unfortunately it doesn’t pop up until after you’ve marked the item as read.

Nuzzel

Nuzzel is one of my favorite tools. I input my Twitter account as well as some custom lists and it surfaces articles that people in my Twitter network have been tweeting about. As a result, it’s one of the best discovery tools out there for solid longer form content. Rarely do I read content coming out of Nuzzel and feel robbed. Because of how it works, it’s automatically showing those people in my network and some of what they’ve thought about it. I love this contextualization.

Nuzzel’s interface shows the title and an excerpt of an article and also includes the avatars, names, network, and commentary of one’s friends that interacted with the piece. In this example it’s relatively obvious that one reader influenced several others who retweeted it because of her.

Goodreads

Naturally sites for much longer form content will use social network data about interest, reviews, and interaction to a much greater extent since there is a larger investment of time involved. Thus social signaling can be more valuable in this context. A great example here is of Goodreads which shows me those in my network who are interested in reading a particular book or who have written reviews or given ratings.

A slightly excerpted/modified screen capture of the Goodreads page for Melanie Mitchell’s book Complexity that indicates several in my social network are also interested in reading it.

Are there other examples I’m missing? Are you aware of similar discovery related tools for reading that leverage social network data?

I’m under the weather in LA attending IndieWeb Summit remotely today. There’s some good documentation, but ping me if you need help getting into the chat, finding streaming video, or accessing resources.

https://indieweb.org/2019
https://indieweb.org/IndieWebCamps/Attendance
https://chat.indieweb.org/indieweb/

Replied to #oext372 #oextend What is inside your open education fortune cookie? | The Daily Extend (extend-daily.ecampusontario.ca)

What will be your future in open education? It will likely not be written inside a fortune cookie, but you can make sure you get the fortune you want.

Use the PhotoFunia Fortune Cookie Generator to produce the one you would like to see happen for yourself.

Borrowed from the Mural UDG Daily Opener 17

Here’s what I found in my fortune cookie:

A plate of fortune cookies with one broken open containing the fortune "A more open and independent web is yours for the making. #IndieWeb"

Photo made using PhotoFunia

Replied to a tweet by Katherine MossKatherine Moss (Twitter)

When you’re logged into OwnYourSwarm there’s a dashboard page with a section entitled “Comments and Responses” with two toggles. The second toggle for “Send Webmention for system comments from Swarm” should be “on” and that should send you the coins and other fun comments that Swarm adds to your posts.

I’ve definitely get them on my site. I think David Shanske updated the Semantic Linkbacks plugin a year or more ago to pares and display them correctly, so it should be just a matter of making sure that the toggle is set to on to get them.

Here’s the relevant link to the documentation.

Replied to a tweet by Rachel CherryRachel Cherry (Twitter)

I’m definitely curious what you come up with! There are so many syndication options and I’m always on the look out for better/more standardized methods. (Of course, nothing beats the feed directly from the source…)

Once you have posting out done, are you going to work on backfeed to have the responses to your posts on Twitter come back to aggregate the conversation on the original site? Perhaps using Webmention and Brid.gy?

📺 Against Blogging | Zach Whalen | Domains 2019

Watched Against Blogging by Zach WhalenZach Whalen from Domains 2019 | YouTube

For the past 15 years, I’ve included blog assignments in my classes as a default, routine, and generally low-stakes assignment. It began with a simple journal where students kept track of their progress through a video game, and through the years, the assignment has ranged from similarly simple logs or progress reports to the more ornate and decorous “features articles” where students seek to emulate magazine writing and engage with a public audience. At times, like when having a platform online was still a novelty and the adrenaline rush of Web 2.0-fueled activism took flight in the optimism of Barack Obama’s first presidential campaign, blogging totally made sense. As a classroom experience, a blog assignment helped students find their digital identity through written expression. By finding their voice digitally, students found themselves.

But while this will still happen, and while I still see brilliant writing from my students, the era when the exigency of a blog assignment can be reliably vindicated by an authentic external audience has ended. It’s time for something else, which means it’s time to re-evaluate what blogs have been and what we have needed them for in order to find the best ways to meet those goals through other means. In this short presentation, I will offer several suggestions.

This is, however, an aspirational proposal. I’m writing this between semesters as I reflect on the Fall — where blog assignments didn’t always meet my goals or in some cases arguably undermined other goals for my class — and thinking ahead to the Spring — when I hope to implement some new assignments based on this recent conviction about the ineffectuality of blog assignments. Therefore, by June, my expectation is that I will have something new to report: either finding success with an entirely new set of assignments and corresponding tools, or returning to the familiar embrace of blog assignments with a renewed sense of their value.

Most likely, I’ll be somewhere in between, but my hunch is that different forms of discursive content creation will help students take control of their learning and find direction for their digital identities. Whatever I find in the coming semester, I’m confident that I’ll be ready to share some insight into the intents, purposes, and outcomes of inviting students to do intellectual work on the internet of 2019.

Notes as they occur to me while I’m watching this video:

To me blogging is a means of thinking out loud.

Of course having a site doesn’t mean one is blogging. In fact, in my case, I’m collecting bits and pieces on my site like a digital commonplace book, and out of those collections come some quick basic thoughts, and often some longer pieces, which could be called blog posts, but really are essays that help to shape my thinking. I really wish more people would eschew social media and use their own websites this way.

We need to remember that a website or domain is FAR, FAR more than just a simple blog. 

It kills me how many in the edtech/Domains space seem to love memes. It’s always cute and fun, but they feel so vapid and ineffectual. It’s like copying someone else’s work and trying to pass it off as our own. English teachers used to say, “Don’t be cliché,” but now through the use of digital memes they’re almost encouraging it. Why not find interesting images and create something new and dramatically different.  (I can’t help but think of the incredibly unique Terry Gilliam “cartoons” in Monty Python’s Flying Circus and the phrase “and now for something completely different…”.

Zach uses the phrase “personal learning journal” but doesn’t quite get to the idea of using domains as digital commonplace books.  He also looks at other social sites like Tik-Tok, Instagram stories, YouTube channels, and Twitter hashtags, but doesn’t consider that what those things are could easily be contained within one’s own personal site/domain. The IndieWeb has been hacking away at just this for several years now. What he’s getting at here, but isn’t quite saying is “Why can’t we expand the Domain beyond the restrained idea of “just a blog.” And isn’t that just the whole point of the IndieWeb movement? Your website can literally be anything you want it to be! Just go do it. Invent. Iterate. Have fun!

Zack should definitely take a look at what one can do with Webmention. See: Webmentions: Enabling Better Communication on the Internet. I suppose some of the restraint is that most people don’t know that it’s relatively easy now to get one domain to be able to talk to another domain the way social sites like Facebook and Twitter do @mentions. And once you’ve got that, there’s a whole lot more you can do!

Perhaps what we should do is go back to the early web and the idea of “small pieces, loosely joined“. What can we do with all the smaller, atomized pieces of the web? How can we use these building blocks in new and unexpected ways? To build new and exciting things? What happens when you combine Facebook, Twitter, Instagram, Snapchat, Blogger, Soundcloud, Foursquare, Flickr, Goodreads, Periscope, Lobsters, TikTok, Quora, Zotero, Flipboard, GitHub, Medium, Huffduffer, Plurk, etc., etc. altogether and mix them up in infinite ways? You get Domains! You may get something as cutting edge–but still relatively straight-laced–as Aaron Parecki’s website, which you might have to dig into to realize just how much he’s got going on there, or you might end up with something as quirky and cool as Kicks Condor’s site or his discovery/syndication channel Indieweb.xyz.

Want to be able to use your website to highlight and mark up what you read? Go ahead and do that! I have. You could keep a record of everything you watch or listen to. Make a food diary. Track where you’ve been. Want to keep collections of chicken related things so your site can have a chicken feed? Go crazy!! 

 

From Following Posts and Blogrolls (Following Pages) with OPML to Microsub Servers and Readers

I’m still tinkering away at pathways for following people (and websites) on the open web (in my case within WordPress). I’m doing it with an eye toward making some of the UI and infrastructure easier in light of the current fleet of Microsub servers and readers that will enable easier social reading without the centralized reliance on services like Facebook, Twitter, Instagram, Snapchat, Medium, LinkedIn, et al.

If you haven’t been following along, here are some relevant pieces for background:

Generally I’ve been adding data into my Following Page (aka blogroll on steroids) using the old WordPress Links Manager pseudo-manually. (There’s also a way to bulk import to it via OPML, using the WordPress Tools Menu or via /wp-admin/import.php?import=opml). The old Links Manager functionality in WordPress had a bookmarklet to add links to it quickly, though it currently only seems to add a minimal set–typically just the URL and the page title. Perhaps someone with stronger JavaScript skills than I possess could improve on it or integrate/leverage some of David Shanske’s Parse This work into such a bookmark to pull more data out of pages (via Microformats, Schema.org, Open Graph Protocol, or Dublin Core meta) to pre-fill the Links Manager with more metadata including page feeds, which I now understand Parse This does in the past month or so. (If more than one feed is found, they could be added in comma separated form to the “Notes” section and the user could cut/paste the appropriate one into the feed section.) Since I spent some significant time trying to find/dig up that old bookmarklet, I’ll mention that it can be found in the Restore Lost Functionality plugin (along with many other goodies) and a related version also exists in the Link Library plugin, though on a small test I found it only pulled in the URL.

Since it wasn’t completely intuitive to find, I’ll include the JavaScript snippet for the Links Manager bookmarklet below, though note that the URL hard coded into it is for example.com, so change that part if you’re modifying for your own use. (I haven’t tested it, but it may require the Press This plugin which replaces some of the functionality that was taken out of WordPress core in version 4.9. It will certainly require one to enable using the Links Manager either via code or via plugin.)

javascript:void(linkmanpopup=window.open('https://exanple.com/wp-admin/link-add.php?action=popup&linkurl='+escape(location.href)+'&name='+escape(document.title),'LinkManager','scrollbars=yes,width=750,height=550,left=15,top=15,status=yes,resizable=yes'));linkmanpopup.focus();window.focus();linkmanpopup.focus();

Since I’ve been digging around a bit, I’ll note that Yannick Lefebvre’s Link Library plugin seems to have a similar sort of functionality to Links Manager and adds in the ability to add a variety of additional data fields including tags, which Ton Zijlstra mentions he would like (and I wouldn’t mind either). Unfortunately I’m not seeing any OPML functionality in the plugin, so it wins at doing display (with a huge variety of settings) for a stand-alone blogroll, but it may fail at the data portability for doing the additional OPML portion we’ve been looking at. Of course I’m happy to be corrected, but I don’t see anything in the documentation or a cursory glance at the code.

In the most ideal world, I’d love to be able to use the Post Kinds Plugin to create follow posts (see my examples). This plugin is already able to generally use bookmarklet functionality to pull in a variety of meta data using the Parse This code which is also built into Post Kinds.

It would be nice if these follow posts would also copy their data into the Links Manager (to keep things DRY), so that the blogroll and the OPML files are automatically updated all at once. (Barring Post Kinds transferring the data, it would be nice to have an improved bookmarklet for pulling data into the Links Manager piece directly.)

Naturally having the ability for these OPML files be readable/usable by Jack Jamieson’s forthcoming Yarns Microsub Server for WordPress (for use with social readers) would be phenomenal. (I believe there are already one or two OPML to h-feed converters for Microsub in the wild.) All of this would be a nice end -to-end solution for quickly and easily following people (or sites) with a variety of feeds and feed types (RSS, Atom, JSONfeed, h-feed).

An additional refinement of the blogroll display portion would be to have that page display as an h-feed of h-entries each including properly marked up h-cards with appropriate microformats and discoverable RSS feeds to make it easier for other sites to find and use that data. (This may be a more IndieWeb-based method of displaying such a page compared with the OPML spec.) I’ll also note that the Links Manager uses v1 of the OPML spec and it would potentially be nice to have an update on that as well for newer discovery tools/methods like Dave Winer’s Share Your OPML Subscription list, which I’m noting seems to be down/not functioning at the moment.

Replied to a tweet by femedtechfemedtech (Twitter)

Five is far from enough. Here’s just a few (in no particular order):

Kathleen FitzpatrickCathie LeBlancRobin DeRosa, Amy Collier, Audrey Watters, Amy GuyKimberly Hirsh, Catherine Cronin, Martha Burtis, Autumn CainesChristina Hendricks, Maha Bali, Lee Skallerup Bessette, Meredith Broussard, Helen DeWaard, Devon Zuegel, Kate BowlesIrene Stewart, Rachel Cherry, Jess Reingold, Laura PasquiniLaura Gibbs, Lora Taub-Pervizpour, Hilary Mason, Miriam PosnerKay Oddone, Rayna Harris, Amber Case, Teodora Petkova, Anelise H. Shrout, Jean MacDonald, Natalie Lafferty, Lauren Brumfield, Meredith Fierro

And don’t just follow them on Twitter, fill your brain up by following their longer thoughts in the feeds from their own domains, which I’ve linked. This way you won’t miss anything truly important in the overwhelming flow of Twitter and other social media.

Replied to My Human Readable OPML Blogroll by Ton ZijlstraTon Zijlstra (zylstra.org)
After my recent posting where I asked people which RSS feeds they read, I received several responses. One of them is Peter’s. Like me he was publishing an OPML file of his feeds already. OPML is a machine readable format that most RSS readers will be able to import, so you can subscribe to blogs I...

Ton, this is great! Though perhaps you’re reinventing the wheel a bit more than you may have needed to?

I’ll see you your blogroll and add in images and descriptions as well! https://boffosocko.com/about/following/

A while back I did something similar to what you and Peter have done, I just did it with the old built in Link Manager feature of WordPress. The primary difference is that I’ve got some meta data about what the site/feed is about in addition to an image. I left out the feed in the human readable version as it’s less likely to be used, while it’s more valuable to the computer readable version. I’ve also figured out the a URL query parameter for breaking my blogroll up by category, so that folks can copy smaller subsections of it.

Another added bonus is that I’m using Inoreader which supports OPML subscriptions so that any time I update my OPML file, my feed reader auto-updates for me without needing to manually upload the new OPML file! This means I just add the follow in one place and everything else follows without any additional work.

Here are the details for how I did most of it:

Perhaps what we really need is to give some love to that Link Manager in core to update it to OPML v2 and add in the rel attributes from XFN microformats to the links? 

When you have a moment, be sure to add your example to the OPML and blogroll pages on the IndieWeb wiki, where you may find some additional inspiration.

Thanks for experimenting to bring back the blogroll! (And thanks for sharing, there are a few of your feeds I see that I ought to be following and I also recognize those we have in common of many educators I already do follow.)

Replied to Adding a Self Contained Site with File Manager by Alan Levine (Extend Activity Bank)
Screenshot of sample basic calling card web page featuring a background with a 6 year old with his mouth agape.

Many of the sites we create in our cpanel are installed via a cpanel tool because they have complex file structures and often require database set ups. But there are quite a few web site themes that are all self contained HTML/CSS/Javsscript files that we can upload directly to our domain with the File Manager.

This activity walks you through the steps to put a self-contained web site within a directory of your site.

I created a sub-folder on my sub-domain and uploaded a simple templated HTML5/CSS website to create a simple calling card page at http://sp.chrisaldrich.net/me/. I couldn’t bring myself to replace the picture of the little kid with the gaping mouth because it was just too cute.

While I occasionally do some small uploading tweaks like this, it seems like ages since I created webpages like this outside of more elaborate content management systems. Hooray for raw HTML and CSS! It’s also a bit refreshing to do it all manually in an interface instead of via FTP or other means.

Replied to a tweet by Greg McVerryGreg McVerry (Twitter)

Perhaps you were thinking of Tim Clarke (@FloatingTim) or Lora Taub (@ltaub)? That would give you 4 not counting their students that might be interested. That’s also more than enough to do a Homebrew Website Club on a regular basis too.

I know that some have set up remove viewing/remote attendance parties for Camps/Summit in the past–not a bad idea Greg!

IndieWeb Summit 2019 
What to expect (w/ some remote attendance tips)

Quickly making watch posts on my website

I was reading about how Cathie LeBlanc sometimes felt overwhelmed about logging the movies she’d recently seen:

I have to be better about posting my movie “reviews” more quickly. I get overwhelmed thinking that I need to write something about the movie when really the whole point of me doing these reviews is just to record what movies I’ve seen. So this month, I’m writing very little about each of these viewings.

I always had this problem too and finding quick and easy ways of posting them before I forgot became part of the solution. I’m not sure I’ve fully documented what I’ve been doing, but it’s slowly changed over time, so I thought I’d take a moment to write down some of the faster methods I use or have used.

One can always use the WordPress mobile posting app, bookmarklets in conjunction with Post Kinds, or even posting via email, but it usually takes a few minutes and can distract from conversations and family/friends when they’re around. Generally I’m looking to immediately capture the title of the film/tv show, the date/time stamp, and maybe the location. Later on, when I’ve got a few extra minutes, I’ll come back and optionally add details/context like poster art, cast, crew, etc. and a mini review with a rating. The method you use will depend on what kind of display you want and how much detail you’d like. At the end of the day, do what works best for you.

Checkin Method

I’m a relatively avid user of the Swarm app (fka Foursquare), so I’ll often take a photo of the movie poster, ticket, theater/other while I’m at the theater and then quickly checkin on my phone. Swarm typically has some interface to indicate which movie I’m seeing when I check into movie theaters. Otherwise it’s pretty easy to manually type things in while I’m waiting for the show to start. Once the movie is over I can discretely can go back to the checkin and add a few quick comments and a rating without disturbing the rest of the party, otherwise I’ll revisit it later.

To get this all on my website I’ve set up the Micropub plugin and configured OwnYourSwarm (for public/private posting–you choose), and the service takes care of posting all the data for me as a checkin so that I don’t forget. In the end it’s usually less than 10 seconds, and I’ve got the data I need as it happens.

Traditional PESOS watch method using IFTTT

This alternate PESOS method can be done using popular services like IMDb.com or Letterboxd.com and relies on using RSS feeds from them to pipe content to my site using IFTTT.com. (Other silo services may be able to do this as well.) Most often I send the URLs of movies/tv shows of what I watch from IMDb to my Reading.am account which has an RSS feed to trigger IFTTT.com that, in turn, creates a draft post on my website. (If only IMDB.com had a usable RSS feed, I could skip the Reading.am account. Typically I’ll search for the movie on IMDb, share that from my browser to may email client and email it to a custom Reading.am email address that autoposts it to my Reading.am account.) Later I can peek in on it, add a mini-review and rating if I like, and publish publicly or not. Letterboxd can be used similarly, but it has the added benefit of having a rating system built in so it can send that data as well.

Hopefully they’ll resolve with a logged in account, so here are the two IFTTT.com recipes I’m using as reference:

(If you can’t access the recipes to recreate your own, let me know, and I’ll manually delineate all the relevant settings.)

Both methods will work without it, but I’m also using the Post Kinds plugin to create explicit watch posts which have a nice contextual presentation which I kind of like. It also has the ability to parse URLs to create the context quickly, so if you put in an IMDb or Letterboxd URL, it will fetch artwork, cast, description, etc. automatically and there’s no need to cut/paste.

Examples

To get some idea, here are some interesting examples of these methods.

If others have better/faster methods, I’d love to hear them or see them documented. Perhaps one day someone (or maybe even IMDb or Letterboxd) will build a custom Micropub client specifically for watch posts (something akin to Teacup for food/drink or Indiebookclub for reading) that will automatically poll the data related to a film/television title and post it to one’s site?

If it helps Domains 2019 attendees, I’ve got a Twitter list of educators, researchers, technologists, and others who are using DoOO, IndieWeb, or other related ethical edTech technologies. The list includes people who attended in 2017, many of those tweeting during 2019, as well as those regularly tweeting about DoOO and closely related topics throughout the year or on the list of Educators in the IndieWeb.

I’ve also got a regularly updated OPML file for many of the same people if you prefer to subscribe to/follow their websites directly (this method is more Domains-friendly right!?!). If you use Inoreader or other services that support OPML subscription technology, this feed will auto-update for you as new people are added to the list, preventing you from needing to regularly refresh the OPML file manually. I’ll try to update this OPML file this evening for today’s/tomorrow’s attendees based on their websites in their Twitter profiles.

Don’t hesitate to ping me if you’d like to be added to the lists, or if I’m missing anyone. Be sure to include your most relevant RSS feed(s) for the OPML portion of that list. Feel free to copy/modify either of the lists to your heart’s content.