Snippet: How to Create Jumplist Items For Your Site For IE 9

Internet Explorer 9 beta was released a few days ago and one of the feature includes the pinning of any site to the taskbar. With a simple dragging and dropping of the tab to the taskbar, any site can be pinned to the taskbar and the users can quickly click on the icon to launch the site. In addition, IE 9 also allows webmaster to add jumplist items to the taskbar icon. This tutorial shows you how you can add jumplist items to your site.

In this example, we are going to add the links of the various categories (of Make Tech Easier) to the jumplist. You can, of course, change/modify the links to the URL that you want to place.

ie9-pinsite-jumplist

1. Open your theme file and place the following meta tag in between the and tag. If you are using WordPress, the tag is located at the header.php file in your theme folder.

<META name="msapplication-task" content="name=Windows;action-uri=http://maketecheasier.com/category/windows-tips;icon-uri=http://maketecheasier.com/favicon.ico"/>

Things that you need to change:

  • “name=xyz”: This is the name of the item that will appear on the jumplist, so make sure you give it a clear name
  • “action-url=http://xyz.com”: This is the page that will load when the user clicks on the link.
  • “icon-url:http://xyz.com/favicon.ico”: This is the favicon (must be a favicon in ico format) that will appear beside the name

Each meta tag is for one link. So if you have 5 links, you will have to add the meta tag 5 times (and modify the content accordingly). Note that IE 9 only allows you to add up to 5 links.

That’s it. Once you are done adding the tag, simply upload/replace the html file (or header.php in the case of WordPress) to your server. Now open IE9, load your site, drag the tab to the taskbar. Your links should now appear in the jumplist.

IE 9 also allows you to add tooltips, change the navigation button color, startup url, window size etc. Here are the tags that you need to insert

<meta name="application-name" content="Sample Site Mode Application"/>
<meta name="msapplication-tooltip" content="Start the page in Site Mode"/>
<meta name="msapplication-starturl" content="http://example.com/start.html"/>
<meta name="msapplication-window" content="width=800;height=600"/>
<meta name="msapplication-navbutton-color" content="red"/>

That’s it.