Блок «Поделиться». Руководство разработчика: Обзор API

Блок «Поделиться» позволит пользователям вашего сайта или блога в один клик поделиться контентом сайта в социальных сетях.

API предоставляет разработчикам готовый JavaScript-объект блока Ya.share, который можно вставить на страницу и настроить с помощью параметров.

Чтобы вставить блок на страницу, выполните шаги инструкции.

Блок Ya.share

Блок Ya.share может быть представлен на странице в виде кнопки или ссылки со значком (или без):

Все параметры блока передаются в виде объекта params.

Таблица 1. Общие параметры

Параметр	Тип	Значение
Обязательные
params.element	String	ID элемента, на котором происходит инициализация блока.
Необязательные
params.l10n	String	Язык текста блока. Первый символ имени параметра - "l" (от англ. "localization"). Если не указан, то определяется автоматически на основании доменной зоны сайта. Возможные значения: be - белорусский; en - английский; kk - казахский; ru - русский; tt - татарский; uk - украинский. Значение по умолчанию: ru.
params.onready	Function	Функция, вызываемая после инициализации блока. В функцию первым аргументом передается экземпляр блока.

Таблица 2. Параметры ссылок

Параметр	Тип	Значение
Необязательные
params.link	String	Ссылка, которой требуется поделиться. Значение по умолчанию: window.location.href
params.title	String	Название ссылки. Значение по умолчанию: document.title
params.description	String	Описание ссылки (передается в Facebook, ВКонтакте и Живой Журнал).
params.image	String	Дополнительный значок (передается в Facebook и ВКонтакте).
params.serviceSpecific	Object	Объект для посервисного переопределения параметров, где ключами являются идентификаторы сервисов, а значениями - объект, задающий переопределяемые поля (title и/или link). Например: `serviceSpecific: { twitter: { link: 'http://ya.ru' } }`

Таблица 3. Параметры блока

Параметр	Тип	Значение
Необязательные
params.elementStyle	Object	Стиль блока.
params.elementStyle.text	String	Текст блока. Значение по умолчанию: 'Поделиться'.
params.elementStyle.type	String	Внешний вид блока: button - кнопка; link - ссылка; icon - значок без текста, открывающий всплывающее окно по щелчку мыши; none - значок или несколько значков без текста, без возможности открытия всплывающего окна. Значение по умолчанию: 'button'.
params.elementStyle.border	Boolean	Есть ли у блока рамка. Значение по умолчанию: false
params.elementStyle.linkUnderline	Boolean	Выделять ли подчеркиванием текст блока-ссылки. Не учитывается, если elementStyle.type = 'button'. Значение по умолчанию: false.
params.elementStyle.linkIcon	Boolean	Есть ли у блока значок. Не учитывается, если elementStyle.type = 'button'. Значение по умолчанию: false.
params.elementStyle.quickServices	Array	Список сервисов, показываемых в блоке, см. Список поддерживаемых сервисов. Любые другие сервисы игнорируются. Значение по умолчанию: ['', 'yaru', 'vkontakte', 'twitter', 'facebook']. Если у блока есть рамка, то можно визуально отделить значки сервисов друг от друга вертикальными разделителями. Для обозначения разделителя используйте вертикальную черту '\|' , например: ['yaru', '\|', 'facebook'] . Если у блока нет рамки, то разделители не отображаются.

Таблица 4. Параметры всплывающего окна

Параметр	Тип	Значение
Обязательные
params.popupStyle	Object	Настройки всплывающего окна.
params.popupStyle.blocks	Object	Объект вида: «Название блока»: [Список сервисов]. Значение по умолчанию: "Поделитесь с друзьями": ['yaru', 'vkontakte', 'twitter', 'facebook', 'lj', 'moimir', 'friendfeed', 'odnoklassniki'] Например: `popupStyle: { // настройки всплывающего окна blocks: { // блоки 'Поделитесь-ка!': ['yaru', 'twitter', '', 'vkontakte'], 'Поделитесь-ка по-другому!': ['yaru', 'twitter', 'vkontakte'] } }` Также всплывающее окно может быть оформлено в виде массива (аналогично params.serviceSpecific). В этом случае в качестве заголовка блока ссылок отображается фраза «Поделитесь с друзьями».
params.popupStyle.copyPasteField	Boolean	Содержит ли всплывающее окно поле ввода, из которого можно скопировать ссылку, которой требуется поделиться. Значение по умолчанию: false.
params.popupStyle.vDirection	String	Задает вертикальное направление открытия всплывающего окна (up/down). Если не задан, то направление определяется автоматически.
params.popupStyle.codeForBlog	String\|Object	Код для вставки на сайт или в блог. Если передана строка, то вставляется блок со стандартным заголовком «Код для вставки в блог». Если передан объект, то в качестве ключа используется название блока, а в качестве значения - код для вставки.

Список поддерживаемых сервисов

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

blogger - Blogger;
digg - Digg;
evernote - Evernote;
delicious - delicious;
facebook - facebook;
friendfeed - FriendFeed;
juick - Juick;
liveinternet - LiveInternet;
linkedin - LinkedIn;
lj - Живой Журнал;
moikrug - Мой Круг;
moimir - Мой Мир;
myspace - MySpace;
odnoklassniki - Одноклассники.ru;
twitter - Twitter;
vkontakte - ВКонтакте;
yaru - Я.Ру;
yazakladki - Яндекс.Закладки.

Методы

Для каждого экземпляра блока доступен метод updateShareLink.

updateShareLink

Позволяет обновить ссылку.

Таблица 5. Входные параметры

Параметр	Тип	Описание
link	String	Новый URL ссылки.
title	String	Новый заголовок ссылки.
serviceSpecific	Object	Посервисное переопределение параметров.

Пример

Пример ниже демонстрирует использование метода updateShareLink для обновления ссылки и заголовка в блоке Ya.share.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title>Пример использования метода updateShareLink</title> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
    <script type="text/javascript" src="http://yandex.st/share/share.js" charset="utf-8"></script> 
    <script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js" charset="utf-8"></script> 
    <script type="text/javascript"> 
        // создаем блок
        var YaShareInstance = new Ya.share({
            element: 'ya_share',
            onready: function(instance) {
                // в обработчик onready приходит тот же экземпляр блока,
                // что возвращается из конструктора,
                // т.е. instance === YaShareInstance
 
 
                // После инициализации можно поменять ссылку или заголовок, которым требуется поделиться
                $('#tester')
                    .show()
                    .find('input[type=button]')
                    .click(function() {
                        // Ссылки и заголовок обновляются по щелчку на кнопке
                        // Параметры берутся из соответствующих полей
                        var parent = $(this).parent();
                        instance.updateShareLink(
                            parent.find('input[type=text]:first').val(),
                            parent.find('input[type=text]:last').val(),
                            // В метод также можно передать serviceSpecific-блок
                            // В данном примере переопределяются все ссылки в Twitter
                            {
                               twitter: {link: 'http://ya.ru', title: 'ya.ru'}
                            }
                        );
                    });
            }
        });
        // Блок еще не проинициализировался, поэтому ничего не произойдет
        YaShareInstance.updateShareLink('http://api.yandex.ru', 'API');
    </script> 
</head> 
<body> 
<div style="border: 1px solid #000"> 
    <div id="ya_share"></div> 
    <div id="tester" style="display:none"> 
        <input type="button" value="&uarr; Обновить ссылку и заголовок в этом блоке"> 
        Ссылка: <input type="text" value="http://www.yandex.ru"/> 
        Заголовок: <input type="text" value="Яндекс"/> 
    </div> 
</div> 
</body> 
</html>

Открыть пример в новом окне

«Поделиться»:

Руководство разработчика

Обзор API