Referencia

Atributos del botón de suscripción

Obligatorio

En esta sección se explica cómo construir un elemento <div> para un botón de suscripción. La lista a continuación explica los atributos obligatorios y opcionales del elemento. Los atributos opcionales te permiten controlar el diseño y el tema del botón, así como elegir si deseas mostrar el conteo de suscriptores del canal. También puedes especificar un objeto de escucha de eventos que maneje eventos que el botón activa cuando un usuario hace clic en el botón.

  • class: establece el valor en g-ytsubscribe. Esta clase identifica el elemento <div> como el contenedor de un botón de suscripción y permite que YouTube modifique el tamaño del botón insertado de forma dinámica, como se explica en la siguiente sección.

  • Debes especificar un valor para uno de los dos atributos a continuación:

Opcional

  • data-layout: el formato para el botón. Los valores de los atributos válidos son:

    • default: muestra un ícono de botón de reproducción y la palabra "suscribirse" en el idioma del usuario, que se selecciona con la configuración de idioma del usuario o su ubicación.
    • full: muestra el avatar y el título del canal, además del botón estándar.

  • data-theme: especifica el esquema de colores que deseas utilizar para el botón. Los valores válidos son default y dark. El tema dark está diseñado para las aplicaciones que colocan botones en un elemento de fondo más oscuro.

  • data-count: indica si el botón muestra la cantidad de suscriptores que tiene el canal. Mostrar el conteo de suscriptores es el comportamiento predeterminado del botón. Sin embargo, el conteo no se muestra en los canales pagos. Los valores válidos son default y hidden.

  • data-onytevent: especifica el nombre de una función de JavaScript que maneja las notificaciones de evento relacionadas con el botón. El botón activa eventos cuando un usuario hace clic en el botón para suscribirse a un canal o para anular la suscripción a uno.

Control de eventos

Subscribe Button activa un evento cuando un usuario hace clic en el botón para suscribirse al canal asociado o anular la suscripción a este. Puedes agregar el atributo data-ytonevent al elemento del widget para especificar un objeto de escucha de eventos que deseas que reciba notificaciones de eventos.

El objeto de escucha de eventos debe ser una función que acepta un solo argumento payload. El objeto payload siempre contiene una propiedad eventType. Subscribe Button es compatible con los siguientes eventos:

Events
subscribe indica que el usuario se suscribió a un canal. Para este tipo de evento, el objeto payload también contiene una propiedad channelExternalId que especifica el ID de canal del canal de YouTube.
unsubscribe indica que el usuario anuló la suscripción de un canal. Para este tipo de evento, el objeto payload también contiene una propiedad channelExternalId que especifica el ID de canal del canal de YouTube.

El código de demostración y el ejemplo de código a continuación muestran la forma en que una aplicación puede responder a estos eventos. Como se muestra en el código, la demostración crea un Subscribe Button para el canal GoogleDevelopers, así como un elemento <div> vacío después del botón.

Cuando hace clic en el botón, la función de JavaScript recibe una notificación de evento y registra la información sobre el evento en el elemento <div>. En navegadores que son compatibles con el registro en window.console, como Chrome, el código JavaScript también registra el evento en la consola. (En Chrome, abre la consola de JavaScript antes de intentar la demostración).

Demostración

Ejemplo de código

<script>
  function onYtEvent(payload) {
    var logElement = document.getElementById('ytsubscribe-events-log');
    if (payload.eventType == 'subscribe') {
      logElement.innerHTML = 'You will love this channel! :D'
    } else if (payload.eventType == 'unsubscribe') {
      logElement.innerHTML = 'We are sorry you are unsubscribing. :('
    }
    if (window.console) {
      window.console.log('ytsubscribe event: ', payload);
    }
  }
</script>

<div class="g-ytsubscribe" data-channel="GoogleDevelopers" data-onytevent="onYtEvent"></div>
        <div id="ytsubscribe-events-log"></div>

Procesamiento dinámico

Como alternativa al uso del código de inserción estándar de la herramienta de configuración, puedes procesar el Subscribe Button de forma dinámica. Este enfoque evita que el JavaScript de la API transfiera todo el DOM para localizar los botones, lo que puede mejorar el tiempo de procesamiento del botón.

Como parte de la Google+ JavaScript API, Subscribe Button es compatible con los métodos estándar go y render, que se pueden utilizar para procesar los botones de suscripción de forma dinámica. Por ejemplo, puedes utilizar estos métodos para procesar un botón que no está presente cuando el evento DOM ready se activa, como en una página que se actualiza con AJAX.

Método Descripción
gapi.ytsubscribe.go(
  opt_container
)
Procesa todos los botones de suscripción en el contenedor especificado. Utiliza este método si los elementos del botón de suscripción que desees procesar ya existen. Por ejemplo, si tu aplicación envía una solicitud AJAX que devuelve el elemento <div> completo para Subscribe Button, invoca el método go() para procesar el botón.
opt_container
El elemento HTML que contiene los botones de suscripción para procesar. Especifica el ID del elemento o el elemento DOM en sí. Si se omite este parámetro, se procesan todos los botones de suscripción en la página.
gapi.ytsubscribe.render(
  container,
  parameters
)
Procesa Subscribe Button en el contenedor especificado. Utiliza este método si el elemento que contendrá Subscribe Button aún no existe y se debe crear.
container
Identifica el elemento HTML vacío en el que se procesará Subscribe Button. Especifica el ID del elemento o el elemento DOM en sí.
parameters
Un objeto que contiene atributos del botón de suscripción como pares key:value, tales como {"channel": "GoogleDevelopers", "layout": "full"}.

Cómo procesar un botón con gapi.ytsubscribe.go

El ejemplo a continuación muestra el código que tendrías que utilizar para invocar el método gapi.ytsubscribe.render para procesar un botón de forma dinámica cuando se hace clic en el vínculo.

Nota: La herramienta de configuración anterior también utiliza el método go para procesar un botón nuevo cuando actualizas las opciones del botón o código.

Cómo procesar un botón con gapi.ytsubscribe.render

El ejemplo a continuación muestra la forma para invocar el método gapi.ytsubscribe.render para procesar de forma dinámica un botón cuando se hace clic en el vínculo. El ejemplo de código contiene dos funciones:

  1. La función renderYtSubscribeButton muestra el botón. En esa función, la opción onytevent del botón especifica la función que se invoca cuando un usuario hace clic en el botón.
  2. La función processYtSubscribeButtonClick maneja el evento activado. Consulta la sección Control de eventos para obtener más información.