You might remember we recently had a look at Pinned Sites with Internet Explorer 9 and Windows 7. A comment about that functionality in a recent Craig Buckler article set me to thinking. Craig said “There are some good features but I doubt many developers will have the time or inclination to use them unless other browsers implement similar functionality”.
As with many developments that extend functionality, regardless of the browser involved, I suppose that’s true. For me, however, the decision to make use of those features is driven less by time and inclination than by client demand. If your client or boss wants users to be able to do things like pin their website to the taskbar, the question is not whether to do it, but how to doit, and do it so that it helps to meet your client’s goals.
Microsoft clearly wants Internet Explorer 9 to not just be a window into a website, but a means of delivering a great user experience while helping website owners achieve their goals. What pinned sites offer is a way to build the relationship between the website owner and the website user—the customer, if it’s a commercial website—without the browser getting in the way.
As IE9 browser share grows, that has the potential to be worth millions to website owners in terms of user engagement. According to BuildMyPinnedSite.com, some big websites have already weighed-in on the value:
- Business Insider – read 57% more pages, spend 95% more time on site
- Flixster – read 34% more pages, spend 57% more time on site
- Gilt – visit 39% more often, add 160% more items to shopping cart, complete 45% more sales transactions
- The Killers – read 65% more pages, spend 103% more time on site
- hi5 – respond to 200% more social requests (like friends, games, notifications)
- Huffington Post – spend 49% more time on site
The notion of decreasing the role of the browser is widespread – everyone is reducing the amount of screen space taken up by browser chrome, toolbars, scrollbars in order to deliver more content. IE9 takes that a step further by communicating browser-based information without the user having to go to the browser at all, or at least not until they need to.
Pinned sites are a key part of that approach, by making the taskbar icon much more than a quick link to a particular website or application. The icon itself can be used to deliver information and empower the user without having to load pages in the browser. The aim is to send the user back to the browser when the content warrants it. Simple, smart and potentially very powerful.
In this article, we’re going to look at just how to do that. If you need to refresh yourself on the basics of pinned sites, take a look back at our earlier article or go to BuildMyPinnedSite.com to build your own site in a few minutes.
Now, let’s get stuck in.
Why Use Pinned sites?
Pinned sites are a way of extending the functionality of your website onto the desktop. Users can pin your site to the taskbar, start menu, or desktop and once they do, you can unlock some great features you might not otherwise have access to like Favicons, Jump Lists, Notifications and Thumbnail Toolbars.
These features allow you to customize the information a website provides to a user via the taskbar (or desktop, or start menu) icon.
Let’s jump right in and see how Notifications work.
Notifications – Letting the User Know Something Has Changed
Notifications are pretty self explanatory: they allow you to notify the user of changes to your website. Two examples of using Notifications are changing the appearance of the icon overlay for your pinned site, and flashing the pinned site icon to get the user’s attention. Let’s take a look at changing the icon overlay.
Icon Overlays
By default when you create a pinned site, the default icon is the favorite icon from the website. Adding an icon overlay creates a visual effect that the user notices instantly.
The first thing you must check is whether or not the site was launched as a pinned site. Finding this out is easy by making a call to msIsSiteMode. It’ll return undefined if it’s not.
To create an icon overlay is simple. A call to msSiteModeSetIconOverlay adds an icon overlay to the pinned site taskbar button. There are two parameters for msSiteModeSetIconOverlay and they are:
bstrIconUrl– a required string value of the absolute URL of an icon.bstrDescription– an optional string value that provides an accessible description of the icon overlay.
The following example displays the functionality I want to focus on. When the website is launched as a pinned site, every four seconds it updates the icon overlay to either display the traffic lights as on or off.
$(function () {
if (window.external.msIsSiteMode()) {
pin.clearOverlay();
setInterval(pin.activateOverlays, 4000);
}
});
pin = function () {
var trafficLightFlag = false;
function isTrafficLightOn() {
return trafficLightFlag;
}
function setTrafficLight() {
trafficLightFlag = !trafficLightFlag;
}
return {
clearOverlay: function () {
window.external.msSiteModeClearIconOverlay();
},
activateOverlays: function () {
if (!isTrafficLightOn()) {
window.external.msSiteModeSetIconOverlay("traffic-light-on.ico", "Traffic lights on!");
setTrafficLight();
} else {
window.external.msSiteModeSetIconOverlay("favicon.ico", "Traffic lights off!");
setTrafficLight();
}
}
}
} ();The image below shows the icon overlay when the traffic lights are on.
Figure 1. Traffic Lights On
The image below shows the icon overlay when the traffic lights are off.
Figure 2. Traffic Lights Off
Flashing Pinned Site Buttons
If an icon overlay isn’t getting your users’ attention, then flashing the pinned site button will. Enabling this feature is as easy as calling msSiteModeActivate. This function expects no parameters. To demonstrate how to use this feature I created a sample page that contains one input button. If after four seconds the user doesn’t click the button, the pinned site button will flash.
$(function () {
if (window.external.msIsSiteMode()) {
pin.startTimer();
}
});
pin = function () {
var buttonClicked = false;
var timeoutId = 0;
function hasClicked() {
return buttonClicked;
}
function setFlag() {
buttonClicked = true;
}
return {
startTimer: function () {
$("#SayHello").click(function (e) {
e.preventDefault();
setFlag();
});
timeoutId = setTimeout(pin.hasClickedButton, 4000);
},
hasClickedButton: function () {
if (!hasClicked()) {
clearTimeout(timeoutId);
window.external.msSiteModeActivate();
}
}
}
} ();The following image shows the pinned site when it is in the foreground.
Figure 3. Pinned site Not Active
And this image shows the pinned site when it is sitting behind another window.
Figure 4. Pinned site Active
A caveat when you’re using this is that the pinned site must be behind another window. If the pinned site is in the foreground, this method does nothing and you maybe sitting there wondering why nothing is happening.
Working with the Thumbnail Toolbar Buttons
Working with icon overlays is cool, but to give your site that extra touch of class you can make use of the Thumbnail Toolbar Buttons. In a nutshell, the thumbnail toolbar lets you create interactive controls that supplement the behavior of your webpage. When the user clicks a button, the onmsthumbnailclick is raised, which means you can react to what the user is doing. To create the thumbnail toolbar you call the msSiteModeAddThumbBarButton function. There are two parameters for msSiteModeAddThumbBarButton and they are:
bstrIconUrl– a required string value of the absolute URL of an icon.bstrTooltip– a required string value of the name of the button, which is displayed as a tooltip.
Once you have defined your toolbar buttons, you need to call msSiteModeShowThumbBar. This enables the thumbnail toolbar preview of a pinned site. You can include up to seven buttons on the toolbar. Once you call msSiteModeShowThumbBar, new buttons cannot be added to the toolbar. The following example demonstrates how to get a thumbnail toolbar up and running.
$(function () {
if (window.external.msIsSiteMode()) {
pin.addThumbBar();
}
});
pin = function () {
return {
addThumbBar: function () {
window.external.msSiteModeAddThumbBarButton("apple.ico", "Apples!");
window.external.msSiteModeAddThumbBarButton("grape.ico", "Grape!");
window.external.msSiteModeAddThumbBarButton("orange.ico", "Oranges!");
window.external.msSiteModeShowThumbBar();
}
}
} ();The next image shows the end result.
Figure 5. Pinned site Not Active
The toolbar buttons in this example are an apple, grape and an orange. I want to extend this example and add the functionality to react when the user clicks a toolbar button. Here’s the code to do that.
$(function () {
if (window.external.msIsSiteMode()) {
pin.addThumbBar();
}
});
pin = function () {
var fruit = ["Apple", "Grape", "Oranges"];
return {
addThumbBar: function () {
window.external.msSiteModeAddThumbBarButton("apple.ico", "Apples!");
window.external.msSiteModeAddThumbBarButton("grape.ico", "Grape!");
window.external.msSiteModeAddThumbBarButton("orange.ico", "Oranges!");
window.external.msSiteModeShowThumbBar();
$(document).bind("msthumbnailclick", function (button) {
pin.thumbBarClickEvent(button);
});
},
thumbBarClickEvent: function (button) {
alert("You clicked " + fruit[button.originalEvent.buttonID - 1]);
}
}
} ();When a button is clicked, the event is raised and you can find out which button was clicked by its buttonID. This is a number which corresponds to the position of the button.
You can also change the state of a button by calling msSiteModeUpdateThumbBarButton. There are three parameters for msSiteModeUpdateThumbBarButton and they are:
uiButtonID– a required integer value that specifies the ID of the button that was clicked.fEnabled– a required boolean value that determines if the button is disabled or not.fVisible– a required boolean value that determines if the button is visible or not.
The following example shows you how to disable a button once it has been clicked.
$(function () {
if (window.external.msIsSiteMode()) {
pin.addThumbBar();
}
});
pin = function () {
return {
addThumbBar: function () {
window.external.msSiteModeAddThumbBarButton("apple.ico", "Apples!");
window.external.msSiteModeAddThumbBarButton("grape.ico", "Grape!");
window.external.msSiteModeAddThumbBarButton("orange.ico", "Oranges!");
window.external.msSiteModeShowThumbBar();
$(document).bind("msthumbnailclick", function (button) {
pin.disableButton(button);
});
},
disableButton: function (button) {
window.external.msSiteModeUpdateThumbBarButton(button.originalEvent.buttonID, false, true);
}
}
} ();Here’s the end result.
Figure 6. Disabling Toolbar Buttons
If you want to do more than disable the button, you can also update the icon on the button by calling msSiteModeAddButtonStyle. This defines an alternative icon image and tooltip for the specified button. There are three parameters for msSiteModeAddButtonStyle and they are:
uiButtonID– a required integer value that specifies the ID of the button that was clicked.bstrIconUrl– a required string value of the absolute URL of an icon.pvarTooltip– a required string value for the tooltip.
The pvarTooltip parameter on MSDN says this is optional, but my experience is that it is required. msSiteModeAddButtonStyle returns an ID of the new button style. This ID must be passed to msSiteModeShowButtonStyle for the style to be applied. There are two parameters for msSiteModeShowButtonStyle and they are:
uiButtonID– a required integer value that specifies the ID of the button that was clicked.uiStyleID– a required integer value returned from of msSiteModeAddButtonStyle.
The following examples demonstrates how to use this functionality. In this example, when the button is pushed five time, the icon changes from a fruit to a car.
$(function () {
if (window.external.msIsSiteMode()) {
pin.addThumbBar();
}
});
pin = function () {
var style = 0;
var fruitClicked;
var fruitConst = ["Apple", "Grape", "Orange"]
var fruit = {
"Apple": { TimesClicked: 0 },
"Grape": { TimesClicked: 0 },
"Orange": { TimesClicked: 0 }
}
function clickedFruit(button) {
return fruit[fruitConst[button.originalEvent.buttonID - 1]];
}
function howManyTimes(button) {
fruitClicked = clickedFruit(button);
return fruitClicked.TimesClicked;
}
function addToClickCount(button) {
fruitClicked = clickedFruit(button);
fruitClicked.TimesClicked = fruitClicked.TimesClicked + 1;
}
return {
addThumbBar: function () {
window.external.msSiteModeAddThumbBarButton("apple.ico", "Apples!");
window.external.msSiteModeAddThumbBarButton("grape.ico", "Grape!");
window.external.msSiteModeAddThumbBarButton("orange.ico", "Oranges!");
window.external.msSiteModeShowThumbBar();
$(document).bind("msthumbnailclick", function (button) {
pin.addToClick(button);
});
},
addToClick: function (button) {
if (howManyTimes(button) 4) {
addToClickCount(button);
} else {
pin.updateButtonStyle(button);
}
},
updateButtonStyle: function (button) {
style = window.external.msSiteModeAddButtonStyle(button.originalEvent.buttonID, "warning.ico", "desc");
window.external.msSiteModeShowButtonStyle(button.originalEvent.buttonID, style);
}
}
} ();The image below shows the end result after five clicks.
Figure 7. Updating Button Styles
Where Will It All End?
Even this article has really only scratched the surface of what you can do with pinned sites, but I hope it’s given you some perspective on how to set up the extended functionality that Internet Explorer 9 offers, and see why website owners might want their developers to implement that functionality.
And I haven’t even taken apart what you can do with Jump Lists – that’s a whole new article in itself.
I don’t think there’s much doubt that not only IE9 but other browsers will take pinned sites further in the near future. Getting the browser out of the way is going to be a key part of building the relationships between website owners and website users.
The best place to go from here is to check out the official documentation on MSDN or BuildMyPinnedSite.
What do you think? Can you see the potential for pinned sites? Can you afford to ignore that kind of functionality? Or do you think there are better ways to build those relationships?
SitePoint Content Partner
This tutorial has been made possible by the support of Microsoft. In cooperation with Microsoft and independently written by SitePoint, we strive to work together to develop the content that’s most useful and relevant to you.
Written By:
Malcolm Sheridan
Malcolm Sheridan is a Microsoft awarded MVP in ASP.NET and regular presenter at conferences and user groups throughout Australia. Being an ASP.NET Insider, his focus is on web technologies and has been for the past 10 years. He loves working with ASP.NET MVC these days and also loves getting his hands dirty with JavaScript.
