Online Since 1995

  • I Want My Frank's World TV

    No need to call up your cable provider and demand FWTV, just head on over to YouTube and enjoy. If you really want to be one of the cool kids, subscribe to the channel to be among the first to know when I post videos.

    Watch Now

  • Keep the Cash

    Write Windows Apps, get up to $2000 in cash. Publish your app(s) in the Windows Store and/or Windows Phone Store from March 8th to June 30th, 2013. Bling bling.

    Read more

  • Screen Scraper Utility Kit for WinRT

    Have you ever needed to take unstructured data from a web site (or some other source) and parse it? Chances are you have. The problem of unstructured data is growing. This utility is designed to make it easier to scrape data from web sources.

    Get it now.

Building a Pinned Site for Windows 8

Tags: Windows 8, IE10, Pinned Sites

Oct 19 2012 3:39 PM

You may have remembered the Pinned Site feature that IE9 introduced.

It allowed you to make a more native app-like experience for just about any website. All you needed to do is add some META tags and some JavaScript.

Now the Pinned Site feature is even better with Windows 8 and IE10.

Here’s what Frank’s World looks like when pinned in Windows 8.

image

How to Pin a Site

From the Windows 8 Start Screen, click/tap/touch/whatever on the Internet Explorer.  Navigate on over to FranksWorld.com.

On the bottom of the screen, you’ll see a pin icon. Click it and choose “Pin to Start”

image

You can pin just about any website, but with a little bit of work, you can totally customize the experience and really make something special for your users.

Creating a Custom Pinned Site

Browse on over to buildmypinnedsite.com for easy to follow step-by-step instructions on how to do this.

The site will even update a preview window in real time to give you a good representation of what you’re creating.

Compare the preview with the actual image above.

image

What Does the Code Look Like?

Just three lines of HTML markup and you have yourself a basic custom tile setup.

<meta name="application-name" content="Frank's World"/> 
<meta name="msapplication-TileColor" content="#c4e2ff"/> 
<meta name="msapplication-TileImage" content="/gfx/Tiles/world.png"/>

 

The image you use has to be of a certain size and the wizard on BuildMyPinnedSite provides a simple way to upload and process images.

Your Site is Actually a Tile Now

Once your site is pinned, you can take part in some of the Windows 8 Live Tile goodness. Check out the site for more information.

If you create a custom pinning experience, let me know. I may even showcase a couple of pinned sites that really show off what can be done here.

Happy pinning!

Add a Comment