Reference Guide

Atributos

En esta sección, se explica cómo construir un elemento <div> para un botón de suscripción. En las siguientes listas, se explican 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.

Atributos obligatorios

  • class: Establece el valor en g-ytsubscribe. Esta clase identifica el elemento <div> como un contenedor para un botón de suscripción y permite que YouTube cambie el tamaño del botón incorporado 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:

    • data-channel: Es el nombre del canal asociado al botón. Valor de ejemplo: GoogleDevelopers.
    • data-channelid: Es el ID del canal asociado al botón. Valor de ejemplo: UC_x5XG1OV2P6uZZ5FSM9Ttw. Puedes recuperar el ID de tu canal en la configuración de tu cuenta de YouTube o con el APIs Explorer que se encuentra al final de este documento. Obtén más información para trabajar con IDs de canales.

Atributos opcionales

  • data-layout: Es el formato del 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 o la ubicación del usuario.
    • full: Muestra el avatar y el título del canal, además del botón estándar.

  • data-theme: Especifica el esquema de color que se usará para el botón. Los valores válidos son default y dark. El tema dark está diseñado para aplicaciones que colocan botones sobre 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. Los valores válidos son default y hidden.

  • data-onytevent: Nota: Este atributo dejó de estar disponible.

Eventos

Nota: Los eventos subscribe y unsubscribe del botón de suscripción dejaron de estar disponibles. Del mismo modo, también se dejó de usar el atributo data-ytonevent, que antes se podía agregar al elemento del widget para especificar un objeto de escucha para las notificaciones de eventos.

Procesamiento dinámico

Como alternativa a usar el código de inserción estándar de la herramienta de configuración, puedes renderizar el Subscribe Button de forma dinámica. Este enfoque evita que el JavaScript de la API recorra todo el DOM para ubicar los botones, lo que puede mejorar el tiempo de renderización de los botones.

Como parte de Google+ JavaScript API, Subscribe Button admite los métodos estándar go y render, que se pueden usar para renderizar de forma dinámica los botones de suscripción. Por ejemplo, puedes usar estos métodos para renderizar un botón que no está presente cuando se activa el evento DOM ready, 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 un Subscribe Button, llama al método go() para renderizar el botón.
opt_container
Es el elemento HTML que contiene los botones de suscripción que se renderizarán. 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
)		 Renderiza el Subscribe Button dentro del contenedor especificado. Usa este método si el elemento que contendrá el Subscribe Button aún no existe y debe construirse.
contenedor
Identifica el elemento HTML vacío en el que se renderizará el Subscribe Button. Especifica el ID del elemento o el elemento DOM en sí.
Parámetros
Un objeto que contiene atributos del botón de suscripción como pares key:value, como {"channel": "GoogleDevelopers", "layout": "full"}.

Renderiza un botón con gapi.ytsubscribe.go

En el siguiente ejemplo, se muestra el código que usarías para llamar al método gapi.ytsubscribe.go y renderizar de forma dinámica un botón cuando se hace clic en el vínculo.

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

Renderiza un botón con gapi.ytsubscribe.render

En el siguiente ejemplo, se muestra cómo llamar al método gapi.ytsubscribe.render para renderizar de forma dinámica un botón cuando se hace clic en el vínculo: