Add Pinned Site feature on your website

This post will show you how to use the Internet Explorer 9 / Windows 7 feature of pinned sites. If you don’t know what “Pinned Site” feature is, check this video.

1.       Create a new ASP.NET Application project in Visual Studio

2.       Create 2 additional pages and a folder Images that will contains 3 icons

 

3.       Parameterize the button

5 Meta elements will help you to parameterize your button:

Element name	Value	Example
application-name	Name of the button. If no name is specified, the default name will be the name of the web page.	<meta name="application-name" runat="server" content="My Application Name title" />
msapplication-tooltip	Tooltip displayed on mouse over the pinned site	<meta name="msapplication-tooltip" runat="server" content="This is the application ToolTip" />
msapplication-starturl	Relative or absolute URL of the page opened upon button click. By default it’s the page that was opened when site was pinned	<meta name="msapplication-starturl" content="/" />
msapplication-navbutton-color	Color of Back and Forward buttons	<meta name="msapplication-navbutton-color" content="#FF0000" />
msapplication-window	Size of the window that will be opened. If user resizes it, those values are overridden.	<meta name="msapplication-window" content="width=800;height=600" />

4.       Parameterize task list

Only one Meta element is needed to define a task. This could contain 3 properties:

• Task name
• Web page URL
• Icon to display

<meta name="msapplication-task" content="name=Task number 1;action-uri=/Feature1.aspx;icon-uri=/Images/Icon1.ico"/>

5.       Result

Here is the result for our small test.

<link rel="shortcut icon" type="image/x-icon" href="/Images/myIcon.ico" />

<link rel="icon" type="image/ico" href="/Images/myIcon.ico" />

<meta name="application-name" runat="server" content="My Application Name title" />

<meta name="msapplication-tooltip" runat="server" content="This is the application ToolTip" />

<meta name="msapplication-starturl" content="/" />

<meta name="msapplication-navbutton-color" content="#FF0000" />

<meta name="msapplication-window" content="width=800;height=600" />

<meta name="msapplication-task" content="name=Task number 1;action-uri=/Feature1.aspx;icon-uri=/Images/Icon1.ico"/>

<meta name="msapplication-task" content="name=Task number 2;action-uri=/feature2.aspx;icon-uri=/Images/icon2.ico"/>

Note that the list of task can be get from external source as config file (sitemap, …) or database

6.       Open the site home page, the fav icon is displayed

7.       Drag the tab of the site to the task bar to pin the site

8.       Site is now pinned to task bar

9.       Right click on the icon to discover the list of available tasks for this site as we have defined

On button mouse over, you see the site name

10.       The Back and Forward buttons are colored as defined (#FF0000 = red)

 

11.       There is also another feature that allows you to add the site to the Start Menu.

12.       Site and its tasks are now available from the start menu.

13.       Facebook is a good example as pinned site, try to pin Facebook site to discover available tasks from pinned site button