Bookmarklets

From Ben Gross:

I regularly share links with friends and colleagues. I use several social bookmarking services, but the vast majority I share via email. Firefox, Safari, and Internet Explorer all offer all in support for emailing links from the browser. The disadvantage sending links using the built-in browser methods is that the links are often prone to breaking or require that the message be converted to HTML rather than plain text.

I prefer a Javascript bookmarklet for emailing links. Bookmarklets are bits of Javascript saved as a bookmarks in a browser that act like simple browser plugins. The page How To Make a Bookmarklet For Your Web Application on the BetterExplained site is an excellent introduction. Opera and Google Chrome browsers do not currently have the email a link functionality so a bookmarklet is your only option. I think the bookmarklet I created is an improvement over the built-in browser methods and other similar bookmarklets I’ve seen.

javascript:location.href='mailto:?SUBJECT='+encodeURIComponent(document.title)+'&BODY='+encodeURIComponent(document.title)+encodeURIComponent('\n%3C'+location.href+'%3E')
To use this bookmarklet yourself, simply drag the following link to your bookmark bar. Email Link

The most common built-in method offered by browsers is to create a new email message with the document title in the subject and the link in the body. Most email clients will recognize these links as URLs and turn them into clickable links that you can open in your browser. There are several problems with the built in methods for emailing links.

The first problem is that the algorithms that recognize the URLs do not always recognize valid URLs or may only partially recognize the URL leaving you with a broken link. In these cases you have to copy the URL from your email client and paste it into your browser. Certainly not a difficult or time consuming task, but often it adds just enough effort where people may not get around to clicking the link and if the URL was recognized incorrectly they may simply think it is broken.

The second problem is that if a URL is long the email client may wrap the the line with the URL. There are several ways that email clients wrap long lines and conflicts arise periodically between different email client line wrapping styles. When links with URLs are wrapped this creates additional complexity for the receiving email client to correctly parse the URL and increases the chance of failure. Dan’s Mail Format Site has a nice format of the issues in his article on Body: Line Length.

Safari, works around both of these problems by creating a rich text email message and turns the URL into a real hypertext link so that the recipients email client does not need to parse the text to turn the link into an active URL as it is already correctly formatted. Safari and Internet Explorer also both offer the option to email an entire webpage and the browser simply makes a copy of the HTML for the webpage and places it in an email message. This method also works around the problems of URLs being incorrectly recognized or poorly wrapped. I generally avoid emailing entire web pages as most mail clients parse a very restrictive subset of HTML to reduce security vulnerabilities.

The solution I use personally is to wrap all links in angle brackets < >, which most allows the majority of email clients to correctly interpret complex and wrapped URLs. The World Wide Web Consortium (W3C) also recommends this method in Wrappers for URIs in plain text as does RFC2396 Uniform Resource Identifiers (URI): Generic Syntax which defines the modern URL.

There are a number bookmarklets to email a link floating around. Typically, they replicated the basic browser functionality built into browsers where they put the document title in the subject line and the URL in the body. This means that the bookmarklets have all the limitation of the browser functionality. Additionally, URLs with ampersands and some other meta characters may cause the bookmarklet to fail or truncate the titles.

My modified bookmarklet includes the document title in subject and the document title, a carriage return, and the the URL in in the body. The URL is wrapped in angle brackets so that most email clients will recognize it correctly even if it is complicated or wrapped. I use the Javascript function encodeURIComponent to protect page titles from ampersands and other characters breaking them. The standard escaped versions of newline and carriage return do not work so I use the \n version.