Справочники

Параметры кнопки "Подписаться"

Обязательные параметры

В этом разделе мы объясним, как создать элемент <div> для кнопки "Подписаться". Ниже приведены обязательные и необязательные параметры. С помощью необязательных параметров можно задать макет и фон кнопки, отображение числа подписчиков, а также указать прослушиватель событий для отслеживания нажатий кнопки.

  • class – задайте значение g-ytsubscribe. Данный класс определяет элемент <div> как контейнер кнопки подписки и позволяет YouTube динамически изменять ее размер (см. следующий раздел).

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

Необязательные параметры

  • data-layout – макет кнопки. Допустимые значения:

    • default – на кнопке показывается значок воспроизведения и слово "Подписаться" на языке, который определяется по настройкам аккаунта или местонахождению пользователя.
    • full – к стандартному макету добавляется значок и название канала.

  • data-theme – задает цвет кнопки. Допустимые значения: default и dark. Значение dark используется для страниц с темным фоном.

  • data-count – указывает, нужно ли отображать число подписчиков канала. По умолчанию этот параметр включен. Допустимые значения: default и hidden. Обратите внимание: для платных каналов число подписчиков не отображается вне зависимости от значения параметра.

Динамическое отображение

В качестве альтернативы стандартному коду из инструмента для конфигурации кнопки можно использовать динамическое отображение Subscribe Button. При этом API JavaScript не обрабатывает для обнаружения кнопок всю иерархию DOM и время на их обновление сокращается.

Как часть Google+ JavaScript API, Subscribe Button поддерживает стандартные методы go и render. Это можно использовать для динамического отображения кнопок. В частности, эти методы можно использовать для отображения кнопки, которая отсутствует на момент запуска события DOM ready, например, на странице, обновляемой с помощью AJAX.

Метод Описание
gapi.ytsubscribe.go(
  opt_container
)
Отображает все кнопки подписки в указанном контейнере. Используйте этот метод, если элементы кнопки "Подписаться", которые вы хотите отобразить, уже существуют. Например, если при отправке запроса AJAX в вашем приложении для Subscribe Button возвращается полный элемент <div>, то отображать кнопку лучше с помощью метода go().
opt_container
Элемент HTML, который содержит те кнопки подписки, которые нужно отобразить. Укажите либо идентификатор элемента, либо сам элемент DOM. Если этот параметр не указан, отображаются все кнопки подписки на странице.
gapi.ytsubscribe.render(
  container ,
  parameters
)
Отображает Subscribe Button в указанном контейнере. Используйте этот метод, если элемент, который должен содержать Subscribe Button, ещё не существует.
container
Определяет пустой элемент HTML, в котором будет отображаться Subscribe Button. Укажите либо идентификатор элемента, либо сам элемент DOM.
parameters
Объект, содержащий параметры кнопки "Подписаться" в виде пар key:value, например, {"channel": "GoogleDevelopers", "layout": "full"}.

Как отображать кнопку с помощью gapi.ytsubscribe.go

Ниже дан пример кода с вызовом метода gapi.ytsubscribe.go, который позволяет динамически отобразить кнопку при нажатии на ссылку.

Примечание. Инструмент конфигурации кнопки тоже использует метод go, чтобы отобразить новую кнопку, когда вы меняете параметры или код кнопки.

Как отображать кнопку с помощью gapi.ytsubscribe.render

В приведенном ниже примере показано, как вызвать метод gapi.ytsubscribe.render, чтобы динамически отобразить кнопку при нажатии на ссылку.