Adding IE9 Site Pinning Support To Your Web Sites

Internet Explore 9 introduced a feature called “Site Pinning”. At first glance, you might think  site pinning allows uses to pin/dock a shortcut to a website and nothing else. However, it does a lot more. Site pining allows developers to add feature that make websites/web applications look and feel at bit more like regular native applications. With site pining you can easily add Windows 7 Jump List support for your sites. Here is a great video on Site Pinning for PDC2010

 Adding Jump List Support

Let’s take a quick look at how Facebook implemented this feature on their site. Viewing the source code of Facebook.com you would find the following code on the header:

<meta name="msapplication-task" content="name=News;action-uri=/home.php?sk=nf;icon-uri=/images/icons/app/news.ico"/>

<meta name="msapplication-task" content="name=Messages;action-uri=/home.php?sk=messages;icon-uri=/images/icons/app/messages.ico"/>

<meta name="msapplication-task" content="name=Events;action-uri=/home.php?sk=events;icon-uri=/images/icons/app/events.ico"/>

<meta name="msapplication-task" content="name=Friends;action-uri=/home.php?sk=fr;icon-uri=/images/icons/app/friends.ico"/>

Yup. That’s it. It’s that simple. The code above produces the following Jump List when you pin Facebook to your start menu. The magic is all in the content property. Name gives you the display name of the Jump List task. Action is the url the use will be taken too when they click on that task. The icon-url is nothing more than the favico that you see next to the task name.

You could also set the height and the width of the window that gets opened by the action.

<meta name="msapplication-window" content="width=800;height=600"/>

This literary took me about five minutes to do for SmallAndMighty.Net. Here is the code for that:

<meta name="msapplication-task" content="name=About; action-uri=http://smallandmighty.net/about-me/; icon-uri=favicon.ico"/>

<meta name="msapplication-task" content="name=Contact; action-uri=http://smallandmighty.net/contact-us/; icon-uri=favicon.ico" />

<meta name="msapplication-task" content="name=Events; action-uri=http://smallandmighty.net/events/; icon-uri=favicon.ico" />

<meta name="msapplication-task" content="name=Blog; action-uri=http://smallandmighty.net/blog/; icon-uri=favicon.ico" />

 
Pinning a Site

Pining a site is pretty easy to do. All you really need to do itsto click and hold on the site’s tab on IE9 as shown bellow.

Then simply drag the tab to the Windows 7 taskbar as shown bellow. That’s it. Nothing more to it.

Interacting With Content

Sometime we need more than a simple Jump List. For some sites, it could be very useful to allow the users to interact with the content of the site. Think of a site that allows users to play some sort of media. Allowing the users to control the media via the thumbnail bar would be a nice usability enhancement.

Internet Explorer 9 provides a simple API to control the thumbnail bar in Windows 7. To add this feature, simply follow these steps:

• Create an event handler for the msthumnailclick event  - document.addEventListener('msthumbnailclick', onThumbClicked, false);
• Add controls to the thumbnail session.  - var btnPlay = window.external.msSiteModeAddThumbBarButton(iconUri, toolTip);
• Now show the thumbnail bar - window.external.msSiteModeShowThumbBar();
• Create the button handler function - function onThumbClicked(e) { DoSomething();}

Full sample

• More samples
• User Experiences: Customizing Pinned Sites - IEBlog - Site Home - MSDN Blogs
• Pinned Sites: Windows 7 Desktop Integration with Internet Explorer 9