Popular:
 Building Resilient Systems on AWS: Learn how to design and implement a resilient, highly available, fault-tolerant infrastructure on AWS.

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!

Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring
Request Metrics real user monitoring

Recent Features

  • By
    Introducing MooTools Templated

    One major problem with creating UI components with the MooTools JavaScript framework is that there isn't a great way of allowing customization of template and ease of node creation. As of today, there are two ways of creating: new Element Madness The first way to create UI-driven...

  • By
    7 Essential JavaScript Functions

    I remember the early days of JavaScript where you needed a simple function for just about everything because the browser vendors implemented features differently, and not just edge features, basic features, like addEventListener and attachEvent.  Times have changed but there are still a few functions each developer should...

Incredible Demos

  • By
    Geolocation API

    One interesting aspect of web development is geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user's location. Let's examine how you can...

  • By
    Introducing MooTools ScrollSidebar

    How many times are you putting together a HTML navigation block or utility block of elements that you wish could be seen everywhere on a page? I've created a solution that will seamlessly allow you to do so: ScrollSidebar. ScrollSidebar allows you...

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. B. Moore

    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. Alex Crooks

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

    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. Varun Choudhary

    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. Sunny Singh

    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!