Благодаря функции закрепления ваш сайт всегда будет на первой позиции

При оптимизации сайта посредством браузера Internet Explorer 9 с использованием функции закрепления вы выходите за рамки возможностей браузера и размещаете свой сайт там, где 87 % пользователей запускают свои избранные исходные приложения в системе Windows. Вы получаете более ощутимую выгоду при минимальном объеме операций по разработке.

Приступите к добавлению функции закрепления на свой сайт уже сегодня.

Готовый дизайн за несколько минут

Готовый дизайн за несколько минут

1Создание значка избранного высокого разрешения
2Добавление списка переходов
3Настройка уведомлений
4Использование элементов управления предварительным просмотром эскизов
5Пусть пользователи узнают об этом
6Оцените свой успех
7Обмен и продвижение

Увеличьте уровень посещения сайта на 200 % за счет закрепления сайта

Превосходные результаты благодаря функции закрепления

Если пользователь закрепил ваш сайт, он посещает его чаще, проводит больше времени на сайте и работает с ним более активно. Это значит, что вы можете получить дополнительную прибыль, повысить объемы продаж, увеличить количество платных подписок, то есть активизировать пользователей необходимым вам образом. Начните с самых интересных элементов вашего сайта и используйте возможности закрепления, чтобы привлечь внимание пользователей и стимулировать их.

Идеи по использованию функции закрепления

Воспользуйтесь этими идеями, чтобы повысить эффективность работы вашего сайта.

Начало работы

Юридическая информация. Все коды, которые предлагаются на этом сайте, являются примерами кода. К ним применяются условия использования MSDN. Использование этого кода означает согласие с этими условиями.

Использовать функцию закрепления на сайте просто. Все необходимые коды находятся здесь. Или еще проще — используйте Pinify, подключаемый модуль jQuery.

Необычайная простота разработки

Создание значка избранного высокого разрешения

Получить код

Эмблема сайта сразу выделяется на панели задач Windows, если он обладает высоким разрешением. Когда пользователи закрепляют веб-сайт, они становятся наиболее лояльными клиентами. Предоставьте им возможность возвращаться на ваш сайт снова и снова всего лишь одним щелчком кнопки мыши. Преобразуйте текущую эмблему в значок избранного любого размера всего лишь за несколько минут, используя всего лишь нескольких строк кода.

Щелкните шестеренки, расположенные слева, чтобы воспользоваться редактором значков x-icon и получить базовый код и улучшить свой сайт с помощью функции закрепления. Нужны примеры? Ознакомьтесь с другими сайтами ниже.

Примеры

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):

Пример списка переходов на сайте Rotten Tomatoes

Добавление списка переходов

Получить код

Ваш сайт — это не только домашняя страница. Вы предлагаете великолепное содержимое, но пользователи не всегда могут его найти. Вдохновите их на поиски с помощью списков переходов. Существует два типа списков переходов.

Статический список переходов: рекомендуется для продвижения наиболее популярных разделов сайта, которые следует посетить пользователям.
Динамический список переходов: подходит для привлечения внимания пользователей к наиболее актуальным статьям, персональным операциям или популярным темам.

Для создания значков списков переходов можно также использовать редактор x-icon, описанный в предыдущем действии.

Щелкните шестеренки, расположенные слева, чтобы получить базовый код для добавления списка переходов.

Примеры

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

Настройка уведомлений

Получить код

Как вы привлекаете внимание пользователей, которые не слишком активно просматривают ваш сайт? Заинтересуйте их с помощью своевременных уведомлений. Используйте функцию наложения значков при публикации нового содержимого или используйте функцию подсветки панели задач, чтобы указать пользователю, что от него требуется выполнить действие (аналогично приложению).

Для создания значков наложения можно также использовать редактор x-icon, описанный в предыдущем действии.

Щелкните шестеренки, расположенные слева, чтобы получить код для уведомлений.

Примечание. Отображение уведомлений возможно только в том случае, если закрепленный сайт запущен и свернут.

Примеры

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.

Использование элементов управления предварительным просмотром эскизов

Получить код

Вы сможете сделать свой сайт еще больше похожим на исходное приложение, если предоставите пользователю возможность управлять сайтом за пределами браузера. Таким образом, ваш сайт приобретет большую социальную направленность.

Для создания элементов управления предварительным просмотром эскизов можно также использовать редактор x-icon, описанный в предыдущем действии.

Щелкните шестеренки, расположенные слева, чтобы получить базовый код для добавления элементов управления панелью эскизов.

Примеры

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.

Пусть пользователи узнают об этом

Получить код

Если функция закрепления обеспечит увеличение уровня посещения на 200 %, то вы захотите рассказать пользователям об этом. Когда вы покажете это на сайте, до 35 % пользователей сделают это. Используйте подключаемый модуль jQuery, чтобы обеспечить возможность тестирования в течение нескольких минут, и продемонстрируйте работу только пользователям браузера IE9. Воспользуйтесь любой из перечисленных ниже идей, чтобы создать схему с использованием эмблемы своего сайта.

Нажмите зеленые кнопки ниже, чтобы просмотреть примеры на этом сайте в режиме реального времени.

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.

Оцените свой успех

Теперь, когда на вашем сайте реализована функция закрепления, оцените ее эффективность, выполнив некоторые простые действия. Используйте существующую систему отслеживания, чтобы максимально упростить процесс реализации. Если такая система в настоящий момент не используется, мы покажем, как создать ее. Системы WebTrends, Google Analytics и Omniture могут отслеживать и сравнивать эти возможности закрепления в браузере Internet Explorer 9.

Показать технический документ

Обмен и продвижение

Хотите разместить свой сайт таким образом, чтобы ежемесячно его посещали 25 миллионов пользователей? Представьте его в галерее IE Gallery, где уже присутствуют такие популярные сайты, как Facebook, Twitter и eBay. Поделитесь свои творением.

Опубликовать сайт в галерее IE Gallery