Making use of the Pinned Site feature of Internet Explorer

Last updated on by cjh

Making use of the Pinned Site feature of Internet Explorer

Back in the day of Internet Explorer 6 and Windows XP, visitors to your Web Site could browse to your Web Site, look at it, and if they enjoyed your content, they may very well have added your Web Site to their favourites list.

Today, in a world of Internet Explorer 9 & 10 and Windows 7 & 8, visitors to your Web Site can ... still browse to your Web Site, look at it, and if they enjoy your content, they may very well want to add your Web Site to their favourites list.

But many Web Sites are more and more becoming "Web Applications", and such Web Applications are used so often that the visitor may wish to access them quickly. Such sites may include Facebook, Twitter, Gmail, TripAdvisor, etc.

To cater to this demand, Windows users can "pin" a Web Site directly to the Windows Task Bar or new Windows UI (previously known as "Metro"), negating the need to browse through a favourites list that may contain 100's or 1000's of web address.

The Task Bar / Windows UI* Icon essentially becomes another shortcut, but rather than being a shortcut to a program on its own, such as Internet Explorer, Word, Chrome or Photoshop, it's a shortcut to open the given Web Site within Internet Explorer.

*When talking about the Task Bar and Windows UI screen, I'll simply refer to the Task Bar from this point on., as this article is mostly aimed at the Desktop Task Bar, rather than the Windows UI.

Internet Explorer allows for any Web Site to be pinned to the Windows Task Bar, and this preference is always down to the visitor of the Web Site (you can't automatically add your site to a users Task Bar). But if someone decides that your Web Site is worthy of their Task Bar, Microsoft enables you to define a few features to help make your mark on your own Web Application.

When a Web Site is pinned, it retains its ability to work as a normal Web Site. However, the look of browser changes slightly when in desktop mode. Below is how the IE UI looks when you browse to Freeola's Gaming section.

A standard UI for Internet Explorer

If you were to pin the site to your Task Bar, then open Freeola Gaming from there, you would see a slightly difffernt browser UI, with custom colouring for the browser buttons and the addition of the favicon that acts as a link to the pinned site URL.

A pinned UI for Internet Explorer

Creating some custom pinned site settings.

You don't need to create any settings if you don't want to, as a user can add your Web Site to their Task Bar regardless, but if you'd like to personalise your pinned site a little, then this can be done within the <head> ... </head> section of your HTML (it doesn't have to be HTML5), using a selection of  <meta> elements with the required values for Internet Explorer to interpret.

While pinned site meta data refers to an "application", you don't have to have built an application, just a good old fashioned Web Site is fine.

For the example below, we'll imagine we are creating the pinned site settings for the Gaming Section of Freeola (http://cheats.freeola.com/gaming/).

Giving the Pinned Site a name, using "application-name".

 <meta name="application-name" content="Freeola Gaming">

The "application-name" defines the name of your site, which will appear as the tooltip title when a user hovers over the pinned site, and in the actual window of an opened pinned site. A simple and rather self explanatory setting. If you don't include it, the text used within the <title> ... </title> element will be used.

It should be noted that this is the only setting that does "NOT" start with the letters "ms", the remaining setting refer to "msapplication-" rather than simply "application-".

Adding a Tooltip, using "msapplication-tooltip".
<meta name="msapplication-tooltip" content="Gaming Cheats, Guides, Chat Forums and competitions">

The "msapplication-tooltip" provides some extra information that you may add, that'll appear in the tool tip that appears when the user hovers over the pinned site icon in the Task Bar. If you don't include it, no additional tool top text will be available.

Defining a starting point, using "msapplication-starturl".
<meta name="msapplication-starturl" content="http://cheats.freeola.com/gaming/">

The "msapplication-starturl" includes the Web Address of the page you'd like the user to see when they click on the pinned site icon. If this isn't included then the URL of the current web page is used. This can be handy for Web Applications that have many pages, as it gives you the chance to allow users to pin any page from within your web site, but then come back to a well designed start page. This is also the URL of the new home button that appears beside the navigational back and forward buttons.

Setting the size of the browser window, using "msapplication-window".
<meta name="msapplication-window" content="width=800;height=600">

The "msapplication-window" enables you to define a preferred width and height of the browser window for when the pinned site is opened for the first time from the Task Bar, though this can be easily overridden by the user. The minimum width is 800 pixels, while the minimum height is 600 pixels. This can be handy if you have a set size for your web site.

Chaning the colour of the browser navigation buttons, using "msapplication-navbutton-color".
<meta name="msapplication-navbutton-color" content="#578b99">

The "msapplication-navbutton-color" allows you to define the colour of the backward and forward navigation buttons on the browser window. The value "#578b99" refers to the colour Freeola Gaming uses across the web sites, as seen in the example near the top of the page.

A pinned Facebook has blue buttons (seen below), whereas a pinned YouTube has red. This can allow you to try and find a matching colour to go with your web site colour scheme.

Facebook colour of the browser navigation buttons

If you don't include this setting, Internet Explorer will select one automatically from the colour scheme of the favicon of the site. In the case of Freeola Gaming, this setting isn't really required as the same colour was automatically selected by IE.

And that is pretty much the basic introduction to a pinned site. It allows a user to pin a Web Site to their Task Bar for quick access, and it allows you as the site owner to add a little bit extra to it.

Jumping in to a Pinned Sites Tasks.

When you right-click on an application or a pinned site, you are offered a couple of standard menu items, as has been the case with many Windows Applications across multiple version of the OS.

One other feature you might like to make use of within a pinned site is creating a "Task on a Jump List". A Jump List allows you to include multiple "Tasks" that the user may wish to directly link to.

For a Web Site like Facebook, if you right-click on the pinned icon, you'll find direct links to "News", "Events", "Messages" and "Friends".

Screen Shot of Facebook Tasks in a Windows 8 Jump List

For a Web Site like Freeola Gaming, you could create a list of links to "Cheats", "Walkthroughs", "Forums" and "Win Free Games".

Creating a Task, using "msapplication-task".

You can create a "Task" by defining it using the "msapplication-task" setting, and giving it the details of the task, which include:

The default "window-type" is "tab", and it opens the selected task in a new tab next to the currently opened pinned site. The value of "self" will open the task in the current browser tab, and "window" will create a new pinned window.

All the above settings will be placed within the "content" attribute of a <meta name="msapplication-task"> element, separated by a semicolon, for example:

<meta name="msapplication-task" content="name=Task Name;action-uri=http://example.com/taskname/;icon-uri=http://example.com/taskname.ico;window-type=window">

In the case of Facebook, the Icon URLs represent a separate news Icon, an events icon, a messages icon and a friends icon, all of which are individual favicon (.ico) files.

In the case of our Freeola example, we could have the following code to create four "Tasks", one for "Cheats", "Walkthroughs", "Forums" and "Win Free Games", each with their own custom icon (that would need to be created of course):

<meta name="msapplication-task" content="name=Cheats;action-uri=http://cheats.freeola.com;icon-uri=http://images.freeola.com/cheats.ico">
<meta name="msapplication-task" content="name=Walkthroughs;action-uri=http://walkthroughs.freeola.com;icon-uri=http://images.freeola.com/walkthroughs.ico">
<meta name="msapplication-task" content="name=Chat Forums;action-uri=http://chat.freeola.com;icon-uri=http://images.freeola.com/chat.ico">
<meta name="msapplication-task" content="name=Win Free Games;action-uri=http://cheats.freeola.com/win-free-games/;icon-uri=http://images.freeola.com/win.ico">

The above would produce four Tasks that enable a pinned site to offer the user a direct link to the above four sections of the Freeola Gaming Web Site, with custom icons for each one. The "window-type" setting was left out as we can just allow the default "tab" to take care of it.

Jump in and give pinning a go!

You can dive in further with Pinned Sites, such as with dynamic jump lists, the pinned sites JavaScript API, multiple sized icons and live updates on the icon, but this was just a gentle introduction in to the concept of a pinned site that you can easily get in to with a few <meta> element settings.

You can give it a go yourself, simply add the settings to your own web site, upload it, and drag your web site to the Task Bar of Windows to Pin It, and see what happens.


Did you find this article helpful?