Grow engagement by 50% when your site is pinned

Pinning gets powerful results

When users pin your site, they visit more often, spend more time and go deeper. That means you get more site impact, like ad revenue, purchases, paid subscriptions or whatever you want your users to do more of. Start with the best parts of your site and then use pinning capabilities to grab attention and pull your users in.

Create a hi-res favicon

Your site's logo lights-up on the Windows taskbar when it’s high-resolution. When users pin your site, they become your most loyal customers. Give them a one-click experience that brings them back again and again. Convert your current logo into a favicon here into all the sizes you’ll need in minutes and a few lines of code.

Click on the gears to the left to use x-icon editor and get the basic code for enhancing your site with pinning. Want some examples? See other sites below.

Examples

Page loading...

Get the best experience with Internet Explorer 9

Based on your current browser, you are not seeing all that
X-Icon Editor has to offer. Learn more about
Internet Explorer 9 for Windows Vista and Windows 7.

<!-- Include jQuery via the Microsoft CDN-->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.2.min.js"
type="text/javascript" ></script>
<!-- Include the pinify jQuery plugin -->
<script src="jquery.pinify.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
// Here we're adding calling pinify and passing it a set of options
// pinify will then automatically create the correct <meta> tags and
// insert them into the head of your document
$("head").pinify({
applicationName: "Build My Pinned Site",
favIcon: "/favicon.ico",
navColor: "#3480C0",
startUrl: "http://buildmypinnedsite.com",
tooltip: "Start Build My Pinned Site",
window: "width=1024;height=768"
});
// pinify() can be called with no parameters,
// if it is, the plugin will use current information available
// to the browser to set the needed values.
});
</script>

How to use this code.

Use HTML for basic pinning

Upload the favicon (.ico) files that you created above to your site's server

Use the <link> tag (line 4) to point your site to the favicon you created

Use the optional <meta> tags to define how your site should behave when a user pins it:

application-name (line 5): Users see this in when they hover over the Windows Taskbar

msapplication-starturl (line 6): When a user pins your site, this is where they always start from (like your home page)

msapplication-navbutton-color (line 7): Make the browser feel more like your site by choosing colors to match your favicon.

msapplication-window (line 8): Indicate if you want the window to be a specific size

msapplication-tooltip (line 9): Users see this in their Windows Start Menu or Desktop

Dynamic Jump Lists

<script type="text/javascript" charset="utf-8">
// In the example below, we're going to generate a list of Pinning Steps to display
// in our Dynamic Jump List based on an HTML list of Pinning Steps here on buildmypinnedsite.com
// Since not every browser supports site pinning, we’re wrapping our code in a
// try/catch statement to keep it from causing errors in other browsers.
// This is something you'll want to do anytime you use window.external methods
try {
// First, we need to check if the browser is in already Site Mode
if (window.external.msIsSiteMode()) {
// Here we clear the Jump List to remove any existing items (optional)
window.external.msSiteModeClearJumpList();
// Next we're creating a Custom Jump List Category to hold our Dynamic Jump List items
window.external.msSiteModeCreateJumpList("Build My Pinned Site");
// Here we're grabbing the list of Pinning Steps from an unordered list on this site
// and placing them in an array
var steps = document.getElementById("steps")
var stepsArray = steps.getElementsByTagName("a");
// Here we're looping through our array of steps in reverse.
// Dynamic Jump List items are added at the top of the list,
// in the reverse order from how they appear in the script.
for (var i = stepsArray.length - 1; i >= 0; i--){
var title = stepsArray[i].innerHTML;
var href = stepsArray[i].href;
// msSiteModeAddJumpListItem adds the actual Dynamic Jump List item
// Here we're passing it a title, destination URL, icon path and an optional parameter
// that tells the Jump List to open the destination URL in
// a new window or the current window
window.external.msSiteModeAddJumpListItem(title, href, "/favicon.ico", "self");
};
}
} catch (ex) {
// Fail silently.
}</script>

// Here we're creating an array to store our Pinning Steps
var stepsArray = [];
// In the example below, we're going to generate a list of Pinning Steps to
// display in our Dynamic Jump List based on an HTML list of Pinning Steps
// here on buildmypinnedsite.com
// Since we're using the pinify jQuery plugin, we do not need to use the
// try/catch blocks, pinify handles that for us
// Here we're grabbing the list of Pinning Steps from an unordered list on this site
// and looping through them
$("#steps a").each(data, function (key, val) {
var $this = $(this);
// The name, destination URL and icon of the current Pinning Step
// is stored in an object
var item = {
'name': $this.html(),
'url': $this.attr("href"),
'icon': "/favicon.ico"
};
// That object is then added to the array we created to store our Pinning Steps
stepsArray.push(item);
});
// Here we're calling pinify's addJumpList method
// It combines both the msSiteModeCreateJumpList and msSiteModeAddJumpListItem
// methods and creates a Dynamic Jump List using the tile and array of items below
$.pinify.addJumpList({
title: "Build My Pinned Site',
items: stepsArray
});

How to use this code.

Use JavaScript to add a Dynamic Jump List

Upload any favicon (.ico) files that you created for Jump List items above to your site's server

Since not all browsers support pinning, wrap any calls to the window.external object in a JavaScript try/catch (line 8)

To check whether a site is pinned and a Dynamic Jump List can be added we call msIsSiteMode(line 11)

Passing a Jump List title to msSiteModeCreateJumpList (line 15) creates a Dynamic Jump List. The title will show at the top of you list of items, but will not show until items are added.

msSiteModeAddJumpListItem (line 34) adds an item to a Dynamic Jump List. It requires the following parameters:

name : The task name that appears in the Jump List.

action-uri : The address that is launched when the item is clicked. (full or relative path)

icon-uri : The icon (.ico) that appears next to the task in the Jump List. (full or relative path)

Dynamic Jump List items are added in reverse order of how they appear in the code

Copy and paste the code above. Place the code right before the closing <body> tag of your site's HTML copy into your own document.ready function

Set-up Notifications

How do you catch user attention when they’re not actively browsing your site? Pull them with a timely notification. Use an icon overlay when new content is available or flash the taskbar to show when user action is requested just like an app.

You may also use the x-icon editor from the previous step to create your overlay icons.

Click the gears to the left to get the code for notifications.

note: for notifications to appear the pinned site must be running and minimized.

<script type="text/javascript" charset="utf-8">
// This code creates a two second timeout that adds a custom overlay icon
// and triggers a notification.
// The timeout is just for demostration and is not required
window.setTimeout(function () {
window.external.msSiteModeSetIconOverlay("/icons/overlay.ico", "Example Notification");
window.external.msSiteModeActivate();
}, 2000);
</script>

// This code creates a two second timeout that adds a custom overlay icon
// and triggers a notification.
// The timeout is just for demostration and is not required
window.setTimeout(function(){
// Here we're adding the custom overlay icon
$.pinify.addOverlay({
title: "Example Notification",
icon: "/icons/overlay.ico"
});
// Calling flashTaskbar, flashes the Taskbar
$.pinify.flashTaskbar();
}, 2000);

Give it a try

Pin the site and click the button below to see an overlay icon appear.

Pin the site and click the button below, tab to a new window and wait a few seconds to see the Taskbar flash.

How to use this code.

Use JavaScript to add a Notification and Custom Icon Overlay

Create and upload a custom overlay icon (.ico) to your site's server

Wrap any calls to the window.external object in a JavaScript try/catch and check whether the user has the site pinned using msIsSiteMode

Use msSiteModeSetIconOverlay (line 06) to add a custom icon overlay (.ico) to your pinned site, by passing it a full or relative path to the custom overlay icon.

Let users discover it

If pinning delivers up to a 200% increase in site engagement, then you want users to discover how to do it. And when you show them on your site, up to 35% do it. Use a jQuery plug-in to have it test-ready in minutes and only show it to IE9 users. Choose one of our ideas below to customize it with your our site logo.

Click the green buttons below to turn on the examples live in this site.

pre-built banners

Use these pre-built pushdown banners to help your users discover how to pin your site.

// Here we're calling the pinify function with the 'pinTeaser' parameter to
// add a teaser to the site
$("#topHatContainer").pinify('pinTeaser', {
type: "topHat",
pinText: "Unlock the hidden powers of this site with a click and a drag.",
style: {
backgroundImage: "images/toolbar-bg.png",
closeButtonImage: "images/toolbar-bg.png"
}
});

How to use this code.

Use HTML/jQuery to help users discover pinning on your site

Create and upload a 32px x 32px PNG version of your logo to your site's server

Measure your success

Now that you have implemented pinning on your site, measure the results it gets in a few simple steps. Use your current tracking system to make implementation as simple as possible. If you don’t have one currently, we’ll show how to set a new one up. WebTrends, Google Analytics, and Omniture are all able to track these Internet Explorer 9 pinning capabilities and compare them.