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

I 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:

Or a Large tile:

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.