Reference Guide

Атрибуты

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

Обязательные атрибуты

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

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

Необязательные атрибуты

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

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

  • data-theme – определяет цветовую схему кнопки. Допустимые значения: default и dark . dark тема предназначена для приложений, в которых кнопки размещаются на более темном фоне.

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

  • data-onytevent – ​​Примечание: этот атрибут устарел.

События

Примечание: События subscribe и unsubscribe кнопки «Подписаться» устарели. Аналогично, атрибут data-ytonevent , который ранее можно было добавить к элементу виджета для указания прослушивателя уведомлений о событиях, также устарел.

Динамический рендеринг

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

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

Метод Описание
gapi.ytsubscribe. go (
opt_container
)		 Отображает все кнопки подписки в указанном контейнере. Используйте этот метод, если элементы кнопки подписки, которые вы хотите отобразить, уже существуют. Например, если ваше приложение отправляет AJAX-запрос, который возвращает полный элемент <div> для Subscribe Button , вызовите метод 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 для динамической отрисовки кнопки при нажатии на ссылку: