How to Add Jumplist items (Tasks and Custom Categories) to your website for IE9

Microsoft released the beta of the very popular web browser yesterday-new features abound, including streamlined design, enhanced tabs, and hardware acceleration. I’m still playing with it and so far impressed very much with the IE9.

We just covered an article, ”How to Pin websites to Taskbar and Start Menu with Internet Explorer 9 Beta” and you may have notice the pinned website (i.e. facebook.com) leverages new Windows 7 Taskbar Jumplist with new IE9 and offers useful Tasks. You can do the same for your website and can add useful Tasks and Custom Categories to your website or weblog.

Windows Valley and IE9
Its very easy way to go…
How To:
1. Lets start with website icon, your website should have favicon and it is advised to use a 32×32 icon as (favicon.ico) to get better appearance in Windows 7 Taskbar. To add favicon, Just copy your icon file at the root of your website add the following code in between <head></head> tag.

2. With the release of IE9 Beta, Microsoft has introduced some HTML meta tags, lets go one by one:

It has two attributes name and content. The name attribute must have the value “application-name” and the content attribute holds the name of the website that appears on the JumpList.

For example:

3. To add each Task to Jumplist, we need to add the following HTML meta tag, like I have added 4 tasks viz: Subscribe to RSS, Sign Up for Newsletter, Follow @windowsvalley and Became a fan on Facebook.

It also has two attributes name and content. The name attribute must have the value “msapplication-task” and the content attribute takes three string values as shown above format.

For example:

4. To Custom Categories we need to play with some sort of Javascript code and its easy. Have look…

Here I have just written a function called MyJumplist() and then call two built-in functions viz.

window.external.msSiteModeCreateJumplist(‘{Category-Name}’);
Takes a string argument, that is category name.
window.external.msSiteModeAddJumpListItem(‘{Item-Name}’, ‘{Action-URL}’,'{Icon-URL}’);
Takes 3 string arguments (just like msapplication-task meta tag) Jumplist item name, Action URL and Icon URL respectively.
window.external.msSiteModeShowJumplist();
It displays the Jumplist.

And finally call the our function MyJumplist() to execute the whole javascript code.

5. Add the following code to your HTML page in between <head></head> tag and Pin your website to Windows 7 Taskbar leveraging new IE9 feature.

Applies To:

Windows 7 with Internet Explorer 9

14 responses to “How to Add Jumplist items (Tasks and Custom Categories) to your website for IE9”

Leola Roberts

2011-01-15

My brother suggested I might like this blog. He was entirely right. This post truly made my day. You can not imagine just how much time I had spent for this information! Thanks!

Reply
Newsmaster

2010-12-04

ok how to edit the script should we save the webpage as .html file and edit it or is there any other ways.

Reply
Kuntal Gupta

2010-09-29

@adnan : Although I am not the Author , but I would Like to pass my 2 cents.
As per me , It is possible to create a Custom Jumplist and Sections and Other Controls IE9 can use .
One Idea is to use iFrame , That is we create a Custom HTML With Jumplist and all msapplication meta and load up a site in built in frame , and when you click the jumplist options the links will get update by reloading the page within the frame as per the URL.
There are few places this won’t work.Site using Kill Frame Code can kill the parent frame and reload itself , in those cases it won’t work , though this is a rare case :)

Reply
adnan

2010-09-29

i have a pretty big question. if theres a site that hasnt leverage jumplists yet, is there any way for me to create an html file that will open that site by default so that i can also add my jump list items to it?

what i essentially want is an html file which i can open from my machine. pin to the taskbar and have several jumplist options added to it. and where i set the default url start to be whatever site im trying to add my own jumplists to.

Reply
GreekSoft

2010-09-29

Wow! Thank you! I always wanted to write in my site something like that. Can I take part of your post to my blog?

Reply
1. rk
  
  2010-09-29
  
  Yes! you can… as per rules
Vasu Jain

2010-09-19

Worked great for me. WindowsVJ.com too is now IE9 ready. Thx for the stuff RK. :)

Reply
1. rk
  
  2010-09-20
  
  Your most welcome anytime… :)
vijay

2010-09-18

Thanks for u r information
its very useful

Reply
Kuntal Gupta

2010-09-18

Another Question If I may :)
Can we use different Icons for favicon (One for Browser Tab) One for Taskbar ? Because some 32×32(or 64×64) Icons look weird when squeezed to 16×16

Reply
1. Author
  
  2010-09-18
  
  I tried it but its not possible to have different icons. Still trying to dig it and will let you know if find any workaround.
Kuntal Gupta

2010-09-17

Oh , Nice then , I guess I didn’t saw because of the cached Jumplist :P

Thanks for the Feedback :)

Reply
Kuntal Gupta

2010-09-17

Does this seems ok ? –

I am applying it after the Custom IE9 Meta tags ends and before </head> ends , But it still isn’t showing up.

Can we put the JS Code anywhere but within the <Head> Tags ? Does it matter ?

Reply
1. Author
  
  2010-09-17
  
  Yes! You can put the JS code anywhere within tag. I just checked your blog and a jumplist is there with Tasks and sections.

How to Add Jumplist items (Tasks and Custom Categories) to your website for IE9

14 responses to “How to Add Jumplist items (Tasks and Custom Categories) to your website for IE9”

Leave a Reply Cancel reply