Aaronblog

Adding support for IE9's pinned site features

Update: Microsoft has made a website of their own website guiding you through the process with a wizard. Now for Windows 8 live tiles too.

Only a week ago Microsoft released a public beta for the latest instalment in their line of browsers, Internet Explorer 9.

Even though I'm mostly a Linux user, I've been following the development of IE9 with a keen eye. Along with the eagerly anticipated support for most of the HTML5 and CSS3 goodness, one of the features that caught my eye, is the ability to easily pin sites to Windows 7's taskbar, along with the ability to add items to it.

Now, having been through development hell in older versions of Internet Explorer numerous times myself, I looked into how this peculiar feature can be implemented in a website. Admittedly somewhat surprisingly, it can be done in a very easy and non-obtrusive way.

Making your site pinnable

While technically your site may already be pinnable, there's quite a few useful meta tags you can use to customise the appearance of the task bar icon. I'll list them below.

<!-- The icon used to display the pinned site. -->
<link rel="shortcut icon" type="image/x-icon" href="http://domain.tld/favicon.ico">
<!-- The default name of the shortcut. -->
<meta name="application-name" content="My Amazing Website">
<!-- The text displayed when a user points their cursor to your shortcut. -->
<meta name="msapplication-tooltip" content="Interesting Everyday Life Stories by John Smith.">
<!-- The url to launch from the shortcut. -->
<meta name="msapplication-starturl" content="http://domain.tld/">
<!-- Size of the window as it appears on launch. -->
<meta name="msapplication-window" content="width=800;height=600">
<!-- A colour (hexadecimal or named) used to add colour to the forward and back buttons of the browser. If omitted, the predominant hue of the shortcut icon will be used. -->
<meta name="msapplication-navbutton-color" content="#eee">

That wasn't too hard, was it? But wait, there's more. Remember those JavaScript links that made your browser prompt you to add a website to your favourites? Well, you can now do this for pins, too. Here's how:

<a onclick="window.external.msAddSiteMode();" href="#">Click me to add me!</a>

As always, it should be noted that an event-based DOM solution is preferred here, but for the purpose of example, this suffices.

On a similar note, you may want to detect whether the site is currently running as a pinned item. For this purpose, Microsoft has introduced the JavaScript function window.external.msIsSiteMode. As this function is (currently) only supported by IE9, you'll want to use a try-catch statement (or similar) to use it:

try {
    if (window.external.msIsSiteMode()) {
        alert("This site is currently running as a pinned site.");
    }
    else {
        alert("This site is just running in browser mode.");
    }
}
catch (exception) {
    alert("This browser doesn't support pinned site mode.");
}

Adding tasks (items) to the pin's menu

Adding a task to the menu of a pinned item isn't all that complicated either:

<meta name="msapplication-task" content="name=My Blog;action-uri=http://domain.tld/blog/;icon-uri=http://domain.tld/blog/icon.ico">
<meta name="msapplication-task" content="name=My Pictures;action-uri=http://domain.tld/gallery/;icon-uri=http://domain.tld/gallery/icon.ico">

Again, not too hard, eh? You can add up to 20 items. If you exceed this limit, the remainder will be ignored.

Making dynamic lists

So, what if you have a site of a very dynamic nature and want the task list to reflect this? That's where some JavaScript kicks in. We need to add a category for our items before we can add them, but this process is quite straightforward:

window.external.msSiteModeCreateJumplist('List1');
window.external.msSiteModeAddJumpListItem('Item 1', 'http://domain.tld/Item1.html', 'http://domain.tld/images/item1.ico');
window.external.msSiteModeAddJumpListItem('Item 2', 'http://domain.tld/Item2.html', 'http://domain.tld/images/item2.ico');
window.external.msSiteModeAddJumpListItem('Item 3', 'http://domain.tld/Item3.html', 'http://domain.tld/images/item3.ico');

For a much more complete list of features and syntax, including details on overlay buttons, I suggest you read this article on MSDN.

Thanks for reading! Please leave a message if this post has helped you.