Creating a custom Tile to link to your website

Creating a custom Tile to link to your website

  • Comments 14
  • Likes

Overview

This article guides you through the process of creating a custom pinned Tile that links to your website. This helps you control your brand when users pin your site to their Windows Phone Start screen. This works on phones running Windows Phone 7 and Windows Phone 8.

Step 1: Create an image to use as the pinned Tile

First, you’ll need a square image to represent your website and use as a pinned Tile on the phone. Windows Phone 8 devices support high-definition screens up to 768 pixels wide, so we recommend using an image that’s 768 x 768 pixels to get the highest quality on Windows Phone 8. But, you can use a lower resolution image if you choose to.

Tip: If you make your image background transparent, the theme color that the user has set for their phone shows through as the background for your image. This can provide a nice blend of the user’s theme preference with the Tile image you’ve chosen to use.

The following image shows a simple Tile image with the number “1” and a transparent background.

image

Step 2: Add a hidden overlay on your website to trigger the Tile

Next, you want to add a layer to any location where you want to prompt the user to pin the Tile to their Start screen. For example, you can set this on the home page of your website. To do this, you add a fixed-position <div> that is hidden initially, and which references the custom Tile you created in step 1. In the following code example, you can see that I’ve set the value for background-color to Highlight. This means that your Tile image will pick up the theme color from the phone if you made the background of your Tile image transparent in step 1. If you didn’t, then the background color value in <div> will show only in the area below the Tile itself.

You can add some text or a graphic beneath the overlay that indicates to the user that they need to use the menu in Internet Explorer for Windows Phone to select Pin to Start. You can change the color property to any color if you use text.

Here’s an example:

<div id="TileOverlay" onclick="ToggleTileOverlay()" style='background-color: Highlight; height: 100%; width: 100%; top: 0px; left: 0px; position: fixed; color: black; visibility: hidden'>
<img src="customtile.png" width="320" height="320" />
<div style='margin-top: 40px'>
Add text/graphic asking user to pin to start using the menu...
</div>
</div>

Step 3: Add a link to display the overlay

Next, you want to add a link to display the overlay that you created in step 2, which initially is hidden. In the following code example, we use a simple text link, but you can use any clickable element.

<a href="javascript:ToggleTileOverlay()">Pin this site to your start screen</a>

Here’s what the example looks like on the phone:

image

Tip: Because Pin to Start functionality is only available on Windows Phone, you should be sure to detect Windows Phone [see blog post on UA detection] so you display this link only to one of these devices and not to any other kind of smartphone. You might also want to provide a way for users to hide the link in case they have already pinned your site to their Start screen, or if they just don’t want to see it anymore.

Step 4: Add JavaScript to toggle the overlay

You can add some simple JavaScript to the <div> block you created in step 2 to toggle the overlay visibility. Note that the <div> we use here also has an onclick handler that calls the same function, so the user can dismiss the overlay with a single tap.

<script type="text/javascript">
function ToggleTileOverlay() {
var newVisibility = (document.getElementById('TileOverlay').style.visibility == 'visible') ? 'hidden' : 'visible';
document.getElementById('TileOverlay').style.visibility = newVisibility;
}
</script>

Now, if you tap the link you created in step 3 you see the overlay. For example:

image

Step 5: Try out your new custom Tile

That’s it! Once the overlay is shown, tap the menu bar (‘…’) and then Pin to Start to add your custom Tile to your own Start screen.

Et Voilà!

14 Comments
You must be logged in to comment. Sign in or Join Now
  • Makak
    0 Posts

    Very nice Tuto...

    But you can elaborate a little more on step 3 ... where we insert this link? After the block "TileOverlay"? And especially how we insert a UA detection on this link (because I did not really understand on the UA's page , sorry; |)

    And block "TileOverlay" is inserted after the body tag? It does one apply a z-index: 9999999999999 ... ?

    Thank you again ...

  • Using this idea i have done a web application that create your custom web tile direct from your windows phone browser:  http://cheller.info/wpt/

    Try it and let me know

    (github.com/.../WPCustomWebTiles)

  • @

    It sounds like your overlay positioning may be off. Can you scroll when the overlay is shown to see if the image is being drawn offscreen somewhere?

  • @

    It sounds like you are trying this out on Windows 8. This tip is specifically for Windows *Phone*. Internet Explorer on Windows supports a different method for setting the tile icon which is detailed here: blogs.msdn.com/.../pinned-sites-in-windows-8.aspx.

    We are definitely looking at converging the methods in the future but this tip was meant to be a way for developers with mobile sites to control their icon when their site is pinned to start using current Windows Phone releases.

  • I tried this on a windows Phone 7 and all I get is the background colour.  Removing the UserAgent string and loading it on IE on desktop pops up the images correctly.  Any hints on what may be wrong? Am using this from a WebForm nested in a masterpage.

  • Maik
    1 Posts

    For me it didn't work on Win8. I downloaded the "Windows 8 Enterprise Evaluation 6.2.9200 Build 9200" and created the HTML document as suggested. If I open the page in IE, click the link to show the tile and than try to "Pin to start" it pins a tile showing the favicon (XAMPP icon) and not the image I put in customtile.png

    Any suggestions?

  • Attention Author:  In step 3, Tip, you might want to fix this:

    "Windows Phone [link to related blog post on UA detection]"

    Cheers,

    Atg

  • Gmotagi
    4 Posts

    Jaxim check out shardx and monogame if you want to still use XNA without having to learn c++/DX.

    Shame MS hasnt released the SDK for the rest of us and just teases with emu screenshots like above. As a WP7 developer I feel great;y let down on this issue.

  • It depends on the type of applications you want to build. If it's 3D games then I would suggest C++ - for anything else the XAML/C# route is the way to go.

  • jaxim
    57 Posts

    @abm

    Thanks for the response. From what I read it seems like support for C# (i.e. XNA) is on the way out. WP8 may support it now, but it seems like some WP8 specific APIs are only available to C++. @see www.zdnet.com/xna-support-for-windows-phone-8-is-it-there-or-isnt-it-7000001971

    If Microsoft prefers developers to code in "native" C++, then I imagine that there will be better and longer support for C++. If I am going to invest my time to learn a new language, I want to ensure it has the most value for the long haul.

    I don't mind if my apps cannot run on Windows Phone 7's since the marketshare for WP7 is not huge and because the life of a smartphone is on average 2 years so the people who currently own older Windows Phones will be upgrading soon enough..

    Thoughts?

  • can you please tell your boss , that you have to take pre orders ALLSO OUT SIDE THESE eight countries

    so you can secure the xmas for a lot of people , i do not care if the tablet or phone comes in januar 2013 or even later

    but i think it wood be best ,, course of the cheap google pruducts a chromebook at 249 dollars ,, and a new google tabelt 10' with keyboard cover like yours,, and i whonder if the same will come to the ipad refresh, and a 7.8 version to

    microsoft in order to hit the top pruduct , please take preeorder inside your store and most IMPORTEN YOUR ONLINE STORE , SO YOU WILL SCOOP OUT THE XMAS

    JUST INFOORM THE CONSONER WHEN IT WILL COME ,, AND IF IT NOT COME BEFORE XMAS ,, JUST SEND OUT A XMAS CARD SO THE CONSUMER CAN PUT SOMTHING UNDER THE TREE

    AND THEN WE ARE ALL HAPPY

  • abm
    268 Posts

    @jaxim, ALL three languages are equally treated when it comes to WP and RT. But imo, I would preffer C#+XAML. If you write the code in WinJS/HTML, it would be little trickier (not if you are familiar with various "JavaScript patterns"). See this inheritance / polymorphism example MooTools vs WinJS stackoverflow.com/.../863980.

    Moreover, the main reason why I suggest C#/XAML is because its the only language supported for WP7.5. Apparently, the C++ & JS wouldn't be supported in 7.8. I hope it doesn't happen.

  • jaxim
    57 Posts

    I'm interested in programming for Windows Phone 8. I'm also interested in programming for WindowsRT and Windows8. After doing some initial research, it seems like the best language to use is C++ as it will allow me to program in all 3 platforms. (Or is HTML5 better?)

    Can anyone tell me if my assessment is correct?

    Does the preferred programming language have support of native pre-built classes especially made for Windows to allow development to go faster? For example, are there lists objects that allow the developer to add data to a list so each data object is added to a row of a list that can be navigated by a user's fingers or mouse?

  • sumedh
    2 Posts

    Thank you so much.. I will try this out for sure.. We need more tuts like this.. :-)

    Is there any way to convert the static tile with a live one.