Support a Live Tile for your website on Windows and Windows Phone 8.1

tl;dr: Have an RSS feed? Build a Live Tile for your Web site within minutes at buildmypinnedsite.com.

Enabling Web powered Start screens

With Internet Explorer, users can put their favorite Web sites right beside their favorite apps by pinning them to the Windows and Windows Phone Start Screens. Pinning Web sites from IE gives users immediate access to these sites from the Start Screen without having to navigate to them repeatedly.

When users pin your site, they have indicated that they are frequent visitors of your site and care about updates from it. With that in mind, Internet Explorer now brings you Live Tiles for Web sites, allowing you to keep your users connected to your Web site outside of the browser.

With Live Tiles, you can engage with your users by bringing fresh content such as breaking news, new message alerts or titles of new blog posts right to their Start Screen. Furthermore, you can support multiple tile sizes for your Web site, allowing users to display your site prominently as wide or large tiles.

From top left, moving down each column: IE App tile, youtube.com, techmeme.com, theverge.com, anandtech.com, mathrubhumi.com, twitter.com, reuters.com, t.msn.com, aol.com, economictimes.indiatimes.com, IE Test Drive for pinned sites, wired.co.uk, lapresse.ca, cnet.com, contrejour.ie, dhakatimes.com.bd, outlook.com, wellsfargo.com, geekwire.com, nymag.com, gawker.com, indiatimes.com, facebook.com, vyclone.com, polygon.com, wpcentral.com, theage.com.au.

From top left, moving down each column: IE App tile, techmeme.com, contrejour.ie, wellsgargo.com, gawker.com, t.msn.com, youtube.com, vyclone.com, IE Test Drive for pinned sites, wpcentral.com

Adding a Live Tile to your website

Live Tiles for Web sites are powered by Periodic Notifications, wherein the platform pulls text and images from polling uris hosted on a server at a predefined polling interval, and displays this content on the Web site’s tile. You can add Live Tile support for your site in one of three ways – through meta tags on your Web page, by creating a manifest file or via a JavaScript API. The following is an example of a site using meta tags to set up their tile for Windows 8.1:

 <meta name="application-name" content=" CenturyCutCook" />
<meta name="msapplication-TileColor" content=" #009900" />

<!-- Logos for all four tile sizes -->
<meta name="msapplication-square70x70logo" content="smalltile.png" />
<meta name="msapplication-square150x150logo" content="mediumtile.png" />
<meta name="msapplication-wide310x150logo" content="widetile.png" />
<meta name="msapplication-square310x310logo" content="largetile.png" />
  
<!-- Notification URL -->
<meta name="msapplication-notification" content="frequency=30; polling-uri=1.xml; polling-uri2=2.xml; polling-uri3=3.xml; polling-uri4=4.xml; polling-uri5=5.xml" />

The polling uris defined in this example contain the contents of the notification to be displayed and will be polled every half an hour. Therefore in a given 30 minute interval, a user can see up to 5 updates from this site, keeping your user intimately connected with your Web site at all times.

The polling uris contain XML markup which adheres to predefined templates. These templates are the same for Web sites and for Windows applications, and control the look and feel of a tile. Templates can be text-based, image-based or both. The following example consists of a polling uri which has a binding for the medium, wide and large tile sizes (note that the large size is supported on Windows but not on Windows Phone).

 <tile>
   <visual lang="en-US" version="2">
      <binding template=" TileSquare310x310ImageAndTextOverlay02" branding="name">
         <image id="1" src="cheddar_and_ham.png" />
         <text id="1">Cheddar and Ham Skewers </text>
         <text id="2">This recipe for Cheddar and Ham Skewers made with Sargento Tastings is perfect whether you’re looking for an appetizer to entertain with, or you’re looking for a special crave-worthy afternoon snack </text>
      </binding>
      <binding template=" TileWide310x150ImageAndText01" branding="logo">
         <image id="1" src="cheddar_and_ham.png" />
         <text id="1">Cheddar and Ham Skewers</text>
      </binding>
      <binding template="TileSquare150x150Image" branding="name">
         <image id="1" src="cheddar_and_ham.png" />
      </binding>
   </visual>
</tile>

This binding will result in the following tile, across all four sizes supported on the Start Screen:

Large tile, using the TileSquare310x310ImageAndTextOverlay02 template	Wide tile, using the TileWide310x150ImageAndText01 template
Medium tile, using the TileSquare150x150Image template	Small tile ( No notifications)

You can use our code samples to learn more about building live tiles, or if you have an RSS feed on your site and would like to use it to power notifications, use our buildmypinnedsite wizard to build a tile for your site within minutes.

Summary

With Windows 8.1 and IE11 you can keep your users engaged even when they don’t have a browser tab open. Live Tile support will help your users serendipitously discover content on the Start Screen and draw them back to your site more often. Best of all - they can be easily added to your site within minutes!

— Tanvi Surti, Program Manager, Internet Explorer

— Derek Liddell, Program Manager, Internet Explorer

Comments

• Anonymous
  May 21, 2014
  Already done for electrovoice.com Thanks!

• Anonymous
  May 21, 2014
  I wonder why you are not just using microformats h-feed

• Anonymous
  May 21, 2014
  Let's put aside how much consumers love Windows 8's tiles tiles - how are we developers supposed to know whether you're going to abandon this like Accelerators and website taskbar pinning? Why should we put in the effort?

• Anonymous
  May 21, 2014
  The comment has been removed

• Anonymous
  May 21, 2014
  Thanks for information, I was looking for it ! :)

• Anonymous
  May 23, 2014
  What? Google actualy added support for live tiles to YouTube. :o Anyway, this is a very nice feature, something I've been supporting on my projects and websites since Windows 8 started supporting it. Thanks for the nice work in Windows Phone live tiles, the Windows 8.1 model of live tiles is awesome (compared to both Windows 8 and Windows Phone 8 and lower)!

• Anonymous
  May 26, 2014
  Sorry about this question but how do I pin a website to the start screen?

• Anonymous
  May 26, 2014
  @Gerry: On Windows 8.1, bring up the address bar, click on the Favorites button (star), click on the Pin. On Windows Phone 8.1, bring up the settings menu and click on 'Pin to Start'

• Anonymous
  May 26, 2014
  The comment has been removed

• Anonymous
  May 27, 2014
  The comment has been removed

• Anonymous
  May 28, 2014
  The comment has been removed