Scott Hanselman

Make a Windows 8.1 Pinned Live Tile for YOUR website in minutes

October 21, '13 Comments [34] Posted in Win8
Sponsored By

imageI actually set this up on my site a few months back when Windows 8.1 preview showed up, but I didn't mention it. If you've got Windows 8.1, you've likely figured out that the most fun apps are ones that have active live tiles.

I'm a web guy and I like web sites, though. Certainly there's no reason or need for a "Hanselman" app anymore than there's a need for an app for, say, The Verge.com. We have perfectly lovely sites today and work just fine. We also have RSS feeds that contain our content and let folks know when a site has been updated.

You can add some HTML META markup to your site now and have a multi-size automatically updating Live Tile for Windows 8.1 in minutes. It's very cool.

Pin a Site to your Windows 8.1 Start Screen

  • Open Full Screen IE (that's the big blue IE from the Start Screen, not the one on your Desktop).
  • Visit the site you want to pin, like http://hanselman.com/blog.
  • Click the Star to Favorite the site, then the Pin to Pin it as a Live Tile
    • Before you finally pin the site, you can click the arrows left or right to pick the size of the Tile.
    • You can change the size whenever from your Start Screen by right clicking the Tile and clicking Resize.

Don't worry about my creepy eyes staring at you. My RSS feed will start coming in soon and the Live Tile will flip over.

Get a Large Live Tile for Your Site

The easiest way to make one of these is to visit http://buildmypinnedsite.com as they have a wizard that helps you make four file sizes and setup notifications from your RSS feed, as well as pick the background color for your Tile.

ASIDE: Back when IE9 came out, I added Site Pinning support to my site in a similar way. You can still do that for your Windows Taskbar, in fact, and get a nice right-click context menu with lots of quick access to my site, archives and podcasts. View Source or visit the link there for details.

There's a very detailed API on MSDN if you'd like to understand all the little details of Pinned SItes with IE9, 10 and 11. It's literally minutes of work on the low end, and maybe an hour if you go nuts with JavaScript.

You can put all your META tags in the HEAD and just have a pile of them if you want, which is fine:

<meta name="application-name" content="Scott Hanselman's Blog"/>
<meta name="msapplication-TileColor" content="#83382b"/>
<meta name="msapplication-square70x70logo" content="/tiny.png"/>
<meta name="msapplication-square150x150logo" content="/square.png"/>
<meta name="msapplication-wide310x150logo" content="/wide.png"/>
<meta name="msapplication-square310x310logo" content="/large.png"/>
<meta name="msapplication-notification" content="frequency=180;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://feeds.hanselman.com/ScottHanselman&amp;id=1;cycle=1"/>

More on that crazy notification one in a second.

Or, if you want a tidy META area, just move this stuff into a static XML file:

<!-- IE11 pinning and live tiles -->
<meta name="application-name" content="Scott Hanselman's Blog"/>
<meta name="msapplication-config" content="/browserconfig.xml" />

And that file, is predictably similar. Again, it's not needed, but you can either put the stuff in META tags, or in a file.

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="tiny.png"/>
<square150x150logo src="square.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.jpg"/>
<TileColor>#83382b</TileColor>
</tile>
<notification>
<polling-uri src="http://notifications.buildmypinnedsite.com/?feed=http://feeds.hanselman.com/ScottHanselman&amp;id=1"/>
<frequency>180</frequency>
<cycle>1</cycle>
</notification>
</msapplication>
</browserconfig>

Now, let's look at those notifications. The service above is speeding things up by making the little Tile Notifications XML file for me. This is similar to Facebook's open graph stuff or Twitter Cards, where you want an image (if available) plus the title of a post to show up as a "card" or in this case, a Tile.

ASIDE: You can do similar type things in other browsers with nice custom PNGs and Icons, like Opera's Speed Dial, or iPhone Home Screen icons. I've done all those for my site. There's a lot, but it's minutes each and then it's done.

You get some amount of control as to text and images that can appear in your live tile if you make the notification yourself. The BuildMyPinnedSite service, as you can see in the URL above, takes your RSS feed and makes it WAY smaller (mine is too large to poll, for example) and pulls out prominent images. I set my Frequency at a few hours, since I'm a blog, not a news site. No need to poll me every 30 minutes!

Here's a Wide title generated by a recent post:

image

Or a Large tile:

image

The site will generate those, but if you're a really high-traffic site you might just write a little handler to make these Notification Tile Files from your RSS feed.

<tile>
<visual lang="en-US" version="2">
<binding template="TileSquare150x150Text04" branding="logo" fallback="TileSquareImage">
<text id="1">CollectionViewSource is crazy useful for binding to filtered Observable Collections on Windows Phone 8</text>
</binding>
<binding template="TileWide310x150ImageAndText01" branding="logo" fallback="TileWideImage">
<image id="1" src="http://www.hanselman.com/blog/content/binary/Windows-Live-Writer/CollectionViewSource-is-crazy-useful-for_122F5/image_b5516dd4-31b0-422b-8742-9bc1fbfa5d12.png"/>
<text id="1">CollectionViewSource is crazy useful for binding to filtered Observable Collections on Windows Phone 8</text>
</binding>
<binding template="TileSquare310x310TextList02" branding="logo" contentId="http://www.hanselman.com/blog/PermaLink.aspx?guid=11a2bbd4-261b-4ba2-93cc-cdbdc3de6825">
<text id="1">CollectionViewSource is crazy useful for binding to filtered Observable Collections on Windows Phone 8</text>
<text id="2">SCREENCASTS: What's New in Visual Studio 2013 - learn over lunch!</text>
<text id="3">IE10 and IE11 and Windows 8.1 and __doPostBack</text>
</binding>
</visual>
</tile>

I wonder how hard it would be to write a WordPress, Drupal, Ghost, or MiniBlog plugin to make these notification files? Not hard I think.

UPDATE: Looks like Nick Halsey has already crated a Windows Pinned Sites Plugin for WordPress. Nice job, Nick!

UPDATE: Drupal has Pinned Sites also!

I'm looking forward to seeing tiles like this for sites I visit like LifeHacker, The Verge, CNN, etc. I'll be more likely to pin a site to the home screen if it also shows me updated headlines.

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
Monday, October 21, 2013 8:43:49 AM UTC
Does this only work if you've got IE as your default browser?
Greg
Monday, October 21, 2013 9:11:40 AM UTC
Hey, I see myself (strandloper) in one of the live tiles in your image. Looks like a Twitter feed.
Monday, October 21, 2013 10:46:45 AM UTC
Not sure how I feel about WIndows 8.1 after last night.

I upgraded one (dual core) laptop and it took over 6 hours with the download and subsquent update. I have another laptop and a desktop to do. Not sure I want to invest another 12 hours in updates! Sadly, I can't afford an MSDN subscription so MS have decided I'm not worthy to have the iso download, so I am forced to download multi-Gb files on all three machines.

It's kind of giving me another reason not to bother with Windows 8, which is a real shame because I rather like it. I just can't afford to be without my main work machine for potentially 6 hours.
Steve Barnett
Monday, October 21, 2013 11:38:16 AM UTC
Which tool do you use to take animated gif screenshots?
Mark
Monday, October 21, 2013 12:09:20 PM UTC
We put this into a site I work on back in August ahead of the RTM after finding it hidden away in the IE 11 new features, given that we already had an RSS feed so was pretty trivial.

It was certainly a lot easier to add than a Windows 8.0 Live Tile.

It's a shame you can only do it from the "Metro" IE though.
Martin Costello
Monday, October 21, 2013 1:07:49 PM UTC
Seems that if you have another browser installed IE automatically opens on the desktop. Anybody know how to open the metro IE in this case?
Mladen Mihajlovic
Monday, October 21, 2013 1:59:42 PM UTC
Scott,

Is it true the RSS feed only shows up when IE11 is the default browser? I want Win 8.1 live tiles for my site, even if I'm using Chrome.

I ask because I built a live tile for my internet radio site and its RSS feed of user thumb-ups, and it worked...until I changed my default browser to Chrome, then the live tile stopped being live (no more RSS feeds coming in).

Should this scenario work?
Monday, October 21, 2013 4:34:22 PM UTC
Is there any mechanism for web sites to use Windows toast notifications?
Zack Peterson
Monday, October 21, 2013 5:50:24 PM UTC
@SteveBarnett You're welcome: http://winsupersite.com/windows-8/windows-81-tip-download-windows-81-iso-windows-8-product-key
Monday, October 21, 2013 9:27:11 PM UTC
Mark - That's Camtasia.

Zack - not that I know of. Try @reybango on twitter.

Judah - I haven't tried. I use IE in metro and Chrome on the desktop.

Tuesday, October 22, 2013 3:19:26 AM UTC
Hey Scott, sorry to hijack this thread but did you ever get around to figuring out what the dealio is with Anti-XSS being completely broken?

http://wpl.codeplex.com/releases/view/80289#ReviewsAnchor

What do you do for Anti-XSS on your blog?
Tuesday, October 22, 2013 8:30:54 AM UTC
Nice tip! Thank you, Scott.

I will try and add a handler for Octopress based blogs (like mine)... :-)
Tuesday, October 22, 2013 9:46:40 AM UTC
It is an awesome feature.. trouble is getting these sites to add the code. The Verge does not offer a Pin to Start tile, I even nudged @tomwarren about it but no reply

Here are a few of the sites I know of that offer the feature.
CNN, nbcnews, wpcentral, MSN.com, techmeme, Neowin, WinBeta, Bing.com, deviantart.com, Atari.com/arcade, foxnews.com, Microsoft.com

Does anyone know others?

Msft is going to have to be proactive about sites adding this code for IE11, I've already sent off feedback to a few good sites I use, I suggest others do the same
Tuesday, October 22, 2013 1:08:05 PM UTC
As a .NET dev who is now learning Android, I am flabbergasted by what MS thinks is cool. Live tiles?! Really?! This tiles rubbish will be relegated to the scrapheap in good time. Then hopefully MS will come up with a decent platform which might actually compete with iOS and Android.
Dave
Tuesday, October 22, 2013 5:14:07 PM UTC
@Dave - I think live tiles are pretty cool, tbh.
Tuesday, October 22, 2013 5:33:47 PM UTC
Dave - I like Live Tiles over a notification center. I just hit the win key and see the news and weather. I'd need a widget for Android, and there's no solution for iOS.
Tuesday, October 22, 2013 7:13:10 PM UTC
Nice. It's like the Desktop is...Active. Like an Active Desktop. That'd be a good name for it! :p
Tom A
Wednesday, October 23, 2013 2:05:01 AM UTC
Fair enough. I guess I have just been so dissapointed in Windows 8 that I am not open to these things. Heck, it drove me to Android and I hate Java. But I'm such a believer in that platform that I could overcome that. Despite that, I'll always read this blog for the awesome .NET tips.
Dave
Wednesday, October 23, 2013 12:49:47 PM UTC
WordPress now has it, Drupal now has it... It looks like we're missing Joomla. Maybe I need to develop Joomla's plugin myself...

By the way, it's amazing that despite all the installation quirks with Windows 8.1 development has already started for this platform.
Wednesday, October 23, 2013 8:28:26 PM UTC
I still haven't made the leap to Windows 8 at all but that right there is tempting me to move!
Thursday, October 24, 2013 8:56:49 PM UTC
Scott, it appears that is indeed the case; the live tile only works while IE 11 is the default browser. If I change my default browser to Chrome, the live tile stops being live.

That part is super lame.

I'd love to use live tiles for my website, even if I'm an equal opportunity browser-ist and use Chrome on the desktop. It should work here, nu? I complained to the IE team on twitter, but didn't hear back. So, I guess I'm complaining to you, even though you're not on the IE team. :-)
Friday, October 25, 2013 12:54:39 AM UTC
Scott, is there any way to test this out if you don't have Win 8.1? Does MS have a website tile tester site of some sort (I can't seem to find one in a few minutes of googling). It seems like it'd be a pretty easy tool to build for developers to test their code against.
Friday, October 25, 2013 8:48:15 AM UTC
@Steve - I had tears in my eyes from your post. The picture of you travelling to McDonalds and forced to download 3,5 gb over their WIFI. Not able to do any work for hours. Sad!
@ScottHe-man awesome as always!
Maurits
Sunday, October 27, 2013 10:12:50 PM UTC
Hi Scott, I've followed your tutorial. I've got a small problem I couldn't solve - when I pin my blog as a Live Tile - I only have two sizes to pick from - small and medium, no other option. Any ideas why?
Sunday, October 27, 2013 10:36:53 PM UTC
I'd rather repay those who pin my site with something annoying like this
grunt
Monday, October 28, 2013 11:35:33 AM UTC
I'd love to try this Scott, but I've been trying for 2 weeks to upgrade to Windows 8.1, but just can't get it to work. I even started from a clean machine and it still wouldn't upgrade. You need to kick someone's butt Scott, or no one is going to bother doing anything with Windows 8.1.
Richard
Tuesday, October 29, 2013 4:54:25 PM UTC
don't install windows 8.1 if you have bothered to create custom tiles using programs such as obly tile.. windows 8.1 will delete them all and replace them with useless tiles..
jared
Thursday, October 31, 2013 3:00:34 PM UTC
I did this on my test blog at bobs-tech.blogspot.com and it worked fine.
Then I did it on my regular blog at TallasseeTV.com (also hosted at Blogspot) and it had a little problem. The four tiles work, but only the first post shows up. Other posts show up as %2 and %3 on the large tile.
Any idea why it doesn't work on the second blog?

Also... should the big tile show pictures like the wide tile does?
Friday, November 22, 2013 8:40:53 AM UTC
Hello Scott,

Thank you for this awesome article. I am currently using the Wordpress plugin on two websites (windowsfaralimite.ro and tutorialeoffice.ro). Both sites are tech blogs, one about WIndows and the other one about Office and Office 365.

The tiles look awesome on Windows 8.1 Start Screen.

Thank you once again. This was inspiring !
Tuesday, December 10, 2013 5:31:32 AM UTC
Here, I have created a live tile for my website, and it just works fine
Tuesday, December 17, 2013 2:58:09 AM UTC
i try to do but i can not do. i do not know what happened!!
Wednesday, December 18, 2013 10:28:10 PM UTC
Sorry Scott, but this is really more complicated than it needs to be. In order for "me" to apply logic and adopt live tiles, I have to think of them as animated shortcuts. So let me get this straight...First I have to have IE 11 to be my default browser for it to work, that's stupid on Microsoft's part when trying to sell the idea of live tiles. Second, in order to create one I have to go to IE then add it as a favorite then pin it...what? Why can't I just right click (or long touch) and say I want a new live tile and here is the URL? Why jump through lame UI steps to create something so simple. I have never understood why Microsoft keeps reinventing the wheel instead of making the wheel better. For a company that has been dealing with desktop shortcuts for years and many years...you would think they would already have a much more simpler way in creating live tiles....gimme a break. I know others might think I am splitting hairs here, but really? Think about it...we are talking about a company that is suppose to be UI experts, they are after all a software company. Oh and by the way Microsoft needs to improve their Windows 8 SkyDrive app, DropBox is kicking their but! The Windows 8 SkyDrive app won't show me the shares that have been shared out to me, I have to go to the skydrive website to see them....really? common. I am a huge fan of Microsoft, but lately if feels that they are putting the carriage in front of the horse.
Randy Bigbie
Saturday, December 28, 2013 11:08:05 PM UTC
"to whome it may concern"

* i know every , "body" know me ? just ' here ,? thank you so , much *
Thursday, January 02, 2014 6:26:41 PM UTC
Just coded some PHP to generate configeration xml for IE. It worked well. My site is termsexplained.com. I am a bit confused though. What should I show on the live tile if a user pins a post instead of homepage? Should I show latest posts or the one they pinned?
Irfan
Comments are closed.

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