Site Pinning, Jump Lists, Overlay Icons, and Button Colour in 16 lines of code

  • Article

With IE 9 being released here is a code snippet which shows you how to implement Site Pinning, Jump Lists, and Overlay Icons. You place the following code with in the <head></head>

<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="shortcut icon" href="favicon.ico" />
<meta name="application-name" content="[Name of the Application]" />
<meta name="msapplication-tooltip" content="[Tool Tip for the Pin]" />
<meta name="msapplication-starturl" content="[Startup Url for the Pin]" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-navbutton-color" content="[Button Color]" />
<meta name="msapplication-task" content="name=[Name];action-uri=[URL of Link];icon-uri=[URL of Icon for Link]"/>   

<script type="text/javascript">
function ShowOverlayIcon(icon,text){
window.external.msSiteModeSetIconOverlay(icon, text);
}

function ClearOverlayIcon(){
window.external.msSiteModeClearIconOverlay();
}
</script>

So lets look at it piece by piece:

Site Pinning:

In order to be able to pin your site you need these blocks:

<meta http-equiv="X-UA-Compatible" content="IE=9" />
<link rel="shortcut icon" href="favicon.ico" />
<meta name="application-name" content="[Name of the Application]" />
<meta name="msapplication-tooltip" content="[Tool Tip for the Pin]" />
<meta name="msapplication-starturl" content="[Startup Url for the Pin]" />
<meta name="msapplication-window" content="width=1024;height=768" />

You can replace the items in the [ ] with information relevant to your code. To chance the colours of the buttons on the browser you can use the following line of code

<meta name="msapplication-navbutton-color" content="[Button Color]" />

The button colour can be referenced using #RRGGBB or through the colour name. To Add static tasks to the jump list you add a number of task tags to the header:

<meta name="msapplication-task" content="name=[Name];action-uri=[URL of Link];icon-uri=[URL of Icon for Link]"/>

Once again replacing the [ ] brackets with the appropriate information. You can have a custom FavIcon for each link. Lastly to use overlay icons on page you need to have .ico files for each type of overlay and then using javascript you can add or clear notifications.

<script type="text/javascript">
function ShowOverlayIcon(icon,text){
window.external.msSiteModeSetIconOverlay(icon, text);
}

function ClearOverlayIcon(){
window.external.msSiteModeClearIconOverlay();
}
</script>

I hope this gets you all started.

Dave