Scott Hanselman

Enabling Dragging of an Image to Pin a Site to the Windows Taskbar in IE9

February 18, '11 Comments [8] Posted in IE9
Sponsored By

My site's custom jumplist including Archives, Videos, Twitter and FacebookI blogged in September about a some features of IE9 that I really dug, specifically adding Jump Lists to your website and Pinning WebSites to the Taskbar.

I made a few small markup changes and now you can pin this blog to your taskbar if you're running Windows 7. I also added right-click Jump Lists to this blog as well.

However, I just noticed that the IE9 Release Candidate that just came out includes a little feature where you can drag an image from a website to pin the site to the taskbar.

Clearly this feature was created as an opportunity for me to enable you, Dear Reader, do drag my giant forehead to the Windows 7 taskbar. No question.

Enabling Dragging of an Image to Pin a Site to the Windows Taskbar in IE9

All I had to do was add:

class="msPinSite"

to the image I wanted to use. You can set other options as well, like the image that's used while dragging (it uses favicon by default) as well as callouts for mouseovers and stuff.

I just did this, as it was simpler:

<img class="msPinSite" src="http://www.hanselman.com/blog/images/tinyheadshot2.jpg" alt="Scott Hanselman" title="Drag this image to your Windows 7 Taskbar to pin this site with IE9 - Scott Hanselman">

Here I am dragging my headshot to the taskbar to pin it. Of course, you can always pin any site by dragging the favicon from the address bar.

Dragging the image down to the Taskbar. 

You can even add little toolbars to taskbar with JavaScript (for sites like Pandora, etc). It's all standard markup and JavaScript and it's setup in such a way that other browsers ignore it as they like.

You can also use JavaScript to push alerts to the icon, maybe for new messages, chat, etc. It's easy to this stuff, check it out there's a whole section on MSDN on Site Pinning. You can also View Source on this demo and figure it out. It took me 5-10 minutes. The hardest part for the Jump List was finding cool icons.

One more very nice browser for my collection of All Non-Released Browsers. Yet.

IE9, FireFox 4, Chrome 11, Opera 11

Enjoy.

About Scott

Scott Hanselman is a former professor, former Chief Architect in finance, now speaker, consultant, father, diabetic, and Microsoft employee. He is a failed stand-up comic, a cornrower, and a book author.

facebook twitter subscribe
About   Newsletter
Sponsored By
Hosting By
Dedicated Windows Server Hosting by ORCS Web
Friday, February 18, 2011 9:54:58 AM UTC
I have exactly the same collection of browsers at home, however, when we wrote a demo app in html5 at work, we had to use Safari to make sure it worked on iPad! Have you taken care of how your blog is displayed on mobile devices yet?
FunkyRus
Friday, February 18, 2011 9:58:51 AM UTC
Why is it that, the image you tried to drag and the image being dragged are different?
Matt
Friday, February 18, 2011 10:02:17 AM UTC
it's the favicon, Matt.
FunkyRus
Friday, February 18, 2011 10:10:53 AM UTC
Right. You can set the drag icon to any PNG also if you like.

This blog has a barebones mobile theme but I go back and forth about enabling it. I prefer to let the phone browser do the work, not me second guessing.
Scott Hanselman
Friday, February 18, 2011 4:00:05 PM UTC
This is all really cool but I hope we don't end u in another situation where we have to add lots of different things for different browsers and potentially different OS's. I know chrome recently added some stuff for popup notifications from gmail. Hopefully it will all come together into an agreed standard.
Saturday, February 19, 2011 12:09:33 AM UTC
Scott - thanks. I kept meaning to install IE9, and this finally gave me the incentive I needed to just do it!
Monday, February 21, 2011 12:00:11 AM UTC
You rock, Scott! Always have, always will! :)
EricTN
Tuesday, February 22, 2011 3:25:11 AM UTC
Dear, Scott,
I also wrote an article talking about this "Win7+IE9 RC Only" feature:)
http://www.codeproject.com/KB/HTML/IE9-RC-Enhancement.aspx
Comments are closed.

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.