Application Pinning with META Tags

By  on  
Application Pin

If there's one thing I want you to learn from the wide range of blog posts I've written, it's that it's the small things matter when you're creating your websites. Whether it's a one-page showcase, a business website, or an enterprise web application, there are always small details you can add that will really help someone out...even if that someone is on a Windows PC. One of those small details is setting your website up for "pinning", a functionality that debuted in Windows 7. Let me show you what it is and how you can implement it on your websites!

META Tags

There are a variety of META tags used. Here are the base tags:

<meta name="application-name" content="David Walsh Blog" />
<meta name="msapplication-tooltip" content="David Walsh Blog" />
<meta name="msapplication-starturl" content="/" />

These initial tags provide basic information about the site to be pinned. With those self-explanatory tags in place, you can now add "tasks" which can be links to any URL:

<!-- format:  name={};action-uri={};icon-uri={} -->
<meta name="msapplication-task" content="name=David Walsh Blog;action-uri=https://davidwalsh.name;icon-uri=https://davidwalsh.name/favicon.ico" />
<meta name="msapplication-task" content="name=David Walsh on Twitter;action-uri=http://twitter.com/davidwalshblog;icon-uri=http://twitter.com/favicon.ico" />
<meta name="msapplication-task" content="name=David Walsh on Facebook;action-uri=http://www.facebook.com/pages/David-Walsh-Blog/186644584869;icon-uri=https://s-static.ak.facebook.com/rsrc.php/yi/r/q9U99v3_saj.ico" />
<meta name="msapplication-task" content="name=David Walsh on LinkedIn;action-uri=http://il.linkedin.com/in/davidjameswalsh;icon-uri=http://linkedin.com/favicon.ico" />

For the purposes of a blog like mine, the tasks could be links to my Twitter feed, Facebook page, and my LinkedIn profile. For a business website, tasks could be shortcuts to the user's cart, different store departments, or a store locator!

As I mentioned above, this isn't a groundbreaking website addition but it can be just another small detail that makes your website a bit more useful than the rest. Providing users quick ways to accomplish tasks on your website makes your web application a bit more useful!

Recent Features

  • By
    How to Create a Twitter Card

    One of my favorite social APIs was the Open Graph API adopted by Facebook.  Adding just a few META tags to each page allowed links to my article to be styled and presented the way I wanted them to, giving me a bit of control...

  • By
    fetch API

    One of the worst kept secrets about AJAX on the web is that the underlying API for it, XMLHttpRequest, wasn't really made for what we've been using it for.  We've done well to create elegant APIs around XHR but we know we can do better.  Our effort to...

Incredible Demos

  • By
    Fixing sIFR Printing with CSS and MooTools

    While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix...

  • By
    PHP Woot Checker &#8211; Tech, Wine, and Shirt Woot

    If you haven't heard of Woot.com, you've been living under a rock. For those who have been under the proverbial rock, here's the plot: Every day, Woot sells one product. Once the item is sold out, no more items are available for purchase. You don't know how many...

Discussion

  1. Alex

    I’m too lazy to (but maybe I will) create a demo to see how it works.
    Does it work only when a page is viewed with IE?

  2. Martin Morel

    I wanted to try this by using davidwalsh’s website, but it seems I’m either blind or the homepage don’t have these meta tag…

  3. So I saw this on a Microsoft company blog earlier this week and I have 1 question.

    How many average Joes & Janes would actually use this?

    What the point of adding the extra code if no one will use it?

  4. Yep didn’t work on my site in IE9 and didn’t work for this website (confirmed the meta tags where present for both). Is it something the user needs to enable manually?

  5. Saw something similar for the iPad on this blog:

    http://www.luscarpa.com/development/make-your-website-an-iphone-web-application/

    I thought it was pretty neat, basically the same thing as above but for an iPad. I know some android tablet devices also support pinning. It would be great to get a list of all the meta tags you need to pin a site/web-app on different OS’s

  6. but how does these tags actually affect anything ?
    like right now i ve opened ur site
    these tags won’t work unless i pin ur site to task bar right?
    n m not gonna do it..

  7. This is definitely a cool feature, but I hope that more browsers start supporting it. I also hope that the markup gets standardized, rather than Microsoft have it prefixed with ms (although Apple does the same thing with their iOS “web apps”).

    For now, I tend to just add icon and application name/url info as described here: http://www.google.com/chrome/intl/en/webmasters-faq.html#customshortcuts

    For IE9, I make a hi-res icon using http://www.xiconeditor.com/

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!