Thanks to Katrien De Graeve for giving me the inspiration of this blog post. Last week on the HTML5 Web Camp session in Belgium, she talked about the site pinning functionality of IE9. She also recommended a jQuery plugin called ie9ify that makes site pinning integration much easier. The day after the session I started experimenting with the ie9ify plugin, and it was working as suspected.
But “easier” was not the case when I tried to implement it in SharePoint 2010. Several problems occurred, so I tried an alternative solution of adding the site pinning functionality to my SharePoint site. In this blog post I will give you a brief overview of the ie9ify with SharePoint 2010 problems, and explain my alternative solution.
The end result will be:
Problems with ie9ify and SharePoint 2010
Another problem was that only the navigation button color were working.All the other functionality like adding links to the jump lists were not working.
Alternative site pinning solution
Because of all these problems with of implementing ie9ify with SharePoint, I started to create my own solution to make it work.
After some testing, the meta tags are added every time the page is loaded, and the site can be pinned to the taskbar.
Custom Jump lists
The next step is to create a custom jump list with all the SharePoint lists that are visible in the Quick launch.
The first thing you need to do, is to check if the site is opened in pinning mode. This can be checked with the following statement:
After that you need can start by creating your custom jump list. To add links to the jump list, I made use of jQuery to iterate over each list item anchor element in the quick launch.
This is the full code block that can be added in the head section of the master page.
The only thing that is not working is the taskbar icon. For some reason IE9 does not take the favicon, on a custom HTML sample page with the same favicon it works correctly. If you have any advice or a solution, feel free to add a comment.
Site Icon: 15/04/2011
The site icon problem has something to do with the “msapplication-starturl” meta tag. If you specify a full URL or do not implement the meta tag, then the site icon works.