Create a Windows 8.1 Live Tile For Your Own Website

Windows 8.1 went live on 18th October 2013 worldwide with Internet Explorer 11. This combo provides users to pin websites as live tiles which show updates and notifications from their favorite websites. Previously developers had to develop a custom RSS feed reader app for their (or their clients) websites (like digit.lk’s app for Windows 8) and it took about days to complete that app. Fortunately, making your website live tile-ready doesn’t take a lot of time or programming expertise using Internet Explorer 11 in Windows 8.1.

Live tiles in Windows 8.1

How to make this possible

1) Visit BuildMyPinnedSite.com

Screenshot (7)

2) Click on “Build your own site tile”

Screenshot (91)3)Put a title for your live tile (might be your site name).

4) Select a background for the tile

5) Upload an image for that tile. Its recommended to create about 250px of padding around all the sides of your image (might be your site logo)

(Once you update everything you can see the preview in right side pane)

6) Now click on “Add Notifications” accordion

Screenshot (93)7) Visit your site’s RSS feed page, copy the page URL, paste it in the text box labeled “Put the URL to your RSS feed here” and press ‘Get Feed” button.

Screenshot (94)8) Now “Add Notifications” accordion went hidden and you could see some codes under “Get the code!” accordion.

Screenshot (96)9) Copy the lines of code generated by the wizard. Paste it within the <head> section of your HTML documents, save and upload.

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

11) Unzip the downloaded file and open it.

12) y 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

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

14) Thats all now test your site by pinning it in Internet Explorer 11 immersive mode.

Customization Part

You can customize the behavior of tile by tweaking the code generated.

1) 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. To change frequency :

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

2) 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”>

Pinning the site to Start Screen

1) Open Internet Explorer and navigate to the site.

2) In your site’s tab, right click and select “Open in immersive browser”

Screenshot (99)3) Once the page loaded in Immersive mode. Get the “App bar” of Internet Explorer

  • Desktop users : by right click on the page
  • Tablet users : swipe-up the bottom bar

4) Click on “Star” icon to make the site favorite, and click on the “Pin” icon and again tap ‘Pin to start” button to pin the site to start screen.

Screenshot (101)Thats all. Now you can see the updates of your website in your start screen and make an awareness about this feature in your website.

Screenshot (97)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s