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=http://davidwalsh.name;icon-uri=http://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!