How to create a live tile for your website (in a few minutes)

Say what you want about live tiles, but some use them and love them (I do- on my phone in particular) and since you can create a live tile in just a few minutes for your site I would suggest that you go ahead and make one if you have a feed of some sorts.
It gives you one more way to make yourself visible to users/readers and keep them posted. It’s as simple as adding a little XML config file and some images, such as this one (this is the config generated by the site I use for this post):

This post goes well with a post I wrote last year (’Connecting your website to your Windows Store App with meta tags’) on how to connect your site with an existing Windows Store App, if you have an app make sure to do that as well (and don’t forget iOS tags if you have an iOS app). For the live tile you don’t need an app of course :)

Let’s talk live tiles. If you want to have more level of control you can follow the guide on MSDN ‘Build a Live Tile’- the steps are described in details as well as the options you have. However, if you want a first basic tile with less fuss you can use the website mentioned below to configure the XML schema for the tiles with notifications based of your feed. This is not new, but since I finally got around to doing this for my site today I decided to take some screen shots as I did it and share. Pretty much how all my posts are born :)

EDIT:

I originally posted this post yesterday, but after noticing that the tiles didn’t work and confirming with several other users of the website used to dynamically generate the tiles I decided to pull the post. I’ve notified the team, but haven’t gotten a response (let’s give it some more time).

But most often I got this:

The service seems to return a 500 (internal server error) 80-90% on the requests. At some point it does work, as you can see below. On my phone the tiles are now working, but not on the laptop (I’ve made sure to set IE as main browser and have the tile pinned). It’s strange that the tile doesn’t work on the desktop as the tiles generated should be supported by both Windows and Windows Phone- and ‘manual’ tiles work fine. And yes I missed a null check. Its a mock- hence why no copy and paste given to you.

If you wanted to dynamically generate the tile xml from your feed in code you could do something like this (just a mock- my site runs on PHP (eeeek) and I’ll set up the manual tiles when I move the site in a few weeks from WordPress to Node).

Here are the steps:
Go to http://www.buildmypinnedsite.com/

Adding logo and text
In Step 1 add text, a transparent PNG and background color

Select each tile on the right side and crop the uploaded photo for each tile
In Step 2 add your feed

Get the images and tags
In Step 3 you can grab either the markup to add to the site (and then upload images and make sure the urls are correct for the images) or do as I did, and download the package

Unzip it

The config file contains the polling sources, frequency, which tiles to show notifications on, and images:

Frequency can be set to (in minutes):

360 (6 hours)

720 (12 hours)

1440 (1 day)

As for ‘Cycle’ (this is a copy and paste from MSDN):

0: (default if only one notification) Don’t cycle.
1: (default if multiple notifications) Cycle notifications for all tile sizes.
2: Only cycle notifications for medium tiles.
3: Only cycle notifications for wide tiles.
4: Only cycle notifications for large tiles.
5: Only cycle notifications for medium or wide tiles.
6: Only cycle notifications for medium or large tiles.
7: Only cycle notifications for wide or large tiles.

And then FTP up the contents of the package

And add the meta tag to the head section of the site

In my case:

After you have done that you are good to go- but let’s try to pin the site first. On your computer find the IE tile and open it, go to the site and select favorite (start icon)

A menu opens and you can then pin the site (you can select tile size)

You should now find the tile pinned, and you can go through the different tile sizes and make sure everything looks okay.

Once my feed updates and I have a tile update I’ll post a picture of the tile with the notification :)

Here it is:

Here is the tile on my Windows Phone as a static tile (if you wonder what that ‘Pick up- second hand’ is since I’m moving to UK I’m donating 80% of my stuff to a second hand store that does awesome things for people struggling):

wp_ss_20140731_0004

How to create a live tile for your website (in a few minutes)

Comments