A hack for using Hypothes.is to annotate on mobile

I do a fair amount of reading on my mobile phone and my addiction to Hypothes.is for annotating and highlighting what I read has finally driven me to the brink. I have typically added via.hypothes.is to the URLs of articles manually so I can use Hypothes.is on my phone. I’ve finally had enough of the manual timesuck that I’ve gone in search of an answer since there is not yet a mobile app solution.

I’ve long been an Android user, so I broke out the URL Forwarder app which uses the ubiquitous share functionality of most phone platforms and adds a thin layer of program-ability.

In short I created a new filter and cleverly named it “Hypothesize”. Then I added the filter url “http://via.hypothes.is/@url” and left the replaceable text alone. 

screenshot of URL Forwarder and settings for Hypothes.is

Now I can take an article from almost anywhere on my phone (reading services like Pocket, my feed readers, or even articles within the browser themselves), click share, choose “URL Forwarder” from the top of the list, select “Hypothesize” and the piece I want to annotate magically opens up with Hypothes.is ready to go in my default browser. Huzzah!

The three taps are ever so much easier than trying to tap a URL to edit it it and then typing. Why didn’t I think of this years ago?

Have you had this problem? Do you have a better solution or work around?

Replied to a post by Greg McVerryGreg McVerry (INTERTEXTrEVOLUTION)
For today’s #edu522 #dailyponderance you need to highlight some cool #edtech tools. Give us 3-5 apps or websites we should try in class.
Some of my favorite and often used edtech tools:

Hypothesis – a service that allows me to quickly highlight and annotate content on almost any web page or .pdf file

IFTTT.com – a service which I use in combination with other services, most often to get data from those sites back to my own. For example:

Huffduffer.com – a service I with audio related content I find online. I use its bookmarklet to save audio from web pages. Huffduffer then creates a custom RSS feed that I can subscribe to in any podcatcher for catching up on podcasts while I’m on the go.

Post Kinds Plugin for WordPress – since many in the class are also using it, I’ll mention that I love using its bookmarklet functionality to quickly bookmark, favorite, or reply to other posts on the web.

URL Forwarder – This is an Android-based app that I’ve configured to dovetail with the Post Kinds Plugin and my website for posting to my site more quickly via mobile.

Jon Udell’s media clipper – I use this audio/video tool for finding and tagging the start and stop points of media so that I can highlight specific portions for others

Reply to Aaron Davis’ Reply to IndieWeb Press This bookmarklets for WordPress

Replied to Reply to IndieWeb Press This bookmarklets for WordPress by Aaron DavisAaron Davis (collect.readwriterespond.com)
I have been using Dave Winer’s Radio3 platform/bookmarklet, but would rather a process which would allow me to store bookmarks on my blog and POSSE them. I was therefore wondering about creating a similar bookmarklet that generates ‘Bookmark’ post-kinds, as well as the possibility of posting from mobile? Am I going down the wrong path, especially as WordPress tinkers with ‘Press This’?
Aaron, the IndieWeb PressThis version bookmarklets are certainly a laudable solution for bookmarking things (even as WordPress moves the functionality of the original out of core), but I suspect you may find a more robust solution given some of your current set up.

Post Kinds Bookmarklets

A screen capture of my browser bookmarklets for my WordPress site with emoji for easier visual use.

A screen capture of my browser bookmarklets for my WordPress site with emoji for easier visual use.

Since you have the Post Kinds plugin set up, you might consider using that for a lot of the distance it can give you instead. I’ve written up some basic usage instructions for the plugin along with screenshots, but you’ll probably be most interested in the section on Bookmarklet Configuration. I’ve created a dozen or so browser bookmarklets, with handy visual emoji, for creating specific bookmark types for my site.

As for mobile posting, I’ll mention that I’ve heard “rumors” that David Shanske has a strong itch for improving the use of Post Kinds with a better mobile flow, so I would expect it to improve in the coming months. Until that time however, you can find some great tips on the wiki page for mobile posting. I recommend reading the entire page (including the section on Known which includes tools like URL Forwarder for Android that will also work with WordPress in conjunction with Post Kinds and the URL scheme described in the Bookmarklet Configuration section noted above.)

Using these details you should be able to make bookmarklets for your desktop browser and an Android phone in under an hour. If for some reason the documentation at these locations isn’t clear enough for you to puzzle out, let me know and I can do a more complete write up with screenshots and full code. (It’s still a piece of the book I need to expand out, or I’d include it here.)

Email

WordPress has the option of setting up an email address by which to post to your site. You can configure this pretty quickly, especially for mobile use to send URLs to your website that way. I typically use this method for quickly bookmarking things to my site for private use at a later date.

PESOS Options

There are also services that do bookmarking and include RSS feeds to your content which you could also potentially use to trigger IFTTT.com actions to post to your website. I have something similar to this set up for Reading.am which I’ve described in the past. You could certainly use this in combination with Diigo, which I see you use. Again, here more often than not I use these methods when I post things to my site as drafts or private posts.

cc: Indieweb Press This Bookmarklets for WordPress

Browser Bookmarklets and Mobile Sharing with Post Kinds Plugin for WordPress

The Post Kinds Plugin

I’ve been using David Shanske’s excellent WordPress plugin Post Kinds, which is conveniently bundled into the IndieWeb Plugin, for more than a year now. (Update: I’ve also written a fairly in-depth primer for it.)

Much like WordPress’s native post formats (standard, aside, image, quote, link, status, audio, etc.) which were introduced in v3.1, Post Kinds instead provides a better mapping of post types across a larger variety of social media types (article, bookmark, favorite, itinerary, jam, like, listen, note, photo, play, read, reply, repost, watch, and more). In addition to changing the visual layout and formatting of most posts, the plugin also importantly includes the correct microformat classes for each of these post types and this enables a lot of other fantastically important functionality for the open web.

Custom URLs for Post Kinds

One of the problems I had with using it initially was taking the extra time to cut and paste in the several pieces of additional data or fill in meta data to make a post. It was particularly painful in a mobile setting. I was thrilled when David mentioned that he’d built in some customized query parameters which could take URLs to import in much of the data as well as to set the correct post kind automatically. They came with the general format of

http://example.com/wp-admin/post-new.php?kind=bookmark&kindurl=@url

where one could replace @url with the target URL of the site to be bookmarked, for example. Replacing bookmark with the appropriate post kind name would allow one to set the flag for each post to the proper post kind automatically, and naturally one should replace example.com with the base URL for their site.

Putting this customized URL into a browser will create a new post in one’s website admin UI and Post Kinds will automatically set the URL and scrape its meta data. One can then modify any additional data or add a comment and then publish quickly and easily.

As a concrete example, I would put the following URL in my browser of choice to “like” the Post Kinds Plugin page:
http://www.boffosocko.com/wp-admin/post-new.php?kind=like&kindurl=https://wordpress.org/plugins/indieweb-post-kinds/

Browser Bookmarklets

I am a huge fan of browser bookmarklets, so for a while I’ve been meaning to create some for the post kinds I use to better automate my post process. After dragging my feet for ages, particularly because my JavaScript skills are nearly non-existent, I’ve finally gotten around to adapting the common WordPress “Press This” bookmarklet to work with Post Kinds.

Below is the modified code that can be put into a bookmarklet to allow for easily bookmarking a particular post:

javascript:(function(a,b,c,d){function e(a,c){if("undefined"!=typeof c){var d=b.createElement("input");d.name=a,d.value=c,d.type="hidden",p.appendChild(d)}}var f,g,h,i,j,k,l,m,n,o=a.encodeURIComponent,p=b.createElement("form"),q=b.getElementsByTagName("head")[0],r="_press_this_app",s=!0;if(d){if(!c.match(/^https?:/))return void(top.location.href=d);if(d+="&kindurl="+o(c),c.match(/^https:/)&&d.match(/^http:/)&&(s=!1),a.getSelection?h=a.getSelection()+"":b.getSelection?h=b.getSelection()+"":b.selection&&(h=b.selection.createRange().text||""),d+="&buster="+(new Date).getTime(),s||(b.title&&(d+="&t="+o(b.title.substr(0,256))),h&&(d+="&s="+o(h.substr(0,512)))),f=a.outerWidth||b.documentElement.clientWidth||600,g=a.outerHeight||b.documentElement.clientHeight||700,f=800>f||f>5e3?600:.7*f,g=800>g||g>3e3?700:.9*g,!s)return void a.open(d,r,"location,resizable,scrollbars,width="+f+",height="+g);(c.match(/\/\/(www|m)\.youtube\.com\/watch/)||c.match(/\/\/vimeo\.com\/(.+\/)?([\d]+)$/)||c.match(/\/\/(www\.)?dailymotion\.com\/video\/.+$/)||c.match(/\/\/soundcloud\.com\/.+$/)||c.match(/\/\/twitter\.com\/[^\/]+\/status\/[\d]+$/)||c.match(/\/\/vine\.co\/v\/[^\/]+/))&&e("_embeds[]",c),i=q.getElementsByTagName("meta")||[];for(var t=0;t<i.length&&!(t>200);t++){var u=i[t],v=u.getAttribute("name"),w=u.getAttribute("property"),x=u.getAttribute("content");x&&(v?e("_meta["+v+"]",x):w&&e("_meta["+w+"]",x))}j=q.getElementsByTagName("link")||[];for(var y=0;y<j.length&&!(y>=50);y++){var z=j[y],A=z.getAttribute("rel");("canonical"===A||"icon"===A||"shortlink"===A)&&e("_links["+A+"]",z.getAttribute("href"))}b.body.getElementsByClassName&&(k=b.body.getElementsByClassName("hfeed")[0]),k=b.getElementById("content")||k||b.body,l=k.getElementsByTagName("img")||[];for(var B=0;B<l.length&&!(B>=100);B++)n=l[B],n.src.indexOf("avatar")>-1||n.className.indexOf("avatar")>-1||n.width&&n.width<256||n.height&&n.height<128||e("_images[]",n.src);m=b.body.getElementsByTagName("iframe")||[];for(var C=0;C<m.length&&!(C>=50);C++)e("_embeds[]",m[C].src);b.title&&e("t",b.title),h&&e("s",h),p.setAttribute("method","POST"),p.setAttribute("action",d),p.setAttribute("target",r),p.setAttribute("style","display: none;"),a.open("about:blank",r,"location,resizable,scrollbars,width="+f+",height="+g),b.body.appendChild(p),p.submit()}})(window,document,top.location.href,"http:\/\/example.com\/wp-admin\/post-new.php?kind=bookmark");
Browser bookmarklets for Post Kinds

Other versions of the bookmarks can easily be made for all the other other Post Kinds by replacing the two red highlighted portions of the code sample appropriately for each one. Specifically one should exchange bookmark with the name of the kind desired (all of them should be in lowercase) and replace example.com with one’s own domain name.

For simplicity, I’m including a sample/template bookmarklet button below which can be dragged and dropped into most browser bars. Before using it, edit the JavaScript as described above and paste it into the URL box. I’m happy to help those who may have problems. I’ve included a screen capture of what all of them look like once they’re set up and configured with matching emoji added into the titles to assist in visual selection.

🔖 Bookmark

Perhaps I (or someone else enterprising) would contribute all this back into the plugin repository for Post Kinds so that these bookmarklets would be self-generated for plug and play usage within the admin interface for the plugin the way the bookmarklets are for the IndieWeb plugin’s PressThis bookmarklets, perhaps at /wp-admin/admin.php?page=kind_options.

A Post Kinds “Bookmarklet” for Mobile

For those who would like something similar to the above for use on mobile platforms (and particularly Android) I’ve written up some instructions below which allow one to use the Android app URL Forwarder to use the ubiquitous mobile “share” functionality from most pages and/or apps in a way similar to this bookmarklet functionality. (This is based in part on some work by Ryan Barrett and some work I’d written up for the Known CMS a while back.)

I’d suspect that there’s also a similar app for iOS, but I haven’t checked. If not available, URL Forwarder is open source on Github and could potentially be ported. There’s also a similar Android app called Bookmarklet Free which could be used instead of URL Forwarder.

Configuring URL Forwarder for Post Kinds

  1. Open URL Forwarder on your phone
  2. Click the “+” button to create a filter.
  3. Give the filter a name, “Bookmark” for the bookmark version. (See photo below.)
  4. Use the following entry for the “Filter URL” replacing example.com with your site’s domain name: http://EXAMPLE.com/wp-admin/post-new.php?kind=bookmark&kindurl=@url
  5. Leave the “Replaceable text” as “@url”
  6. Finish by clicking on the checkmark in the top right corner.
  7. Repeat the above for the other desired post types but replacing “bookmark” with the lower case names of those other types.

Simple right?

Creating a post via mobile

With the configuration above set up, do the following:

  1. On the mobile page one wants to bookmark, like, favorite, etc., click the ubiquitous “share this” mobile icon (or share via a pull down menu, depending on your mobile browser or other app.)
  2. Choose to share through URL Forwarder
  3. Click on the “bookmark” option just created above (or other option as necessary for the desired post type).
  4. Change/modify any meta data within your website administrative interface or add any additional thoughts and publish. (This part is the same as one would experience using the desktop bookmarklet.)

Happy posting!

PressForward as an IndieWeb WordPress-based RSS Feed Reader & Pocket/Instapaper Replacement

As many know, for the past 6 months or so, I’ve been slowly improving some of the IndieWeb tools and workflow I use to own what I’m reading both online and in physical print as well as status updates indicating those things. [1][2][3]

Since just before IndieWebCamp LA, I’ve been working on better ways to own the articles I’ve been reading and syndicate/share them out to other social platforms. The concept initially started out as a simple linkblog idea and has continually been growing, particularly with influence from my attendance of the Dodging the Memory Hole 2016: Saving Online News conference at UCLA in October. Around that same time, it was announced that Pinterest was purchasing Instapaper and they were shutting down some of Instapaper’s development and functionality. I’ve been primarily using Pocket for several years now and have desperately wanted to bring that functionality into my own site. I had also been looking at the self-hostable Wallabag alternative which is under heavy active development, but since most of my site is built on WordPress, I really preferred having a solution that integrated better into that as a workflow.

Enter PressForward

I’ve been looking closely at PressForward for the past week and change as a self-contained replacement for third party services like Pocket and Instapaper. I’ve been looking around for this type of self-hosted functionality for a while.

PressForward was originally intended for journalists and news organizations to aggregate new content, add it to their newsroom workflow, and then use it to publish new content. From what I can see it’s also got a nice following in academia as a tool for aggregating content for researchers focused on a particular area.

It only took a minute or two of looking at PressForward to realize that it had another off-label use case: as a spectacular replacement for read-later type apps!

In an IndieWeb fashion, this fantastic WordPress plugin allows me to easily own private bookmarks of things I’d like to read (PressForward calles these “Nominations” in keeping with its original use case). I can then later read them on my own website (with Mercury f.k.a Readability functionality built in), add commentary, and publish them as a read post. [Note: To my knowledge the creators of PressForward are unaware of the IndieWeb concept or philosophies.]

After some playing around for a bit and contemplating several variations, configurations, and options, I thought I’d share some thoughts about it for others considering using it in such an off-label manner. Hopefully these may also spur the developers to open up their initial concept to a broader audience as it seems very well designed and logically laid out.

Examples

The developers obviously know the value of dogfooding as at least two of them are using it in a Pocket-like fashion (as they many not have other direct use-cases).

Pros

PressForward includes a beautiful, full built-in RSS Feed Reader!

This feature alone is enough to recommend using it even without any other feature. I’ve tried Orbit Reader and WhisperFollow (among others) which are both interesting in their own rights but are somewhat limited and have relatively clunky interfaces. The best part of WhisperFollow’s premise is that it has webactions built in, but I suspect these could easily be added onto PressForward.

In fact, not just hours before I’d discovered PressFoward, I’d made this comment on the WordPress Reader Refresh post announcing the refresh of WordPress.com’s own (separate) reader:

Some nice visual changes in this iteration. Makes it one of the most visually pretty feed readers out there now while still maintaining a relatively light weight.

I still wish there were more functionality pieces built into it like the indie-reader Woodwind.xyz or even Feedly. While WordPress in some sense is more creator oriented than consumption oriented, I still think that not having a more closely integrated reader built into it is still a drawback to the overall WordPress platform.

Additionally,

  • It’s IndieWeb and POSSE friendly
  • It does automatic link forwarding in a flexible/responsible manner with canonical URLs
  • Allows for proper attributions for the original author and content source/news outlet
  • Keeps lots of metadata for analyzing reading behavior
  • Taggable and categorizable
  • Allows for comments/commenting
  • Could be used for creating a linkblog on steroids
  • Archives the original article on the day it was read.
  • Is searchable
  • Could be used for collaboration and curation
  • Has Mercury (formerly known as Readability) integrated for a cleaner reading interface
  • Has a pre-configured browser bookmarklet
  • Is open source and incredibly well documented
  • One can count clicks to ones’ own site as the referer while still pushing the reader to the original
  • Along with other plugins like JetPack’s Publicize or Social Networks Auto-Poster, one can automatically share their reads to Twitter, Facebook, or other social media silos. In this case, you own the link, but the original publisher also gets the traffic.

Cons

No clear path for nominating articles on mobile.

This can be a dealbreaker for some, so I’ve outlined a pretty quick and simple solution below.

No direct statistics

Statistics for gauging ones’ reading aren’t built in directly (yet?), but some scripts are available. [4][5][6]

No larger data aggregation

Services like Pocket are able to aggregate the data of thousands of users to recommend and reveal articles I might also like. Sadly this self-hosted concept makes it difficult (or impossible) do have this type of functionality. However, I usually have far too much good stuff to read anyway, so maybe this isn’t such a loss.

Suggested Improvements

Adding the ability to do webactions directly from the “Nominated” screen would be fantastic, particularly for the RSS reader portion.

Default to an unread view of the current “All Content” page. I find that I have to filter the view every time I visit the page to make it usable. I suspect this would be a better default for most newsrooms too.

It would be nice to have a pre-configured archive template page in a simple linkblog format that filters posts that were nominated/drafted/published via the Plugin. This will prevent users from needing to create one that’s compatible with their current theme. Something with a date read, Title linked to the original, Author, and Source attribution could be useful for many users.

A PressForward Nomination “Bookmarklet” for Mobile

One of the big issues I came up against immediately with PressForward is ease of use on mobile. A lot of the content I read is on mobile, so being able to bookmark (nominate) articles via mobile or apps like Nuzzel or Twitter is very important. I suspect this may also be the case for many of their current user base.

Earlier this year I came across a great little Android mobile app called URL Forwarder which can be used to share things with the ubiquitous mobile sharing icons. Essentially one can use it to share the URL of the mobile page one is on to a mobile Nomination form within PressForward.

I’d suspect that there’s also a similar app for iOS, but I haven’t checked. If not available, URL Forwarder is open source on Github and could potentially be ported. There’s also a similar Android app called Bookmarklet Free which could be used instead of URL Forwarder.

PressForward’s built in bookmarklet kindly has a pre-configured URL for creating nominations, so it’s a simple case of configuring it. These details follow below for those interested.

Configuring URL Forwarder for PressForward

  1. Open URL Forwarder
  2. Click the “+” icon to create a filter.
  3. Give the filter a name, “Nominate This” is a reasonable suggestion. (See photo below.)
  4. Use the following entry for the “Filter URL” replacing example.com with your site’s domain name: http://example.com/wp-content/plugins/pressforward/includes/nomthis/nominate-this.php?u=@url
  5. Leave the “Replaceable text” as “@url”
  6. Finish by clicking on the checkmark in the top right corner.

Simple right?

Nominating a post via mobile

With the configuration above set up, do the following:

  1. On the mobile page one wants to nominate, click the ubiquitous “share this” mobile icon (or share via a pull down menu, depending on your mobile browser or other app.)
  2. Choose to share through URL Forwarder
  3. Click on the “Nominate” option just created above.
  4. Change/modify any data within your website administrative interface and either nominate or post as a draft. (This part is the same as one would experience using the desktop bookmarklet.)

What’s next?

Given the data intensity of both the feed reader and what portends to be years of article data, I’m left with the question of hosting it within my primary site or putting it on a subdomain?

I desperately want to keep it on the main site, but perhaps hosting it on a subdomain, similar to how both Aram Zucker-Scharff and James Digioia do it may be better advised?

I’ve also run across an issue with the automatic redirect which needs some troubleshooting as well. Hopefully this will be cleared up quickly and we’ll be off to the races.

References

[1]
C. Aldrich, “A New Reading Post-type for Bookmarking and Reading Workflow,” BoffoSocko | Musings of a Modern Day Cyberneticist, 22-Aug-2016. [Online]. Available: http://boffosocko.com/2016/08/22/a-new-reading-post-type-for-bookmarking-and-reading-workflow/. [Accessed: 31-Dec-2016]
[2]
C. Aldrich, “Owning my Online Reading Status Updates,” BoffoSocko | Musings of a Modern Day Cyberneticist, 20-Nov-2016. [Online]. Available: http://boffosocko.com/2016/11/20/owning-my-online-reading-status-updates/. [Accessed: 31-Dec-2016]
[3]
C. Aldrich, “Notes, Highlights, and Marginalia from E-books to Online,” BoffoSocko | Musings of a Modern Day Cyberneticist, 24-Oct-2016. [Online]. Available: http://boffosocko.com/2016/10/24/notes-highlights-and-marginalia/. [Accessed: 31-Dec-2016]
[4]
A. Zucker-Scharff, “Personal Statistics from 3 Months of Internet Reading,” Medium, 05-Sep-2015. [Online]. Available: https://medium.com/@aramzs/3-month-internet-reading-stats-f41fa15d63f0#.dez80up7y. [Accessed: 31-Dec-2016]
[5]
A. Zucker-Scharff, “Test functions based on PF stats for collecting data,” Gist. [Online]. Available: https://gist.github.com/AramZS/d10fe64dc33fc9ffc2d8. [Accessed: 31-Dec-2016]
[6]
A. Zucker-Scharff, “PressForward/pf_stats,” GitHub. [Online]. Available: https://github.com/PressForward/pf_stats. [Accessed: 31-Dec-2016]