Durch Anheften ist Ihre Website immer in der ersten Reihe.

Wenn Sie Ihre Website optimieren, indem Sie das Anheften mit Internet Explorer 9 nutzen, gehen Sie aus dem Browser heraus und bringen Ihre Website dahin, wo 87 % der Benutzer ihre systemeigenen bevorzugten Anwendungen in Windows starten. Ihre Website liefert so messbare Ergebnisse mit minimalem Entwicklungsaufwand.

Beginnen Sie heute noch, Ihre Website anzuheften:

Erstellen Sie sie in nur wenigen Minuten!

Erstellen Sie sie in nur wenigen Minuten!

1Favicon mit hoher Auflösung erstellen
2Sprungliste hinzufügen
3Benachrichtigungen einrichten
4Steuerungen für die Miniaturbildvorschau verwenden
5Benutzer informieren
6Erfolg messen
7Freigeben und Werben

Bis zu 200 % mehr Besuche durch Anheften Ihrer Website

Anheften für leistungsstarke Ergebnisse

Wenn Benutzer Ihre Website anheften, besuchen sie sie häufiger, verbringen dort mehr Zeit und tauchen tiefer in die Inhalte ein. Das bedeutet, dass Ihre Website mehr Aktivitäten verzeichnet – egal, ob sich dies durch höhere Werbeeinahmen, Verkäufe, Abonnements oder andere Aktivitäten seitens Ihrer Benutzer äußert. Beginnen Sie mit den besten Teilen Ihrer Website und verwenden Sie später die Funktionen zum Anheften, um noch mehr Aufmerksamkeit Ihrer Benutzer zu erregen.

Erste Ideen zum Anheften

Erfahren Sie in diesen ersten Ideen, wie Sie durch das Anheften das Optimum aus Ihrer Website herausholen:

Fangen wir an!

Rechtlicher Hinweis: Bei allen Codes, die auf dieser Website verfügbar sind, handelt es sich um „Beispielcodes“, die den MSDN-Nutzungsrechten unterliegen. Durch die Verwendung dieses Codes erklären Sie sich mit diesen Rechten einverstanden.

Es ist ganz einfach, Ihre Website durch das Anheften zu optimieren. Hier finden Sie den HTML- und JavaScript-Code, den Sie benötigen. Oder machen Sie es sich noch einfacher und verwenden Sie das Pinify jQuery-Plug-In.

Sie sind nur ein paar Codezeilen davon entfernt!

Favicon mit hoher Auflösung erstellen

Code abrufen

Ihr Websitelogo sticht in hoher Auflösung auf der Windows-Taskleiste hervor. Benutzer, die Ihre Website anheften, werden zu Ihren treuesten Kunden. Ermöglichen Sie das Öffnen der Website per Mausklick, damit Ihre Benutzer gerne wiederkehren. Konvertieren Sie Ihr aktuelles Logo hier innerhalb weniger Minuten und mit wenigen Codezeilen in ein Favicon beliebiger Größe.

Klicken Sie auf die Zahnräder links, um den X-Icon Editor zu verwenden und den Basiscode für die Optimierung Ihrer Website durch Anheften abzurufen. Sie möchten Beispiele sehen? Weitere Websites finden Sie unten auf dieser Seite.

Beispiele

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.

Get from 32x32 Clear

Clear

Import

Edit

64x64

32x32

24x24

16x16

Preview Export

Upload

Uploading...

64x64

32x32

24x24

16x16

Ok Cancel

Step 1: Upload your image.
Supported formats are jpg, gif, bmp, png and ico.

Step 2: Crop your image.
Supported all formats but icons.

Step 3: Select the sizes of the image to be exported.
At least one size must be chosen.

Step 4: Click "Ok" to import your image.

Please wait...
(icon being created)

Your icon has been created correctly. Using the button below, you can open the preview in a new browser window.

Preview icon

Please wait...
(icon being created)

Your icon has been created correctly.

Export your icon

Define the Favicon

To indicate that the icon is available to the browser, use the <link> tag in the <head> element of the page, pointing to the location of the favicon:

Optimize Performance

In order to optimize network performance, please use the following best practices:

Specify caching behavior in the HTTP header of the resource (IE9 respects max-age and expires date)
Compress the icon to minimize its size (ex. GZIP)

Current size	Compressed Size (estimated)

Please wait...

Your icon is empty. Please import an image or edit the icon before proceeding.

HTML
jQuery (pinify)

<!-- Add this code into the <head> tag of your HTML document -->

<!-- Make sure the href of the link tag points to the icon you created -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico" />
<meta name="application-name" content="Build My Pinned Site" />
<meta name="msapplication-starturl" content="http://buildmypinnedsite.com" />
<meta name="msapplication-navbutton-color" content="#3480C0" />
<meta name="msapplication-window" content="width=1024;height=768" />
<meta name="msapplication-tooltip" content="Start Build My Pinned Site" />

<!-- 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
Copy and paste the code above into the HTML <head> tag on your site
Test it by dragging your site tab to the Windows 7 taskbar. See this code above in action on this site using F12 Developer tools. Find more details about Declaring Site Metadata on MSDN.

Use jQuery for basic pinning

Download the pinify jQuery plugin and upload to your site's server
Use the jQuery favIcon option (line 18) above to point your site to the favicon you created
Use the optional jQuery code to tell with your site how it should behave when a user pins it:
- applicationName (line 17): Users see this in when they hover over the Windows Taskbar
- navColor (line 19): Make the browser feel more like your site by choosing colors to match your favicon.
- startURL (line 20): When a user pins your site, this is where they always start from (like your home page)
- tooltip (line 21): Users see this in their Windows Start Menu or Desktop
- window (line 22): Indicate if you want the window to be a specific size
Copy and paste the code above. Place the code right before the closing <body> tag of your site’s HTML or copy into your own document.ready function
Make sure to update the path to pinify to reflect where you've uploaded it on your server
Update the plugin settings for your site or remove the settings altogether and Pinify will pull information from your site to generate the pinning <meta> tags
Test it by dragging your site tab to the Windows 7 taskbar. Find more details about using the pinify jQuery plugin here.

Now your site is ready to take advantage of pinning. Follow the steps below to add more functionality (and get more results from the user's that experience it):

Beispiel der Sprungliste von Rotten Tomatoes

Sprungliste hinzufügen

Code abrufen

Ihre Website ist mehr als nur die Startseite. Sie haben tolle Inhalte zu bieten, die Benutzer aber nicht immer erreichen. Inspirieren Sie Ihre Benutzer mit Sprunglisten, tiefer in Ihre Website einzutauchen. Dafür stehen zwei Sprunglistentypen zur Verfügung:

Statische Sprungliste: Verwenden Sie diese Sprungliste, um auf die Inhalte aufmerksam zu machen, die Ihre Benutzer nicht verpassen sollten.
Dynamische Sprungliste: Verwenden Sie diese Sprungliste, um kreativ zu werden und Ihre Benutzer mit den neuesten Artikeln, personalisierten Angeboten oder Trendthemen anzuziehen.

Sie können außerdem den X-Icon Editor aus dem vorherigen Schritt verwenden, um eigene Sprunglistensymbole zu erstellen.

Klicken Sie auf die Zahnräder links, um den Basiscode für das Hinzufügen einer Sprungliste abzurufen.

Beispiele

<!-- Each meta tag below adds a Static Jump List item to the
 Tasks list on our pinned site's Jump List menu -->
	
<meta name="msapplication-task"
content="name=Develop for Internet Explorer 9;
action-uri=http://www.beautyoftheweb.com/#/startdeveloping;
icon-uri=/favicon.ico" />
	
<meta name="msapplication-task"
content="name=Attend a Web Camp;
action-uri=http://www.beautyoftheweb.com/#/camps;
icon-uri=/favicon.ico" />
	
<meta name="msapplication-task"
content="name=Download Internet Explorer 9;
action-uri=http://www.beautyoftheweb.com/#/download;
icon-uri=/favicon.ico" />

// Make sure jQuery and pinify are included
// The tasks array below adds Static Jump List items to the Tasks list
// on our pinned site's Jump List menu
$("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",
        tasks: [{
            'name': "Develop for Internet Explorer 9",
            'action': "http://www.beautyoftheweb.com/#/startdeveloping",
            'icon': "/favicon.ico"
            },
            {
            'name': "Attend a Web Camp",
            'action': "http://www.beautyoftheweb.com/#/camps",
            'icon': "/favicon.ico"
            },
            {
            'name': "Download Internet Explorer 9",
            'action': "http://www.beautyoftheweb.com/#/download",
            'icon': "/favicon.ico"
            }]
});

How to use this code.

Use HTML to add a Static Jump List

Upload any favicon (.ico) files that you created above to your site's server
Create a <meta> tag for each Jump List task you would like to add to your site.
Each <meta> tag should have a name attribute set to msapplication-task and a content attribute that contains the following parts:
- name (line 05): The task name that appears in the Jump List.
- action-uri (line 06): The address that is launched when the item is clicked. (full or relative path)
- icon-uri (line 07): The icon (.ico) that appears next to the task in the Jump List. (full or relative path)
Copy and paste the code above into the HTML <head> tag on your site just below the <meta> tags from Step 1
Test it by dragging your site tab to the Windows 7 taskbar. See this code above in action on this site using F12 Developer tools. Find more details about Declaring Site Metadata on MSDN.

Use jQuery to add a Static Jump List

If you haven't, download the pinify jQuery plugin and upload to your site's server
Add the tasks option to the pinify method from Step 1 or copy and paste the code above.
To add a task, add an object to the tasks array with the following properties:
- name (line 12): The task name that appears in the Jump List.
- action (line 13): The address that is launched when the item is clicked. (full or relative path)
- icon (line 14): The icon (.ico) that appears next to the task in the Jump List. (full or relative path)
Copy and paste the code above or update your existing pinify function options. Place the code in your document.ready function.
Make sure to update the path to pinify to reflect where you've uploaded it on your server
Test it by dragging your site tab to the Windows 7 taskbar. Find more details about using the pinify jQuery plugin here.

Dynamic Jump Lists

JavaScript
jQuery (pinify)

<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
Test it by dragging your site tab to the Windows 7 taskbar. See this code above in action on this site using F12 Developer tools. Find more details about How to Create Dynamic Jump Lists.

Use jQuery to add a Dynamic Jump List

If you haven't, download the pinify jQuery plugin and upload to your site's server
To add a Dynamic Jump List, first create a JavaScript array to hold your Jump List items (line 02)
Populate the array with an object for each item. Each object in the array should contain the following properties:
- name (line 19): The task name that appears in the Jump List.
- url (line 20): The address that is launched when the item is clicked. (full or relative path)
- icon (line 21): The icon (.ico) that appears next to the task in the Jump List. (full or relative path)
Copy and paste the code above into a document.ready function. Modify to create your own Dynamic Jump List
Make sure to update the path to pinify to reflect where you've uploaded it on your server
Test it by dragging your site tab to the Windows 7 taskbar. Find more details about using the pinify jQuery plugin here.

Benachrichtigungen einrichten

Code abrufen

Wie können Sie Benutzer auf Inhalte aufmerksam machen, wenn diese nicht aktiv durch Ihre Website browsen? Informieren Sie Ihre Benutzer durch rechtzeitige Benachrichtigungen. Verwenden Sie eine Symbolüberlagerung, wenn neue Inhalte verfügbar sind, oder lassen Sie die Taskleiste wie bei einer Anwendung blinken, wenn eine Benutzeraktion erforderlich ist.

Sie können außerdem den X-Icon Editor aus dem vorherigen Schritt verwenden, um Symbolüberlagerungen zu erstellen.

Klicken Sie auf Zahnräder links, um den Code für Benachrichtigungen abzurufen..

Hinweis: Zum Anzeigen von Benachrichtigungen muss die angeheftete Website ausgeführt und minimiert werden.

Beispiele

JavaScript
jQuery (pinify)

<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.
To trigger the Taskbar notification simply call msSiteModeActivate (line 07)
Copy and paste the code above into the try/catch from Step 2 or add to your own functions
Test it by dragging your site tab to the Windows 7 taskbar. See this code above in action on this site using F12 Developer tools. Find more details about How to add Notifications and Custom Icon Ovelays.

Use jQuery to add a Notification and Custom Icon Overlay

Create and upload a custom overlay icon (.ico) to your site's server
Call $.pinify.addOverlay (line 06) to add a custom overlay icon. $.pinify.addOverlay requires the following options:
- title (line 07): The task name that appears in the Jump List
- icon (line 08): The icon (.ico) that appears in the lower right of the site's Taskbar icon (full or relative path)
To trigger the Taskbar notification simply call $.pinify.flashTaskbar (line 11)
Copy and paste the code above and place the code in your document.ready function.
Make sure to update the path to pinify to reflect where you've uploaded it on your server
Test it by dragging your site tab to the Windows 7 taskbar. Find more details about How to add Notifications and Custom Icon Ovelays.

Steuerungen für die Miniaturbildvorschau verwenden

Code abrufen

Bringen Sie Ihre Website noch einen Schritt näher an eine systemeigene Anwendung heran, indem Sie Benutzern ermöglichen, die Website von außerhalb des Browsers zu steuern. Sorgen Sie dafür, dass Ihre Website mehr sozialen Austausch ermöglicht oder medienfreundlicher wird.

Sie können außerdem den X-Icon Editor aus dem vorherigen Schritt verwenden, um Ihre Steuerungen für die Miniaturbildvorschau zu erstellen.

Klicken Sie auf die Zahnräder links, um den Basiscode für das Hinzufügen von Steuerungen für die Miniaturbildvorschau abzurufen.

Beispiele

JavaScript
jQuery (pinify)

// Declare button variables
var btn1, btn2;

// This handler will dispatch the event by using the button ID
function onButtonClicked(btn)
{
    switch (btn.buttonID) {
        case btn1:
            // Handle button 1 click
            // Trigger Twitter sharing functions here
            break;
        case btn2:
            // Handle button 2 click
            // Trigger Facebook sharing functions here
            break;
    }
}

// Here we're storing the button ID in our variables to be referenced in the callback
// We've assigned each button its own icon and set the tooltip text
btn1 = window.external.msSiteModeAddThumbBarButton("/icons/twitter.ico","Twitter");
btn2 = window.external.msSiteModeAddThumbBarButton("/icons/facebook.ico","Facebook");

// Add an event listener
document.addEventListener("msthumbnailclick", IEPin.onButtonClicked, false);

// To display the buttons we call msSiteModeShowThumbBar
// NOTE: These toolbar buttons will exist for as long as the pinned site is open
window.external.msSiteModeShowThumbBar();

// Here we're calling the pinify function to create Thumbnail Preview Controls
$.pinify.createThumbbarButtons({
    buttons: [{
        icon: "/icons/twitter.ico", // Thumbnail preview icon URL
        name: "Twitter", // Thumbnail tooltip
        click: function () {
            // Trigger Twitter sharing functions here
        }
    },
    {
        icon: "/icons/facebook.ico",
        name: "Facebook",
        click: function () {
            // Trigger Facebook sharing functions here
        }
        }]
});

How to use this code.

Use JavaScript to add Thumbnail Preview Controls

Create and upload Thumbnail Preview Control icon(s) (.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 msSiteModeAddThumbBarButton (line 21) to add a Thumbnail Preview control. msSiteModeAddThumbBarButton requires the following parameters:
- icon: The path to the icon (.ico) that appears in preview pane (full or relative path)
- tooltip: The button name, which is displayed as a tooltip on hover.
Store the result of each msSiteModeAddThumbBarButton (line 21) call to keep a reference to the button. You'll need the reference to determine which button was clicked
To capture when a user clicks a Thumbnail Preview Control, create an event listener that listens for the msthumbnailclick event (line 25)
The msthumbnailclick event returns the button clicked. The .buttonID property and your button reference variables can be used to determine which button was clicked (line 05)
Copy and paste the code above into the try/catch from Step 2 or add to your own functions
Test it by dragging your site tab to the Windows 7 taskbar. See this code above in action on this site using F12 Developer tools. Find more details about How to Create Thumbnail Toolbars.

Use jQuery to add Thumbnail Preview Controls

If you haven't, download the pinify jQuery plugin and upload to your site's server
Create and upload Thumbnail Preview Control icon(s) (.ico) to your site's server
Call $.pinify.createThumbbarButtons (line 02) to add Thumbnail Preview Controls. Add the buttons option to begin adding a list of buttons
To add a button, add an object to the buttons array with the following properties:
- icon (line 04): The path to the icon (.ico) that appears in the preview pane (full or relative path)
- name (line 05): The button name, which is displayed as a tooltip on hover.
- click (line 06): The callback function that will execute when the user clicks a button.
Copy and paste the code above and place the code in your document.ready function.
Make sure to update the path to pinify to reflect where you've uploaded it on your server
Test it by dragging your site tab to the Windows 7 taskbar. Find more details about How to Create Thumbnail Toolbars.

Benutzer informieren

Code abrufen

Wenn das Anheften Websitebesuche um bis zu 200 % steigert, sollten Sie Ihre Benutzer darüber informieren, wie Sie Ihre Website anheften können. Wenn Sie die Vorgehensweise auf Ihrer Website erklären, werden bis zu 35 % der Benutzer die Website anhängen. Verwenden Sie ein jQuery-Plug-In, um das Anheften innerhalb weniger Minuten testbereit zu haben und nur IE9-Benutzern zu zeigen. Wählen Sie eine unserer Ideen unten aus, und passen Sie diese mit Ihrem eigenen Websitelogo an.

Klicken Sie auf die grünen Schaltflächen unten, um die Beispiele live auf dieser Website anzuzeigen.

HTML/jQuery
jQuery (pinify)

<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
		$.fn.pinable({
			closeTitle : 'Close', // default close title
			containerElement : 'body', // element that pinning html will be prepended to
			cookieName  : 'example_name', // name of cookie; default is iePinning_yourdomain.com
			cookieLength : 30, // in days; default is 30 days
			debug : false, // debug mode; forces the banner to always show, even across browsers
			discStyle : 'toast', // discoverability style; options are toast, topHat and pushUp
			dragAlt : 'Drag me!', // default drag icon alt text
			elementId : 'pinning-discoverability', // Id of banner container that will be injected
			logoPath : '/discoverability/images/logo.png', // path to the 32px x 32px logo file
			message : 'Drag this to your Windows taskbar to enable special IE9 Features.',
			slideDuration : 'fast', // change the slide speed
			useCookie : true // toggles cookies on/off; default is on
		});
	});
</script>

// 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
Download our Discoverability assets, unzip, and upload to your site. Our discoverability assets require jQuery.
Include discoverability.css in the HTML <head> tag of your site
Include jquery.pinable.js before the closing HTML <body> tag of your site
Copy the provided HTML from one of the 3 example files directly under the opening HTML <body> tag of your site's HTML
Add a call to pinable(); (line 3) in your document.ready or copy and paste the example above
Test it by dragging your site tab to the Windows 7 taskbar. See this code above in action on this site using F12 Developer tools. Find more details about How to help users discover pinning on your site.

Use jQuery to help users discover pinning on your site

If you haven't, download the pinify jQuery plugin and upload to your site's server
Create and upload a 32px x 32px PNG version of your logo to your site's server
Add a div right after the opening HTML <body> tag of your site. Make sure to give the div an id
- type (line 04): The type of discoverability teaser to add. Options are: topHat, brandedTopHat, and doubleTopHat
- pinText (line 05): The text to display in the teaser.
- style (line 06): Allows you to set the right and left background images by passing an image path using the rightBackgroundImage and leftBackgroundImage respectively.
Copy and paste the code above and place the code in your document.ready function.
Make sure to update the path to pinify to reflect where you've uploaded it on your server
Test it by dragging your site tab to the Windows 7 taskbar. Find more details about How to help users discover pinning on your site.

Erfolg messen

Nachdem Sie das Anheften auf Ihrer Website implementiert haben, können Sie die Ergebnisse mit wenigen einfachen Schritten messen. Verwenden Sie Ihr aktuelles Nachverfolgungssystem, um die Implementierung so einfach wie möglich zu gestalten. Wenn Sie aktuell nicht über ein solches System verfügen, zeigen wir Ihnen, wie Sie ein neues System einrichten können. WebTrends, Google Analytics und Omniture können die Internet Explorer 9-Funktionen zum Anheften nachverfolgen und vergleichen.

Whitepaper anzeigen

Freigeben und Werben

Möchten Sie Ihre Website an einen Ort bringen, der Monat für Monat von 25 Millionen Benutzern besucht wird? Präsentieren Sie Ihre Website in der Internet Explorer Galerie gemeinsam mit führenden Websites wie Facebook, Twitter und eBay. Geben Sie hier das von Ihnen entwickelte Benutzererlebnis frei.

Submit Site to IE Gallery