IE 11: Pin a Website as a Live Tile to Your Start Screen

The developer preview release of Windows Phone 8.1 this week brings along with it Internet Explorer 11.  IE 11 has been a fixture on Windows 8.1 for quite a while, and it’s good to see Microsoft continuing efforts to expand integration between its platforms. One such feature of IE 11 which I am glad to see brought to Windows Phone 8.1 is the ability to pin websites to the start screen as an RSS-driven Live Tile.  Read on to learn what the capabilities are and how to implement them on your own website.

Screenshot (5)
My site’s Live Tile in Windows 8.1

In each implementation, the pinned site acts as an RSS reader that grabs a few recent posts from the feed and flips through them (minus graphics) on the live tile.  The live tile will update periodically to keep a fresh set of headlines flowing.  The exact behavior will vary depending on the size of the tile you have chosen to pin.  The “Large” tile in Windows 8.1, for example, will show three headlines on one tile, whereas in “Wide” mode it will flip through them one at a time.

But how do you take advantage of this functionality when viewers pin your page?  Unfortunately, you can’t expect IE 11 to magically find your site’s RSS feed when this happens.  You’ll have to help it along.  Fortunately, a tools exists to help web developers do exactly that.  BuildMyPinnedSite.com is one such tool.  A simple 3-step process makes it east to implement:

  1. Build your own site tile.
    Add a title, pick a background color, and upload a background image to get started.  You can then crop the image to work with the various tile sizes.  In reality, background images only make sense with the smallest tile size or if you choose NOT to use the RSS feed function.
  2. Add your notifications.
    Just paste the URL for the RSS feed, validate it and you’re golden.
  3. Get the code!
    On this final step, you’ll be presented with two options for implementing the solution.  The first involves adding multiple META tags to your site header as well as uploading the various background images (available in a package) to your website.  The second method involves a single META tag and an XML file with those same instructions.  The XML file along with the tile images are included in a ZIP package.
Screenshot (4)
In Windows 8.1, pin a website using IE11’s Pin To Start functionality available through the Favorites menu.

As a WordPress blog operator, I wanted to see how easy it would be for me to implement this solution.  I first had a bit of catch-up work to do; I was not yet taking advantage of the “Child Theme” functionality which is HIGHLY recommended if making changes to CSS or PHP modifications.  TONS of tutorials exist online describing how to do this, so I won’t go into those details here.  After accomplishing this, I copied the header.php file from my parent theme to the child theme and added the META tags from the BuildMyPinnedSite tool.  A quick upload of the remaining files to my website completed the implementation.

Does it work?  Try it for yourself.  If you’re using Windows 8.1 or Windows Phone 8.1, pin my site using IE11.  Let me know how you fare.

IE 11: Pin a Website as a Live Tile to Your Start Screen was last modified: April 21st, 2014 by michael

What say you?

This site uses Akismet to reduce spam. Learn how your comment data is processed.