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");

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?

Configuring URL Forwarder

To bookmark a page, use the share icon and choose the URL Forwarder app

Select the appropriate option from the menu based on the site and post type you want to create. (You can set things up for multiple sites!)

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!