Thursday, September 16, 2010

How to customize your website’s JumpList for IE9 site pinning

One of the killer feature of Internet Explorer 9 is website pinning. You can drag the favicon of any site from IE9’s address bar and drop it on Windows 7’s taskbar to pin it, just like you pin other applications. The common usage scenario will be to pin your favorite websites so that you can visit them any time with a click. But pinned websites are more than just taskbar bookmarks. A pinned site can behave like a desktop application with its own JumpList and icons. Better still – Microsoft allows website owners to customize how their Jumplist will look when pinned to the taskbar.

First, let us look how I have customized the JumpList for Instant Fundas.

ie9-instantfundas-jumplist

If you own a blog or a website, you can do this to your blog too by adding a few lines of code. Let’s find out how.

Get a favicon

If you don’t have a favicon for your website, it’s time to get one. The favicon is displayed next to the address bar in your browser and this is the same favicon that will appear when a visitor pins your site to their taskbar. Although favicons can be both images (GIF/PNG/JPEG) as well as Windows icon (ICO), only the ICO format is supported on pinned websites. If you use an image favicon on your site, it will not appear in the taskbar and get replaced by the default IE icon.

So the first step will be to get a ICO based favicon. You can convert your existing favicon to ICO bu using this online service. You can use either a 16x16 or 32x32 favicon. If you use 16x16 sized icons these will appear stretched in the taskbar, as the default taskbar icon size is 32x32. To avoid this Microsoft recommends 32x32 or even 48x48 sized favicon.

Create the JumpList

The JumpList for your website can be customized by the inclusion of a bunch of meta tags on your website’s code. These tags will determine how your site’s JumpList appears in the taskbar. There are several different meta tags that you can add.

First is application-name. This tag specifies your pinned app's name. Example:

<meta name="application-name" content="Instant Fundas" />

Then comes the msapplication-tooltip, which defines the mouse-over tooltip message. Example:

<meta name="msapplication-tooltip" content="Instant Fundas - All Things Technology And More" />

Next up are a number of msapplication-task each of which define a command that appears under ‘Tasks’. You can add up to 5 tasks for your website. Example:

<meta name="msapplication-task" content="name=Latest Freeware;action-uri=http://www.instantfundas.com/search/label/Software;icon-uri=http://cache2.instantfundas.com/icons/downloads.ico" />

<meta name="msapplication-task" content="name=Latest Web Apps;action-uri=http://www.instantfundas.com/search/label/Internet;icon-uri=http://cache2.instantfundas.com/icons/webapps.ico" />

<meta name="msapplication-task" content="name=Latest Tips;action-uri=http://www.instantfundas.com/search/label/Tutorials%20n%20Tips;icon-uri=http://cache2.instantfundas.com/icons/tips.ico" />

Next is msapplication-starturl. This value specifies the URL that opens when the pinned website is launched. If left blank, msapplication-starturl is going to be your website's root URL, but if you want a different landing page for your visitors, you are able to do that with this tag.

<meta name="msapplication-starturl" content="http://www.instantfundas.com/" />

Finally, there is msapplication-window tag which tells IE9 how big to make the browser window when it launches from the pinned application. Again this is optional.

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

That is all there is to do. Watch a demo by pinning this blog to your taskbar and right-click on it to see the JumpList. Then try this out on your own blog.

3 comments:

  1. Working here on www.geheee.com

    One thing though - I can't see to get the x64 version of IE9 to launch. Even if I pin the site from IE9 x64

    ReplyDelete
  2. Can't say about x64. I'm using the 32bit version.

    ReplyDelete
  3. Same for me on Win7 x64. Can't see neither a favicon, nor a task list menu.

    ReplyDelete

Popular Posts