Scribz.net™ has been using Internet Explorer 9′s Pinned Site capabilities for a long time, especially the Jump List features. And why not – they are so easy to implement and quite well-documented (see the Jump List documentation on MSDN). The basic functionality can be achieved by adding but a few meta-tags into the head of your page and you’re set. It actually takes more time to stitch together the page icons than to make your site IE9 ready.
Basic Setup
The following meta tags set the basic icon and text properties of your pinned site:
<meta name="application-name" content="Example Web Application"/> <meta name="msapplication-tooltip" content="Start Example.com in Site Mode"/> <meta name="msapplication-starturl" content=http://example.com/index.html/> <meta name="msapplication-window" content="width=800;height=600"/> <meta name="msapplication-navbutton-color" content="#77FF33"/>
You can read about the details for each item in the MSDN article linked above. Also please note that the msapplication-tooltip only shows when the user hovers over your application’s icon in the Start menu. I haven’t ever seen it pop up above the pinned Taskbar icon.
You can easily input any Unicode and international characters into the application-name and msapplication-tooltip content attribute by using HTML entities. Will this work for the msapplication-task meta tag, though?
Extra Jump List Tasks
The msapplication-task meta tag adds an item to the Jump List and looks like this:
<meta name="msapplication-task" content="name=Do something special; action-uri=/specialty.html?t=some_text; icon-uri=/specialty.ico" />
This tag groups all the information about a Jump List item separated by a ; (semicolon) in a single content attribute. HTML entities are also always ended with a semicolon. The nice thing is that you CAN actually include HTML entities in the information as such:
<meta name="msapplication-task" content="name=Some <©RAZY> title™ by Ռուբեն; action-uri=/specialty.html?t=some%20text; icon-uri=/specialty.ico" />
And Internet Explorer 9 will parse these meta tags properly! As you can see, I used textual HTML entities (< and ©), non-standard ASCII characters (™), and even HTML reserved characters (>). In addition, I used hexadecimal codes for double-byte Unicode characters from the Armenian alphabet (Ռուբեն). The only printable characters which you cannot use directly are actually the double quote (“) and a lone semicolon (;) because the former would close the string and the latter would indicate the end of a parameter. This is very liberal on the part of Microsoft, especially the fact that semicolons pertaining to HTML entities do not get confused with delimiters. I believe that the reason for such a lenient policy is the fact that the text is displayed in the Windows user interface as plain text. It does not render, so HTML tags or scripts have no effect.
Even thou you can include reserved characters (such as < or > or &), you should always avoid doing so. Using “naked” HTML delimiters in inappropriate places in your code will fail to validate against HTML and XHTML document standards and may yield unpredictable results in browsers other than IE9.
Always encode reserved characters used for presentation in your webpages!
Keep in mind that you cannot use URL encoding (such as %20 for a space) in the name attribute because it will not resolve. On the contrary, it will be preserved verbatim so that you can put any valid link into the action-uri parameter. You can see that I added an encoded space to the link’s query string.
By the way, the result of the above code will be a Jump List item with the title of
Some <©RAZY> title™ by Ռուբեն
and will link to
specialty.html?t=some%20text
in the root of your server (since I used a relative path). You can, of course, use absolute paths linking anywhere on the web starting with “http://” or even a “mailto:“.
Oh, and before you roll out with your pin-able site, don’t forget to stuff higher resolution images into your favicon for prettiness!
Cheers!
Comments (0)