How to enable IE9 pinning and JumpLists on your website


image

Wow the Internet Explorer 9 beta launch was a whirlwind, I knew that we were working with the Gorillaz and the BBC but I had no idea about Facebook, the killers, LinkedIn, twitter, MySpace or any of the other launch partners.

The Gorillaz partnership has resulted in a web experience that highlights a number of IE9 and HTML5 features and it was great to be involved in the project and watch the Gorilaz team put the site together. I didn’t have a great deal of input but I like to think that it was my presence at one of the meetings that inspired the little Joke about Evangelists at 6:05 seconds into the demo video.

During the next 5 days I’m going to write blogs on Pinning and JumpLists, HTML5 Canvas, IE9 peek with button support and HTML5 video, inspired by the work that the Gorillaz have done.

First things first though, I’m going to show you how you can add pinning and JumpLists to your blog or website just like the Gorillaz have.

image

I managed to add JumpLists and pinning to my blog thewayithink.co.uk and I’ve detailed below how I did it.

Enabling Pinning

To enable pinning you don’t need to do anything. Anyone can use IE9 to pin your website to their task bar. All they do is drag the favicon from the browser address bar onto the taskbar. However, the default experience can be improved by making a few simple changes to your site.

Create a High Definition Favicon

Standard favicon files are usually 32×32 or 16×16 pixels in size. These look great in the browser but when you pin it to the taskbar it can be a little small and pixilated.

To give the best pinning experience you should use a 64×64 favicon. I used http://www.favicon.co.uk/ to create a 64 x 64 icon file and then uploaded it to my site.

You then need to make sure you are using the new favicon by checking the  <link rel=”Shortcut Icon”> tag is pointing at the new 64×64 fav.ico file, an example of the tag you should look for is below:

image 

Favicons are often cached so you might need to clear out your browser cache, however, once the icon is correctly linked you will now see a better looking icon when you drag the icon from the address bar onto the taskbar.

image image

JumpLists

In windows 7 a JumpList is a list of actions that are displayed when you right click an Icon on your taskbar. These JumpLists have been available to native application developers for a long time but IE9 beta is the first browser that exposes them for use by web developers.

Now if we want to add Jump list commands we need to add a few meta Tags:

<meta name="application-name" content="Martin Beeby's Blog" /> <meta name="msapplication-task" content="name=Archive;action-uri=http://www.thewayithink.co.uk/archive.aspx;icon-uri=http://www.thewayithink.co.uk//themes/arthemia/images/favicon.ico" /> <meta name="msapplication-task" content="name=LinkedIn;action-uri=http://www.linkedin.com/in/thebeebs;icon-uri=http://www.linkedin.com/favicon.ico" /> <meta name="msapplication-task" content="name=Twitter;action-uri=https://twitter.com/thebeebs;icon-uri=https://twitter.com/favicon.ico" /> <meta name="msapplication-task" content="name=MSDN Blog;action-uri=http://blogs.msdn.com/b/thebeebs/;icon-uri=http://www.thewayithink.co.uk//themes/arthemia/images/favicon.ico" />

The first meta tag has 2 attributes, name and content. The name attribute should have the value “application-name” the content attribute should contain the name of the website as you want it to appear on the JumpList.

For each task you would like on the JumpList you need to add a meta tag. I have added 3 tasks: Archive, LinkedIn and Twitter.

Each meta tag will need 2 attributes. The name attribute and the content attribute.

The name attribute needs to contain the value “msapplication-task”.

In the content attribute you need to add a string value in the following format: “name={NAMEVALUEHERE};action-uri={ACTIONURLVALUE};icon-uri={ICONURLVALUE}”

Below is a list of the three values that the content string will need to contain:

  • name  – Which is the name of the link that will be shown on the JumpList
  • action-uri – Is the url that the user will be sent to when they click on the JumpLIst task
  • icon-url – Is a link to a fav icon that will appear on the left hand side of the JumpList Name.

Once you create your meta tags and put them in between the <head></head> tags in your document you have successfully implemented JumpLists.

You can test it by dragging the Icon from the address bar to the taskbar and then right clicking the Icon. A JumpList should appear that will look something like this:

clip_image001

 

That’s it… add pinning and JumpLists to your site with just a few lines of HTML. If you have Internet Explorer 9 beta you can test out the pinning and JumpList feature at my website http://www.thewayithink.co.uk, http://gorillaz.com or even http://www.facebook.com

Comments (23)

  1. Asgard says:

    I have a problem with jumplists. I did exactly as in your example but jumplist does not work. I only get the website icon working and the website name with icon (your "Martin Beeby's Blog") but tasks wont appear. Using x64 Win7.

  2. thebeebs says:

    @Asgard What is you website…. Maybe I can take a look. I'm also using win7 x64

  3. Asgard says:

    Sorry, it is not public yet and it runs only for me at localhost.

  4. thebeebs says:

    Send me the code you are using to martin.beeby@microsoft.com. I wil give it the once over.

  5. Kuntal Gupta says:

    Thanks Man , Made my site Use Pinning and Jumplist using what you said.

    Additionally used some more tags like Tooltip , App starturl , Navigation button color etc.

    Its Nice :)

    blog.extremetecharena.com

  6. thommck says:

    I had an issue using Martin's code.

    It looked correct but wouldn't work.

    In the end I copied the source code from bing.com and just changed the URIs to the appropriate addresses

  7. thebeebs says:

    I'll replace the image on the blog with the actual code incase there is a problem transcribing the code.

  8. thebeebs says:

    Ok I've added the actual code inline rather than the image… lesson learned :)

  9. Geheee says:

    Thanks for the instructions, I have it working on my site – http://www.geheee.com

    Only problem is, when I pin a site using the x64 version of IE9, the site will open in x86 version from the taskbar.

    Any idea why?

  10. thebeebs says:

    Geheee How strange… let me ask one of the IE team about it and I will get back to you.

  11. thebeebs says:

    If anyone is having trouble with pinning then this might help: blogs.msdn.com/…/a-common-mistake-with-ie9-pinning.aspx

  12. Fabrizio Garrone says:

    I'm having troubles with pinning the Facebook Site. This is happening since yesterday.

    1-The Favicon in Facebook is "wrong" It's a small favicon with white edges, wich complete the 64×64 size.

    2- The jumplists aren't there.

    Any Idea?

    Thanks!

  13. thebeebs says:

    Facebook pinning seems to working fine for me

  14. Fabrizio Garrone says:

    Well, The Jumplist is working great… But About the Icon, is not the same icon that I see on the web.

    Look:

    img230.imageshack.us/…/facebooko.jpg

    So it's like a small 16×16 Icon, instead of the 64×64 "new ones".

    I've tried Everything… deleted every cache, and still the same problem. As you can see. all the other websites are working fine with a nice and big Icon. But Facebook is wrong for some reason.

    Thanks!

  15. Fgarrone says:

    Ok. I have the answer to my problem.

    Please check this out.

    IMDb Favicon (used of course for the shortcut): i.media-imdb.com/…/desktop-favicon.ico

    Facebook Favicon (used of course for the shortcut): static.ak.fbcdn.net/…/5875srnzL-I.ico

    As you can see… This was maybe a an update made by Facebook today or yesterday. But I will not able to use a Big Icon on my Task Bar if Facebook don't change that Image. The day I pinned for the first time the Facebook website. They were using another Favicon, a large one.

    Talk to them and tell them that please 😛

    Thank you!

  16. Paul Connelly says:

    What has happened to the Facebook favicon? It is smalled and is in a white box when pinned to the taskbar??? Twitter icon also seems to be the same.

  17. Fgarrone says:

    Well. Obviously. They're using a small favicon. So…we only can wait until it's changed…I don't know why this things happens… No one saw this except the normal users? MS should tell them that…Because that was the great thing about IE9, pinned sites. And Smaill Favicons = FAIL.

    Regards.

  18. Fgarrone says:

    Well. Obviously. They're using a small favicon. So…we only can wait until it's changed…I don't know why this things happens… No one saw this except the normal users? MS should tell them that…Because that was the great thing about IE9, pinned sites. And Smaill Favicons = FAIL.

    Regards.

  19. Rodney says:

    Where would I put this code on my WordPress site?  Pinning was easy but not sure where the code for jumplists goes

  20. Fola says:

    If I have both <link rel=”Shortcut icon”….> and <link rel=”icon”…..> which one of the icons will I see on the start menu for my application?

  21. Emanon says:

    Well, it appears that I have the same problem as others.. My "Tasks" aren't showing. Unfortunetly, nobody said how it was resolved/fixed.

    I followed the code exactly – even off other sites.. no go..

    I am working off of a dev environment. Would that matter?

  22. Addam says:

    I've worked with Microsoft on some of this testing with partners.  Since their documentation is kind of all over the place, I've created a simple library that will make this thing much easier for people to implement this on their site.  You can find it here:  <a href="devcrapshoot.com/…/ie9-pinning-feature" target="_blank">devcrapshoot.com/…/a>

    Let me know if you have any particular questions.  I'm sure I can help.

    Cheers!

  23. Marta says:

    Very helpful article,I just added to my favorites.

    P.S. small suggestion, If you want a unique favicon this site http://onlinefavicon.com/ has an online drawing tools, which also convert favicon to ico fail.