How to customize your website’s JumpList for IE9 site pinning

One of the killer feature of Internet Explorer 9 is website pinning. You can drag the favicon of any site from IE9’s address bar and drop it on Windows 7’s taskbar to pin it, just like you pin other applications. The common usage scenario will be to pin your favorite websites so that you can visit them any time with a click. But pinned websites are more than just taskbar bookmarks. A pinned site can behave like a desktop application with its own JumpList and icons. Better still – Microsoft allows website owners to customize how their Jumplist will look when pinned to the taskbar.

First, let us look how I have customized the JumpList for Instant Fundas.

ie9-instantfundas-jumplist

If you own a blog or a website, you can do this to your blog too by adding a few lines of code. Let’s find out how.

Get a favicon

If you don’t have a favicon for your website, it’s time to get one. The favicon is displayed next to the address bar in your browser and this is the same favicon that will appear when a visitor pins your site to their taskbar. Although favicons can be both images (GIF/PNG/JPEG) as well as Windows icon (ICO), only the ICO format is supported on pinned websites. If you use an image favicon on your site, it will not appear in the taskbar and get replaced by the default IE icon.

So the first step will be to get a ICO based favicon. You can convert your existing favicon to ICO bu using this online service. You can use either a 16x16 or 32x32 favicon. If you use 16x16 sized icons these will appear stretched in the taskbar, as the default taskbar icon size is 32x32. To avoid this Microsoft recommends 32x32 or even 48x48 sized favicon.

Create the JumpList

The JumpList for your website can be customized by the inclusion of a bunch of meta tags on your website’s code. These tags will determine how your site’s JumpList appears in the taskbar. There are several different meta tags that you can add.

First is application-name. This tag specifies your pinned app's name. Example:

Then comes the msapplication-tooltip, which defines the mouse-over tooltip message. Example:

Next up are a number of msapplication-task each of which define a command that appears under ‘Tasks’. You can add up to 5 tasks for your website. Example:

Next is msapplication-starturl. This value specifies the URL that opens when the pinned website is launched. If left blank, msapplication-starturl is going to be your website's root URL, but if you want a different landing page for your visitors, you are able to do that with this tag.

Finally, there is msapplication-window tag which tells IE9 how big to make the browser window when it launches from the pinned application. Again this is optional.

That is all there is to do. Watch a demo by pinning this blog to your taskbar and right-click on it to see the JumpList. Then try this out on your own blog.

How to Schedule Changes to Your Facebook Page Cover Photo

Facebook’s current layout, the so called Timeline, features a prominent, large cover photo that some people are using in a lot of different creative ways. Timeline is also available for Facebook Pages that people can use to promote their website or business or event. Although you can change the cover photo as often as you like, it’s meant to be static – something which you design and leave it for at least a few weeks or months like a redesigned website. However, there are times when you may want to change the cover photo frequently and periodically to match event dates or some special promotion that you are running or plan to run. So, here is how you can do that.

GeheeeSeptember 18, 2010 at 4:39 PM
Working here on www.geheee.com

One thing though - I can't see to get the x64 version of IE9 to launch. Even if I pin the site from IE9 x64
Kaushik PatowarySeptember 20, 2010 at 1:30 PM
Can't say about x64. I'm using the 32bit version.
AnonymousFebruary 16, 2011 at 9:42 PM
Same for me on Win7 x64. Can't see neither a favicon, nor a task list menu.

Instant Fundas

Search This Blog