Jul 302014
 
 July 30, 2014  Posted by at 3:49 pm Universal Apps, WinRT  Add comments

wp_ss_20140731_0006

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

live tiles for website

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 🙂

connect_your_app_to_the_store5

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 🙂

2014-07-31_1-12-49

 

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).

2014-07-31_2-41-07

But most often I got this:

2014-07-31_2-41-30

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.

Live tile for website 16

 

2014-07-31_17-03-57

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/

Live tile for website

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

Live tile for website2
Select each tile on the right side and crop the uploaded photo for each tile

In Step 2 add your feed

Live tile for website3

Live tile for website4
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

Live tile for website5
Unzip it

Live tile for website7

Live tile for website8

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

live tiles for website

Frequency can be set to (in minutes):

30

60

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

Live tile for website9


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

In my case: <meta name=”application-name” content=”In Love with Code”/>

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)

Live tile for website10

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

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

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

Here it is:

wp_ss_20140731_0006

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

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

What is 4 + 4 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)