Introduction

Internet Explorer 9 introduced a new feature - Pinned Websites - that allows you to create a shortcut to a website on Windows 7 taskbar. A pinned website, however, exposes much more functionality than an ordinary shortcut. Normally to launch a website, the user needs to open a browser instance, type in website URL in the browser address bar and then navigate to the required part of the website. Pinning a website allows the user to launch it much like a desktop application. The user can simply click on the icon of the pinned website or select a specific option from a menu and start working with the website. Since a pinned website is always visible on the taskbar, website pinning also grabs constant user attention. This can result in significant increase in the usage of the website for obvious reasons. No wonder that every ASP.NET developer would like to take advantage of this feature in their websites. To that end this article discusses various steps involved in enabling pinning for your website. It also illustrates creating static and dynamic task entries and discusses a few other scenarios specific to ASP.NET.

How Website Pinning Works?

Before you implement website pinning for your own website, let's see how it works with the help of some website that has implemented this feature. You can visit Internet Explorer Pinned Websites Gallery and use any of the website listed there. For this demonstration, however, I am going to use my personal website.

Open Internet Explorer 9 and navigate to www.bipinjoshi.net. You should see the home page of the website and your IE9 address bar should resemble as shown in Figure 1.

Figure 1: A sample website with pinning enabled

Notice that the address bar shows the Favicon used by the website. Now drag that favicon from the address bar and drop it on to your Windows 7 taskbar. Doing so will create a short cut on the taskbar with icon same as the favicon.

Figure 2: Website pinned to Windows 7 taskbar

Now close all the open instances of IE9 and click on this taskbar icon. You will find that the website is launched in a new instance of IE9. Though a minor feature, you will find that the opened instance of IE uses the colors from the favicon for its navigation buttons.

Figure 3: IE uses favicon color for navigation buttons

Next, right click on the taskbar icon of the pinned website to reveal what is known as a Jump List.

Figure 4: Jumplist of a pinned website

As you can see the jump list is quite similar to a menu and presents a quick way to navigate to a specific area of the website. For example, clicking on the "Latest Additions" option will take you to the latest additions to the website. You can also unpin the website from the same shortcut menu.

Steps involved in enabling Website Pinning

Now that you know how a pinned website works, let's outline general steps involved in enabling pinning for your own website. Note that some of the steps mentioned below are optional, nevertheless you will implement them in your sample website for the sake of clarity and completeness.

Following are the steps needed to enable website pinning for a website:

• Create and specify favicon for your website
• Add an image in the web page that can be dragged and pinned to the Windows taskbar
• Add one or more items to a static jump list
• Add one or more items to a dynamic jump list
• Add notification icon and/or flashing behavior to grab user attention
• Let the website users know that your website can be pinned

In order to illustrate each of the above steps you will develop a simple ASP.NET website. Though most of the concepts in this article can be demonstrated using a plain HTML page, you will use ASP.NET web forms. The later sections of this article talk about a few scenarios that are specific to ASP.NET (and cannot be illustrated in plain HTML pages) and we can utilize the previously developed web forms. Though you can develop the ASP.NET website using Visual Studio 2010 on any supported operating system (and that includes Windows XP), to run the web forms and test the pinning behavior you must have Windows 7 with Internet Explorer 9.

Creating a Favicon

Favicon of a website acts as a visual indicator for it and is displayed in the browser address bar and tabs (see Figure 1 earlier). Traditionally favicons are 16X16 or 32X32 pixel icon files. Though browsers support other image formats for favicon it is advisable to stick with .ico file format because it works on all Windows based browsers. Windows taskbar shows icons of size 64X64 pixels and hence it is recommended to create a good quality favicon file of 64X64 pixels when you wish to use it for pinning purpose. You can take help of some image editing software for creating the .ico file or use one of the online favicon generators (one such online favicon generator can be found at http://favicon.htmlkit.com/favicon/ but there are many others). Once you have a favicon ready you can use it either in master page or individual web forms. In either case the following HTML markup does the job of specifying favicon for a page.

As shown above the <link> tag specifies a favicon file located in the website root folder. If your favicon file is inside some folder change the href attribute accordingly. Figure 5 shows the favicon used for this example (see the code download for .ico file)

Figure 5: Sample favicon used in the example

Creating a draggable image

Users can drag favicon image from the browser address bar to the Windows taskbar to pin a website but this may not be obvious to them because the favicon is being displayed "outside" your web form. It would be nice if your web form itself contains an image that they can drag and drop onto the taskbar. Luckily, website pinning features of IE9 allow you to do that quickly. You can use any image (any size and format will do) for this purpose. Consider the following markup from a web form:

The above markup displays an image on a web form. Notice that the image server control has CssClass property set to msPinSite. msPinSite is an inbuilt class that makes the image draggable. With the above markup in place you can drag the image (Computer.jpg) onto the taskbar (see Figure 6).

Figure 6: Dragging an image onto Windows taskbar

Displaying a draggable image and associated message makes sense only if the user has not pinned the website yet. It would be nice if you hide the image and message altogether in case the user has already pinned your website. This can be accomplished by writing a small amount of JavaScript code as shown below:

As you can see the above script uses an inbuilt method of IE9 - msIsSiteMode() that returns true if the website is already pinned. If the website is already pinned you simply hide the container <div> element. Note that msIsSiteMode() will return true only when the website is opened using the pinned taskbar button. If you open a new browser window and navigate to the website manually, the image and message will still be visible.

Adding a Static Jump List

A Jump List is like a menu and appears when you right click on the pinned website icon in the taskbar. You can add items to a jump list in two ways - statically or dynamically. In the former approach you use <meta> tags to specify jump list item information such as text and icon URL. The following markup adds four items to the jump list.

Observe each <meta> tag carefully. The name attribute is set to misapplication-task indicating that it is an item of a jump list. The content attribute specifies multiple pieces of information separated by semicolon (;). The name, action-uri and icon-uri indicate text of the jump list item, URL to navigate when user clicks on it and icon for the item respectively. The following figure shows how the jump list looks like:

Figure 7: Jump List with statically added items

You can also separate multiple items using task separator as shown below:

Notice the use of meta name msapplication-task-separator that indicates that the item is a separator. Each separator should have a unique value for the content attribute. Figure 8 shows how the modified jump list looks like:

Figure 8: Adding a separator between jump list items

Adding a Dynamic Jump List

Static jump list is suitable when you have fixed number of well-known tasks. However, at times you may need to add tasks dynamically. Consider for example that you wish to display latest three blog posts or unknown number of news headlines in the jump list. In such cases since you are unaware about the items to be added, you can't use static tasks. Luckily, there is a JavaScript based approach to add tasks dynamically. To demonstrate how dynamic jump list items work you will use a WebMethod that returns a set of URLs on the fly. You will then use jQuery code to call this method from the client side and add the items to jump list based on the URLs returned.

Add the following WebMethod in the same web form where you have been adding markup so far.

GetItems() is a simple WebMethod that returns an array of strings. In a more real world situation you will have some database access logic here that determines the URLs to be returned. Make sure to mark the method as static and decorate it with [WebMethod] attribute.

To call the GetItems() WebMethod from the client side JavaScript, add the following jQuery code in the <script> block.

The code shown above makes use of $.ajax() function of jQuery to call the WebMethod. We won't go into the details of $.ajax() here. It is suffice to know that the url parameter is pointing to the WebMethod (default.aspx/GetItems). The success parameter points to the code as mentioned in the successHandler. The success handler code will be called when the WebMethod completes successfully. The results parameter gives access to the string array returned by the WebMethod (results.d). You can then add jump list items dynamically using some in-built IE9 specific functions.

The if condition first ensures that you are running the website in site mode using msIsSiteMode() function. If so, all the previously added dynamic tasks are removed using msSiteModeClearJumpList() function. A new jump list is defined using msSiteModeCreateJumpList() function. One or more jump list items can then be added using msSiteModeAddJumpListItem() function. Finally, msSiteModeShowJumplist() function shows the jump list. Figure 9 shows a sample run of the web form with dynamically added items.

Figure 9: Dynamically added jump list items

A tricky thing to know here -dynamic jump list items will be displayed depending on the jump list items specified in the Start Menu properties. See Figure 10 below.

Figure 10: Number of Jump List items are configured in the Start Menu properties.

If you keep this value to 0, dynamic items will not be displayed even if you are adding them correctly via code.

Specifying Application Level Settings

In addition to jump list items, you can also specify some application level settings using <meta> tags. These settings are applicable to the pinned website as a whole and include things such as application name, tooltip, initial launch URL, browser window size and navigation button color. Let's see how this information can be specified.

You can specify an application name for a pinned website. This name is displayed when you move your mouse on the taskbar icon and in the shortcut menu. If you don't specify any application name title of the web page is used. To specify an application name you use application-name <meta> tag as shown below:

The result will be as shown in Figure 11.

Figure 11: Specifying application name

Notice how "My Blog" is displayed in the tooltip.

Additionally you can also specify application tooltip that is displayed for websites pinned to Start Menu or Desktop. The usage is similar as illustrated below:

By default the URL that you used while pinning a website is opened when you launch a pinned website. You can alter this behavior using msapplication-starturl <meta> tag.

The content attribute can be any http or https URL or relative URL. Once specified this URL will be the start page irrespective of which page you used while pinning the website.

You can control the initial size of the browser window using msapplication-window <meta> tag.

The width and height values can be adjusted as per your requirement but 800 and 600 are the minimum values for width and height respectively.

Finally, you can also customize the color of the navigation buttons using msapplication-navbutton-color <meta> tag. You can use any named color or hex value. If you don't specify this meta tag, the color value will be derived from the favicon.

Notice how the navigation buttons have assumed the specified color (Figure 12).

Figure 12: Specifying navigation button color.

Adding meta tags from server side code

In all the preceding examples you added <meta> tags in the HTML markup. If you are using a Master Page or a web form whose base layout markup is placed statically then this technique will work quite well. However, many ASP.NET websites are dynamic to an extend that even the <meta> tags are emitted programmatically. If your website falls in such a category then you can emit website pinning related <meta> tags via code as shown below:ù

The above code adds <meta> tags for jump list items programmatically. As you can see, the code creates instances of HtmlMeta class. The Name and Content properties of HtmlMeta are then set according to our requirement. Finally, all HtmlMeta instances are added to Controls collection of the Header. Remember that, for this code to work you should add runat attribute to the <head> tag as shown below:

Sending notifications to the user

Another interesting feature offered by pinned websites is notification icon and flashing of taskbar button. The former feature allows you to notify the user about something interesting happening on your website. For example, an web based emailing application can notify users when new email messages are received or a news website may notify users when new content gets added. The later feature allows you to flash the taskbar button of your pinned website in an attempt to grab user attention. Of course, you should use this later feature carefully as it can be annoying to the users. To see how both of these features are used add another WebMethod - to the web form as shown below:

The WebMethod - NewContentAvailable() - returns true if some new content is available on your website else it returns false. For the sake of testing you will simply return true/false from the WebMethod but in a more realistic situation you will have some database logic here.

Next, add an HTML button to the web form and write the following JavaScript code to its click event handler:

As you can see, the Notify() function uses jQuery code to call the NewContentAvailable() WebMethod. The msSiteModeSetIconOverlay() function does the job of showing a notification icon on the taskbar. It takes two parameters viz. URL of the notification icon file and description. It is recommended to have the notification icon of smaller size (16X16) since it is displayed in the bottom right corner of the taskbar icon. The msSiteModeClearIconOverlay() method clears the icon if there are no additions.

The msSiteModeActivate() function flashes the taskbar button of your pinned website. Remember that the taskbar button is flashed only if the pinned website doesn't have the focus. That is why the code introduces a delay of 3 seconds using setTimeout() function so that you get a chance to shift the focus to some other window.

A tricky thing to remember - the notification icon is displayed only if the taskbar is using large icons. Make sure that the taskbar properties are not marked to show small icons (Figure 13).

Figure 13: Ensure that you are not using small taskbar icons

Once you run the modified version of the pinned website, navigate away to some other window and after 3 seconds your taskbar icon should flash and should also show the notification icon (Figure 14).

Figure 14: Showing notification icon

Notice how a notification icon is displayed in the bottom right corner of the main icon.

Inform users that your website can be pinned

Once your website is ready with the required pinning features, it's time to let your users know about it. One way that we have already seen is a custom icon placed in somewhere in the web form that can be dragged and dropped on the taskbar. You can make it fancier using jQuery or by adding some animation effects. You can, of course, use all your channels of informing users such as Twitter, Facebook and Email newsletters. If that's not enough, you can also think of submitting your website to Internet Explorer Gallery of pinned websites (http://www.iegallery.com). You will need to fill a registration form in order to submit your website followed by a review process.

Figure 15: Internet Explorer Gallery of Pinned Websites

Summary

IE9 and Windows 7 together allow you to create pinned websites. Pinned websites appear as a taskbar button and you can use the button to launch the website. Additionally, you can have jump lists to navigate quickly to the sections of your website. The jump lists can be added either statically using <meta> tags or dynamically using JavaScript code. You can also notify users with the help of notification icon and flashing taskbar button when something interesting happens on your website. Website pinning can increase your traffic significantly since it sits right on the taskbar and can grab more user attention. This article discussed several steps involved in enabling pinning for a website. Though many of the features are applicable to any HTML page we also discussed some scenarios specific to ASP.NET such as calling a WebMethod for implementing dynamic jump lists and notification icons. You can also emit <meta> tags from the server side code in case your website layout is database driven.

About Bipin Joshi

Bipin Joshi is a blogger, author and a Kundalini Yogi who writes about apparently unrelated topics - Yoga & Technology! A former Software Consultant and trainer by profession, Bipin is programming since 1995 and is working with .NET framework ever since its inception. He is an internation... This author has published 7 articles on DotNetSlackers. View other articles or the complete profile here.