Sunday, February 13, 2011

Bookmarklets for Mobile Devices

I read a lot of news and like to share a lot of it with friends, family, and professional networks using various services on the web. The easiest way for me to collect, consume, and distribute this content is through social media services such as Google Reader, Twitter, Facebook, and Email. 

I'm also always on the go, and it's increasingly rare that I can devote enough time during the week in front of a traditional computer or laptop to read all the news, information, and stay up to date as much as I want to. Therefore, it's an easy investment for me to own a smartphone to consume content whenever I have a minute or two of downtime. This makes information consumption much easier and fits better into my schedule. I also recently purchased a tablet to fill the intermediate gap when the screen size of a smartphone just isn't suitable for some content, but a tablet is still portable enough to carry with me most of the time. 

However, transitioning from a full web browser (Chrome is my preference) on a laptop, to a mobile browser (Safari on my iPhone/iPad), has caused some challenges. Normally, I find quite a bit of content that is shared by others through any one of the aforementioned services, which I want to subsequently re-share or post to my social networks. In Chrome, I use Bookmarklets to accomplish this task. Bookmarklets are simply small bookmarks comprised of javascript code that performs a specific function with the content in the current browser window. For instance, the Google Reader bookmarklet allows adding, sharing and note creation of items into your Google Reader feed.

Many of these bookmarklets are provided as links in webpages, allowing full browsers such as Chrome to easily drag and drop the link into the bookmark panel. However, mobile Safari does not allow direct bookmarking or copy/paste of these javascript links.

Therefore, I have copied out the javascript contents of these links in order to install these bookmarklets in mobile Safari. The process is fairly simple:
  1. Copy the bookmarklet URL javascript contents from a desktop browser (or use my favorites listed below)
  2. Email the contents to yourself
  3. Open the email on your mobile device
  4. Copy the javascript content from the email
  5. Open mobile Safari
  6. Create a new bookmark while on any page
  7. Edit the bookmark, name it appropriate to the service, and paste in the javascript in the "Address" section
Now, when you're browsing any content that you want to share, click the appropriate bookmarklet from the bookmark menu and the service will prompt you to edit/send the item.

Here are some of my favorite bookmarklets:

Hootsuite Post
javascript:var d=document,w=window,f='http://hootsuite.com/twitter/bookmark-tool-v2?',l=d.location,e=encodeURIComponent,p='address='+e(l.href)+'&title='+e(d.title),u=f+p;a=function(){if(!w.open(u,'t','scrollbars=0,toolbar=0,location=0,resizable=0,status=0,width=550,height=330'))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else a();void(0);

Hootsuite Post (launch iOS application)
javascript:location='owly://'+location;

Google Reader Note
javascript:var b=document.body;var GR________bookmarklet_domain='http://www.google.com';if(b&&!document.xmlVersion){void(z=document.createElement('script'));void(z.src='http://www.google.com/reader/ui/link-bookmarklet.js');void(b.appendChild(z));}else{}

Instapaper Note
javascript:function iprl5(){var d=document,z=d.createElement('scr'+'ipt'),b=d.body,l=d.location;try{if(!b)throw(0);d.title='(Saving...) '+d.title;z.setAttribute('src',l.protocol+'//www.instapaper.com/j/890WCIa1VUrN?u='+encodeURIComponent(l.href)+'&t='+(new Date().getTime()));b.appendChild(z);}catch(e){alert('Please wait until the page has loaded.');}}iprl5();void(0)

Facebook Post
javascript:var d=document,f='http://www.facebook.com/share',l=d.location,e=encodeURIComponent,p='.php?src=bm&v=4&i=1265501632&u='+e(l.href)+'&t='+e(d.title);1;try{if (!/^(.*\.)?facebook\.[^.]*$/.test(l.host))throw(0);share_internal_bookmarklet(p)}catch(z) {a=function() {if (!window.open(f+'r'+p,'sharer','toolbar=0,status=0,resizable=1,width=626,height=436'))l.href=f+p};if (/Firefox/.test(navigator.userAgent))setTimeout(a,0);else{a()}}void(0)

Gmail Message
javascript:popw='';Q='';x=document;y=window;if(x.selection) {Q=x.selection.createRange().text;} else if (y.getSelection) {Q=y.getSelection();} else if (x.getSelection) {Q=x.getSelection();}popw = y.open('https://mail.google.com/mail/?view=cm&fs=1&tf=1&to=&su=' + escape(document.title) + '&body=' + escape(Q) + escape('\n') + escape(location.href) + '&zx=RANDOMCRAP&shva=1&disablechatbrowsercheck=1&ui=1','gmailForm','scrollbars=yes,width=680,height=510,top=175,left=75,status=no,resizable=yes');if (!document.all) T = setTimeout('popw.focus()',50);void(0);

Cheers,
Andrew

1 comment:

  1. You can also use iCloud to help you transfer the bookmarklets from your Mac to your iOS devices. Note that iCloud should be enabled on both devices.

    ReplyDelete