How To Create a Windows 8.1 Live Tile For Your Website

livetilelead

With Internet Explorer 11 on Windows 8.1,  users are able to pin websites to their Start Screens as live tiles, which show updates and notifications from their favorite websites. If you are a developer who wants to optimize your site for your Windows 8.1 audience, it is essential that you add this powerful but simple feature to your site.

Fortunately, making your website live tile-ready doesn’t take a lot of time or programming expertise. All you’ll need are a working RSS feed of your content, a graphic file of your logo and the ability to add a few lines of code to the header of your pages. Here’s how you can add live tile support to your website.

MORE: How to Download and Install Windows 8.1 Preview

The Basics

1. Navigate to BuildMyPinnedSite.com

2. Enter your site’s name. Notice that it appears at the bottom of four different tiles on the live preview panel to the right. 

2-entername

3. Upload an image to be used as your live tile’s thumbnail. Supported formats are .png, .gif and .jpg. BuildMyPinnedSite’s crop feature is extremely limited, so we recommend that you create about 250 pixels of padding around all sides of your image and upload the padded image. 

4. Crop your image for each thumbnail size.

3aa-cropselectpadded


Four different thumbnail sizes are available for Windows 8.1 – 128X128,  270X270, 270X558 and 558X558 (all in px). Click the button that says Crop for each size, then move your cursor over to your uploaded image. Your cursor should turn into a crosshair.

3ab-cropselectpadcu

Just as you would crop a Facebook profile picture, click and drag your cursor on the uploaded image to select the portion of your image you would like to use as a thumbnail. Look at the live preview panel to see if the thumbnail is to your satisfaction.

If you want more control over this, create your own thumbnail images in these dimensions and continue with the next step.

5. Adjust the background color in the second field so that your title is visible on your tile in the live preview panel. If you’re using your own images and can’t see them in the live preview, use this tip: for light-colored, background images, use white (or #FFFFFF) as your background color. For dark ones, use black (#000000). This changes the color of the font.

3b-namesontiles

When you are done, click Next.

6. Enter the URL of your RSS feed to enable live updates to your tile. Click Get Feed, then click Next.

4-rssurl

7. Copy the lines of code generated by the wizard. Paste it within the <head> section of your HTML documents, save and upload.

5a-code

8. Click the green Download Package button to get a zipped file of your thumbnail images, an xml package of the code and a Readme text document. 

5-package

9. Unzip file and rename

By default, the zipped file is assigned an unintelligible name, so rename it for your own sanity. If you chose to create your own thumbnail images in step 4, replace the images in the package with yours. You will need to name them according to their sizes like below:

  • 128X128 should be named tiny.png
  • 270X270 should be named square.png
  • 558X270 should be named wide.png
  • 558X558 should be named large.png

Of course, you can name the files whatever you want, but this makes for better compatibility across all of Windows’ platforms and future updates.

10. Upload files to your domain. Make sure you put them in the root directory for your site.

11. Test your tile. Pin your site to a Windows 8.1 machine to see what it looks like.

6-testyourtile

You now have a basic, functioning live tile for your website that will feature beautiful live updates from your RSS feed. As long as your RSS feed has images in it, the tile will rotate through your most recent five articles with images. 

More Customization Options

If the basics aren’t enough for you, and you’d like a lot more control over the way your site’s live tile behaves, here’s how to make changes to the code for more control over your tile. 

Frequency Of Updates

By default, the RSS feed of your website will be pinged once a day to check for updates. If that isn’t frequent enough for your site, you may set it to update every 30 minutes, 60 minutes, six hours or 12 hours. Microsoft only allows updates up to every 30 minutes for now and not more frequently.

If you copied the code directly from BuildMyPinnedSite, the frequency will have been set at 30-minute intervals. But if that’s not right for you either, go into your code and look for the line below:

<meta name=”msapplication-notification” content=”frequency=30;polling-uri=…>

Change the number after “frequency=” to reflect the number of minutes you would like to use as an interval. You may choose between 30, 60, 360 (6 hours), 720 (12 hours), and 1440 minutes. 

So if you changed your code to update every hour, here’s what your code should look like:

<meta name=”msapplication-notification” content=”frequency=60;polling-uri=…>

Starting URL

Sometimes a user may pin your site to their Start screens from a secondary page, but you might like to direct them to your home page every time they open your pinned site. Use an additional meta tag to control what page your site will start on. Insert the line of code below in the <head> section of your code.

<meta name=”msapplciation-starturl” content=”YOUR HOME PAGE URL HERE”>

Limitations

There are many more customizations available on Microsoft’s documentation for Pinned Sites, but many of them are only supported in the desktop version of IE. It might be worth watching to see what updates Microsoft rolls out for pinned sites on the Start screen.

We would especially like to have some control over a lower banner overlay on the tile to make sure the site’s name is always displayed, or to cycle a custom frame as part of the polling cycle so that users know what site those updates are from. Right now a brute workaround would be to emblazon your logo over all the images on your RSS feed so that they show up on the tile.

Another gripe we have is that, as with all live tiles for sites and apps, clicking on the tile takes you to  the website home page, not to the article whose picture you saw. This may be a bit misleading if you were expecting to go to a story on “Breaking news: Morsi Out In Egypt Victory” but end up being brought to the home page of the news site instead. Unfortunately, this is simply how live tiles work. If you try tapping on the Mail tile, you end up in your inbox, not in the message you might have seen on the tile surface.

That said, any website that produces frequent content updates should have its own live tile. The time and effort necessary to add this code is negligible in comparison to the benefit of showing users your latest content, right on their start screens.

 

AUTHOR BIO
Cherlynn Low
Cherlynn Low
Cherlynn joined the Laptopmag team in June 2013 and has since been writing about all things tech and digital with a focus on mobile and Internet software development. She also edits and reports occasionally on video. She graduated with a M.S. in Journalism (Broadcast) from Columbia University in May 2013 and has been designing personal websites since 2001.
Cherlynn Low on
Twitter Google+
LEAVE A REPLY
Name*
Email* (will not be published)
Website
*Indicates required field
Comments*
Submit Comments

  1. Steven Says:

    Pinning the home page of this site did not show a live tile for me on Windows 8.1

FIND A REVIEW
Laptops
All Product Types Accessories Cars Digital Camcorders Digital Cameras eReaders GPS Laptops MP3 & Video Players Projectors Smartphones Software Storage Tablets / MIDs VoIP Wi-Fi
All Subcategories
All Subcategories All-Purpose Budget Business Desktop Replacement Gaming Multimedia Netbook Nettop Rugged Student Tablet PCs Ultraportable
Brand
Acer Alienware Apple Archos ASUS Averatec BenQ CTL Corp. Dell Digital Storm eMachines Emtec Everex Fujitsu GammaTech Gateway General Dynamics Getac Gigabyte Hercules HP HTC iBuyPower Intel Lenovo MSI Nokia Nvidia OCZ OLPC OQO Origin Panasonic Sager Samsung Sony Sylvania Systemax TabletKiosk Toshiba Verizon Viewsonic Viliv VooDoo Workhorse PC ZT Systems
Minimum Rating
Any Rating 4.5 Stars 4.0 Stars 3.5 Stars 3.0 Stars
Screen Size
10 11 12 13 14 15 16 17 18 20 4 5 6 7 8 9
Resolution
1024x576 1024x600 1024x768 1200X800 1280 x 720 1280x1024 1280x768 1280x800 1366x678 1366x768 1440x1050 1440x900 1600x768 1600x900 1680x1050 1680x945 1920x1080 1920x1200 800x400 800x480
Weight Range
10.1 - 12.0 pounds 12.1 - 14.0 pounds 14.1 - 16.0 pounds 2 lbs 2 pounds and under 2+ lbs 2.1 - 4.0 pounds 4.1 - 6.0 pounds 6.1 - 8.0 pounds 8.1 - 10.0 pounds Over 16 pounds Under 2 pounds
more options
SUBSCRIBE