Hot, Hot, Hot . . .

By
Services for Real Estate Pros with 2inovate

I was so pleased when I found this little gem, and I found it at one of my all-time favorite sites: www.designisphilosophy.com. The site is the brain work of Morten (a.k.a. Mor10) Rand-Hendriksen. Morten has a sister site you may want to peruse if you are into web design and graphic design; www.pinkandyellow.com - a gorgeous site featuring much of his current work.

But here is the hot, hot, hot part: the following article came from the www.designisphilosophy.com site and Morten explains how to create a "Pinnable" site if you use wordpress . . . enjoy the article. One thing I almost forgot . . . go check out this ultra cool little tool for those of you who have art in their hearts . . . LOL, this is a lot of fun: IoGraphica. Just stop by and check it out!

 

OK, the article:

 

 

IE9 Pinned Sites for WordPress

With the release of Internet Explorer 9 came a new and very cool feature that can greatly enhance the user experience for frequent visitors and also increase exposure for sites that activate it. The feature is called Pinned Sites and lets you turn any website or even web page into a customized pinned item on the Windows 7 toolbar.

What I like about this feature is that it runs of non-intrusive meta tags and JavaScript so that although it only works in IE9, it doesn’t interfere with other browsers. It becomes a value added experience for IE9 users but it doesn’t take anything away from people who do not use IE9 or don’t have Windows 7 as their operating system. Progressive enhancement I believe they call it

Last Saturday I did an hour long demo of this feature and how to build it into a WordPress site. The example in question was this very site and now I’m going to show you how you can make  your own WordPress site pinnable too.

Pinned Sites and why they matter

So what is a Pinned Site in IE9? The idea is simple: You open a site in IE9, grab the tab for that site and pull it down to your Windows 7 task bar. If the site is pinnable it will dock onto the taskbar with a custom icon like you see in the grab above. When the user then clicks the icon, a custom IE9 window will open just for this site. The size and even element colour of that window can be defined by the site owner. The result is that the website becomes more like a native application on the computer and this in turn leads to increased stick time (49% for the Huffington Post), more exposure and higher returning visitor rates. Whether you like IE9 or think it’s the worst thing since sushi falvoured gum the reality is site owners will benefit from this functionality. But I digress.

Making your site pinnable

To set up basic pinned site functionality you need a high quality favicon and access to your theme files. If you have both you’re good to go.

Because the pinned icons on the taskbar are larger than the regular ones I recommend using X-Icon Editor (free online tool) to generate the icon and create it for all four standard sizes (64×64, 32×32, 24×24 and 12×12). I also recommend creating it from a high quality and high contrast PNG file so it looks nice regardless of the background.

Once  you have the favicon.ico file save it to your current theme folder so it lives alongside index.php and all the other files. Once that’s done it’s time to crack open header.php in your theme folder and get to work.

To get the favicon to work add the following code right before the end head tag:

<link rel="shortcut icon" href="<?php echo get_bloginfo('template_url') ?>/favicon.ico" />

Assuming you placed the favicon.ico file in the root of your theme folder this will automatically add it as a favicon for all browsers, even really old ones. Note that if you already have a link with rel set to shortcut icon like this you’ll create a mess. You should only have one favicon link in your theme, but most WordPress themes including TwentyTen don’t have one so you should be fine.

Next, to make the site pinnable we’re going to add five meta tags directly underneath:

<meta name="application-name" content="Your Site Name" />

<meta name="msapplication-tooltip" content="Tooltip message" />

<meta name="msapplication-starturl" content="http://www.YourSite.com" />

<meta name="msapplication-window" content="width=600;height=600" />

<meta name="msapplication-navbutton-color" content="#colour" />

The above code is pretty self explanatory. Just swap out the content values with your own preference. The msapplication-window tag controls the size of the custom IE9 window that opens when you click the button.. The msapplication-navbutton-color tag controls the colour of the navigation buttons in the window as in the image above.

With the favicon code and these five meta tags included in your header your site will be pinnable. That really is all there is to it. But you can do a lot more!

Comments (3)

Ken and Leslye Huebsch
3x Individual Agent of the Year, Luxury Homes, First-Time Buyers, Residential Resales, New Construction - Harrisburg, PA
Realtors - Harrisburg Homes for Sale 717.514.1793

I wish I understood all this because it's probably loaded with good stuff! Thanks for the post that someone much smarter that me will probaby love! (You lost me at 'pinnable'!)

Apr 25, 2011 03:09 PM
Eric Rogers
Century 21 Pro-Team - Aurora, IL

Not a bad tip - could be useful for clients that want to pin your IDX search page. It may not catch on and be used regularly, but if it doesn't hurt older browser compatability, it doesn't matter much anyways.

Apr 25, 2011 03:31 PM
John Pusa
Berkshire Hathaway Home Services Crest - Glendale, CA
Your All Time Realtor With Exceptional Service

Larry - Thank you for the detailed quality information on various websites for real estate. Excellent blog

Apr 25, 2011 05:08 PM