How to Build a Pinned Site in Html5

Written by admin

In Windows 7, the taskbar shows both actively running applications and shortcuts to applications that you use frequently. By pinning an application to the taskbar, you can quickly nd and launch the applications you care about most. Using Internet Explorer 9, you can also pin web sites to the taskbar, which enables you to launch sites the same way you launch other applications in Windows.

Pinned sites unlock a new set of tools – Favicons, Noti cations, Jump Lists, and Thumbnail Toolbars. Pinned Sites feature a site-enhanced user interface, with an enlarged shortcut icon, with Back and Forward buttons and other interface elements that can be uni ed with the brand and overall appearance of the site.

With just a few lines of HTML or JavaScript code, you can use these tools to take advantage of the full power of the PC and extend the web experience beyond the browser and onto the Windows 7 taskbar.

Pinned sites are only supported in Windows 7. To pin a site, users can do one of the following to pin a site to the taskbar:

  •   “Tear” off a tab by clicking and dragging it to the taskbar.
  •   Drag the favorites icon (favicon) from the address bar in Internet Explorerto the taskbar.
  •   Drag an image in the website to the taskbar.After a site is pinned, the site renders with custom enhancements – for instance, the Back and Forward buttons match the color scheme of the website. Sites can also be pinned to the Start menu.The following graphic shows the taskbar elements in Windows 7.

Create a basic pinned site

Web developers can use the msSiteMode APIs to integrate pinned sites with the Windows 7 Taskbar. These APIs are divided into two groups:



Taskbar button

When you click a Pinned Site button on the taskbar, the website launches in a new browser window that has been customized specically for the site. The site icon is visible on the taskbar button.

Overlay icons

A 16×16 pixel noti cation icon that appears on top of the nor- mal site icon. This noti cation indicates that something has changed in the website, such as new mail arriving, receiving a chat request, or being outbid in an auction. The noti cation is visible only when the site is running.

Jump List

The Jump List can contain static and dynamic tasks that act as shortcuts into the Pinned Site. A user can further custom- ize their experience by pinning these items to the Jump List.

Jump List category

A Pinned Site can create and ll a single custom Jump List category by using script in the webpage. This list is dynamic.

Jump List tasks

In addition to the Jump List category, a Pinned Site can predene a list of tasks in metadata. This list is static.

Thumbnail toolbar

A Pinned Site can create up to seven buttons that appear on the taskbar thumbnail window. These buttons can be visible or hidden, active or inactive, or toggle between different button states.

Site properties which apply to any user visiting the website (these are implemented using HTML).
Information that is dynamic in nature or specification an individual user visiting the website (these are implemented using JavaScript).

Basic Pinned sites contains properties which apply to any user and explain how to implement these using HTML.

These site properties can be implemented by web developers using meta tags that live inside the head block of your HTML. The site properties that you can implement using the meta tag are explained below:

Application name

The application name will be used as the name of the application button on the taskbar, and it is appended to the window title for any pinned site window. If an application name is not given, the HTML document’s Title element is used instead.

You can set the application name like this, substituting in the appropriate content for your site:
• <metaname=”application-name”content=”Techfactor”/>

Once your site is pinned, right-click on its icon in the Taskbar. The rst link in the bottom group of links should read “Techfactor” and if you click it, it should open the web site.

Set the starting page

The Start Page is set using a meta tag with name=”msapplication-star- turl”. The “msapplication-starturl” metadata contains the root URL of the application. The start URL can be fully quali ed, or relative to the current document. Only HTTP and HTTPS protocols are allowed. If this element is missing, the address of the current page is used instead.

• <metaname=”msapplication-starturl”content=”http://www.” />


You can also pin sites to the Start Menu or Desktop. The “Desktop Tooltips” functionality won’t show up when you pin a web site to the taskbar, but you will see it as a tooltip if you pin the site to the desktop.

The syntax is as follows (again, choose your own content):

• <metaname=”msapplication-tooltip”content=”Techfactor– Your best Tech Resource Ever” />

To pin to the Desktop, drag the favicon from the address bar in Internet Explorer onto your desktop. This will create a link on your desktop. Hover your mouse pointer over the icon on the desktop.

Constrain the initial size of the browser window

The pinned site window size defines the size (width and height, in pixels) of the pinned site when it is first launched by the user. The syntax is:
• <metaname=”msapplication-window” content=”width=800;height=600” />

The initial size of the pinned site’s window will now be 800×600.

Back and Forward navigation Button Colors

This defines the color of the “Back” and “Forward” navigation buttons in the pinned site browser window. Any named color or hex color value as de ned by CSS Level 3 is valid. If this meta tag is omitted, the navigation button color will be based on the favicon.

• <metaname=”msapplication-navbutton-color” content=”green” />

Now the navigation buttons for the pinned window should be green, as below:










How to create Jump list tasks

While a destination is a thing, a task is an action, and in this case, it is a site- specification. In the context of a Pinned Site, a task can be any common navigation or site functionality.

  1. Some tasks are static, meaning that they are set when the site is pinned. Others, like notifications and user-specific tasks, are dynamic and change over time.
    •   Static tasks are de ned using meta tags. These properties apply to anyoneusing the site when it is pinned and appear in the category named Tasks. This category can contain up to five items. The items in this list tend to remain the same regardless of the state or status of the application. This topic explains how to add static tasks.
    •  Dynamic tasks are de ned using JavaScript APIs. These tasks typi- cally surface information that is specific to an individual user and appear in a Jump List category that you create. This custom category can contain up to 20 items, although only the last 10 items appear in the Jump List by default.A pinned site can only have one static list and one dynamic list at a time.implementing static Jump lists

      Static Jump List Tasks are also implemented using meta tags in the head block of your HTML. You must specify a name of “msapplication-task” and a content attribute that contains a trifecta of information:
      name – This is the name of the task which is displayed to the user in the

      Jump List.
      action-uri – This URI is the destination that the user will be taken to when the Jump List task is clicked.

      Create advanced Pinned Sites

      implementing Overlay icons

      Overlay icons are used to surface noti cations or status to the user. While the pinned site is running, it has the ability to display a small icon overlaid on the Taskbar button, to draw the user’s attention back to the site or notify the user that some event has happened. The pinned site can display multiple overlay icons to the user, but it can only display one icon at a time.

      A great example is Facebook. If you pin, you will see that when you have new noti cations (new friend requests, messages, etc.),

      The Facebook pinned site will overlay a red icon with a white asterisk to notify you.

      To implement overlay icons in your own pinned sites, you will need to know how to both set and hide overlay icons.

      To display an overlay icon to the user on the Taskbar button, you will use the msSiteModeSetIconOverlay method. It takes a parameter which is

      a URL pointing to an icon le (*.ico); this is the icon that will be overlaid on the Taskbar button. There is also a second, optional string parameter for a description of the icon overlay, for accessibility purposes.
      • window.external.msSiteModeSetIconOverlay(‘Images/info. ico’);

      To clear an overlay icon from the Taskbar button, you will use the msSiteModeClearIconOverlay method.
      • window.external.msSiteModeClearIconOverlay();

      How to provide discoverability?

      You have seen how Pinned Sites can provide a more interactive experience for your users; however, your users might not know that your site can be pinned. In this section, you learn some ways to advertise the features of your Pinned Site.

      It is important to realise that Windows Internet Explorer 9 doesn’t notify a user if the site can be pinned. It’s up to the developer to advertise these features.

      The following are just a few of the variety of ways you can alert your users to the Pinned Site features of your web site.

About the author


Leave a Comment