So you may or may not have heard about some of the great features coming out in Internet explorer 9. One of these new features that many developers will be interested in, is Pinned Sites. Although some of you may be a little upset by Microsoft’s decision to deviate from web standards once again, others may like the added functionality this allows you to provide your users – either way let’s take a look.

The first things you want to do is take a look at the Microsoft IE 9 release page for details.

Meta-data configuration

So the first things you’ll want to do is set up your site with all the needed meta data that Internet Explorer will associate with your sites icon, and pinned options, whenever it is pinned to the task bar. Below are all the tags on offer and a brief descriptions.

<!-- The of the shortcut that your site will have -->
<meta name="application-name" content="Diary of a Ninja" />
<!-- the text displayed if a user hovers their cursor over your shortcut (optional) -->
<meta name="msapplication-tooltip" content="Web developer tips & tricks" />
<!-- the start url to launch from the shortcut - this page is not used -->
<meta name="msapplication-starturl" content="http://www.diaryofaninja.com" />
<!-- any named or hex colour - colours the forward and back buttons of the browser -->
<meta name="msapplication-navbutton-color" content="Red" />
<!-- the size of the window to launch - min 800*600 -->
<meta name="msapplication-window" content="width=800;height=600" />
<!-- the shortcut icon for your pinned site-->
<LINK rel="shortcut icon" type=image/x-icon href="http://host/favicon.ico">

Pinned List

Once a user has pinned your site to their task bar, they can then view a pinned list on your sites pinned icon just like they can on other applications that have jump lists.

You are able to customise this list and fill it with custom items simply by adding meta tags to your page.

<meta name="msapplication-task" content="name=Task 1;action-uri=http://diaryofaninja.com;icon-uri=http://diaryofaninja.com/icon1.ico"/>
<meta name="msapplication-task" content="name=Task 2;action-uri=http://diaryofaninja.com/task2;icon-uri=http://diaryofaninja.com/icon2.ico"/>

You can have up to 20 Tasks, after that they are ignored.

JavaScript interaction

When a site is open, there are many things you can interract with the pinned list simply by using JavaScript.

The first thing you can do is actually allow users to add your site to their start menu through JavaScript – just like those annoying links you used to find around the place that add your site to their favourites. You’ll now be able to annoy your users in new and exciting ways.

<a onclick="window.external.msAddSiteMode();" href="#">Add website to start menu</a>

You can check if your site is open as a pinned site.

<script>
try {
    if (window.external.msIsSiteMode()) {
        alert("The site is running as a pinned site");
    }
}
catch(ex) {
        alert("This browser doesn't support pinned site mode");
    return;
}
</script>

You can also create categorized lists on the fly using JavaScript.

<script type="text/javascript">
// You must call this at least once
window.external.msSiteModeCreateJumplist('Tasks');
//then call this for each list item
window.external.msSiteModeAddJumpListItem('Take out laundry', 'task1.htm', 'images/item1.ico');
window.external.msSiteModeAddJumpListItem('Check my mail', 'task2.htm', 'images/item2.ico');
window.external.msSiteModeCreateJumplist('Personal');
window.external.msSiteModeAddJumpListItem('Change my user details', 'user.htm', 'images/item3.ico');
window.external.msSiteModeAddJumpListItem('Change password', 'pass.htm', 'images/item4.ico');
window.external.msSiteModeAddJumpListItem('Logout', 'logout.aspx', 'images/item5.ico');
//display the list
window.external.msSiteModeShowJumplist();
</script>

You can also clear the list easily:

<script type="text/javascript">
    window.external.msSiteModeClearJumplist();
</script>

Draw attention to your icon

You can also draw attention to your pinned site by making it’s icon flash. There are a number of times this might be a great featured to have – I'm pretty sure this is why Facebook chat has already implemented it.

<script type="text/javascript">
    window.external.msSiteModeActivate();
</script>

Add an overlay to your icon

When a user pins your site to their task bar, you can also add an extra overlay to your sites icon. This would allow you to add badges to show changes in the site such as alerts or unread messages etc.

<script type="text/javascript">
// clear any current overlays
window.external.msSiteModeClearIconOverlay();
// add a new overlay
window.external.msSiteModeSetIconOverlay('http://host/overlay1.ico', 'My first overlay');    
</script>

Summary

As you can see there is a lot of room for exciting new possibilities that these additions can give your site. As time goes on the line between website and native application becomes more and more grey. Google’s Chrome, Firefox and now after wandering alone in the dark for a while, Internet Explorer.

If you want to see more documentation on the above features, feel free to check out Microsoft’s MSDN site here.