Page 2: Implementing Site Pinning with Internet Explorer 9 and Windows 7

By Bradley Jones

Working with the Favicons

While Site Pinning can be as simple as dragging a Favicon to the taskbar in IE 9, to take full advantage, it was determined that high-resolution Favicons added more value. One of the ways to create a pinned site is to drag the Favicon to the taskbar. The Favicon is a small icon graphic that is used by browsers that is best known from being in the browser’s address bar to the left of the website address as shown in Figure 2.

Image 2

Figure 2: HTMLGoodies Favicon

The Favicon file is placed in the site’s directory for the browser to find. If a site doesn’t have a Favicon, then a default browser icon is generally used.

The HTMLGoodies team decided to use multiple images of various sizes within the Favicon file. This allows the site to present better resolutions when needed. While the browser generally uses a 16x16 sized icon, there is a value to also storing icons of sizes 32x32 and 64x64 to be used as appropriate. For example, when the Favicon is dragged to the taskbar a larger size icon can automatically be shown as the icon is dragged (as shown in Figure 3). Additionally, depending on Windows settings, a larger-sized icon might be used in the Windows TaskBar. Generally, the taskbar will use a 32x32 icon and the jumplist destination icon will be 16x16.

Image 3

Figure 3: The Favicon being dragged to the taskbar

There are a variety of tools for creating a single icon file with multiple file formats. For HTMLGoodies, the creative designers created several icons in sizes ranging from 16x16 to 64x64. Using the Icon Editor in Visual Studio 2010, these were put into a single Favicon file within just a few minutes. Time and effort expended were minimal.

Indicating Pinning with a Drag-Enabled Graphic

Because Site Pinning is a new concept, the HTMLGoodies team realized it needed to educate the average visitor who didn’t know the feature existed or was enabled on the HTMLGoodies site. It was determined that with a few JavaScript calls, the appropriate messaging could be added to each site to inform the user that they could pin the site, or that if they were interested in pinning, they could upgrade to IE 9.

Within this messaging was an indication that the user could drag a simple graphic to the Windows Toolbar to pin the site. You can see in Figure 4 how this message was relayed on the Developer.com website. Similar messages were displayed on each site if the user had a system that supported Site Pinning. If the user has already pinned the site another bit of JavaScript was added because there was no reason to display the dialog. In the case of Developer.com, the message given to the user was that they could upgrade to IE 9 to use the Site Pinning feature.

Image 4

Figure 4: Informing the visitor that they should pin the site.

The amount of effort to set up this messaging was minimal. The code used on Developer.com is in Listing 1. The same basic code was used on the various other websites in the network.

Listing 1: Code for showing the “Pin this site” message

<script type="text/javascript" language="javascript">

if(jQuery.browser.msie){

if(document.documentMode != undefined && document.documentMode==9){

if (!window.external.msIsSiteMode()) {

document.write('<div id="pinMeContainer"><img class="msPinSite"

src="/images0/developer64x64.png" height="64" weight="64" /><br/>

<span id="pinMe">To Pin this site, drag this image to the left to

your Windows Taskbar. Try it now!</span></div>');

}

}

else{

document.write('<div id="pinMeContainer"><img class="msPinSite"

src="/images0/developer64x64.png" height="64" weight="64" /><br/>

<span id="pinMe">Upgrade your browser to IE 9 to see the power of

Site Pinning!</span></div>');

}

}

</script>

Enabling the graphic in the message to be dragged to the Taskbar required only one minor change — the addition of class=”msPinSite” as you can see above. The addition of this single tag allows the image to be dragged to the Taskbar.




Page 2 of 4

Previous Page
1 2 3 4
Next Page

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •  
Thanks for your registration, follow us on our social networks to keep up-to-date