Wilson Mar bio photo

Wilson Mar

Hello. Hire me!

Email me Calendar Skype call 310 320-7878

LinkedIn Twitter Gitter Google+ Youtube

Github Stackoverflow Pinterest

So your picture can be on everyone’s desktop all the time


Overview

Pin your website

Windows 10 users can pin a website URL as a Favorite on their home screen such that when the tile is clicked, the site’s XML feed is shown (formatted).

Instructions here describe how to provide Windows tiles with images for the different size tiles Windows uses.

  1. See some examples of sites pinned on Windows 8 & 10 at http://pinnedsitedemo.cloudapp.net/testdrive/index.aspx.

  2. Go to http://www.buildmypinnedsite.com/en

  1. Specify a title for your site.

  2. Specify a color. The default is black (000000), but select white (FFFFFF) if your picture has a dark background.

  3. Upload an image.

  4. Crop the images online.

    Crop size Image size Name
    128 x 128 128 x 128 tiny
    270 x 270 198 x 198 square
    270 x 558 248 x 120 wide
    558 x 558 248 x 248 large
  5. In “Add Notifications”, specify the RSS feed URL. The RSS feed for this site is:

    http://wilsonmar.github.io/feed.xml

    (The XML is not that human-readable, but the lastest post is listed first.)

  6. Download the zip file package which contains png files.

  7. View each file to make sure they look OK.

  8. PROTIP: Rename image file names with a “windows-“ prefix so they appear together, and enable you to remember what they’re for.

  9. Move the files in your /images folder.

  10. Edit the downloaded browserconfig.xml file to rename its image file name references before copying it to the root of your site.

  11. Paste just one line in your site’s landing page (index.md) <head> section.

    With a Jekyll site, edit the _head.html file within the _includes folder to add this among Webmaster Tools verification meta lines:

   <!-- For Microsoft Windows 8 & 10 pinned site with  browserconfig.xml and 4 windows-tile- png files -->
   <meta name="application-name" content="Wilson Mar"/>
   

Doing this would allow you to ignore what Microsoft’s website also generates, such as:

<meta name="application-name" content="Wilson Mar"/>
<meta name="msapplication-TileColor" content="#000000"/>
<meta name="msapplication-square70x70logo" content="/images/windows-tile-tiny.png"/>
<meta name="msapplication-square150x150logo" content="/images/windows-tile-square.png"/>
<meta name="msapplication-wide310x150logo" content="/images/windows-tile-wide.png"/>
<meta name="msapplication-square310x310logo" content="/images/windows-tile-large.png"/>
<meta name="msapplication-notification" content="frequency=30;polling-uri=http://notifications.buildmypinnedsite.com/?feed=http://wilsonmar.github.io/feed.xml&amp;id=1;polling-uri2=http://notifications.buildmypinnedsite.com/?feed=http://wilsonmar.github.io/feed.xml&amp;id=2;polling-uri3=http://notifications.buildmypinnedsite.com/?feed=http://wilsonmar.github.io/feed.xml&amp;id=3;polling-uri4=http://notifications.buildmypinnedsite.com/?feed=http://wilsonmar.github.io/feed.xml&amp;id=4;polling-uri5=http://notifications.buildmypinnedsite.com/?feed=http://wilsonmar.github.io/feed.xml&amp;id=5; cycle=1"/>
   

Pin the site as Live Tile

  1. In the Omni-search bar type in the URL. For this site: wilsonmar.github.io

    http:// is not needed.

  2. Click the three dots at the upper-right corner to open the menu.

  3. Select Pin to Start.

  4. Click the Windows button for the Start screen.

  5. Right-click on your website’s picture to Resize.

  6. Select Large (or another size).

Social media coloring

There’s also:

<meta name="msapplication-TileColor" content="#000000"/>

## API

More about setup Live Tile Notifications:

https://msdn.microsoft.com/library/bg183312%28v=vs.85%29.aspx?f=255&MSPPError=-2147217396

See the session What’s New for Tiles and Toast Notifications at Build 2016 on April 1, 2016 by Lei Xu, who also did spoke at Build 2015 session Tiles, Notifications, and Action Center.

Make Windows More Touch Friendly (Tablet Mode)

If you’re one of the few who want to bring back the Windows 8 UI onto Windows 10:

  1. Right-click on the Desktop to select Personalize.
  2. Click on Start on the left Personalization menu.
  3. Turn on “Use Start full screen”
  4. Click on Start button on your keyboard.