Reference Guide

Atributos

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

Atributos opcionales

  • data-layout: 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 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 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 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. 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 Suscribirse dejaron de estar disponibles. Del mismo modo, el atributo data-ytonevent, que antes se podía agregar al elemento del widget para especificar un objeto de escucha de las notificaciones de eventos, también dejó de estar disponible.

Procesamiento dinámico

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

Como parte del Google+ JavaScript API, Subscribe Button es compatible con 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 procesar 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 muestra el elemento <div> completo para un Subscribe Button, llama al método go() a fin de renderizar el botón.
contenedor_opt
Es 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 el Subscribe Button en el contenedor especificado. Usa este método si el elemento que contendrá 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"}.

Procesar un botón con gapi.ytsubscribe.go

En el siguiente ejemplo, se muestra el código que tendrías que utilizar para llamar al método gapi.ytsubscribe.go a fin de procesar de forma dinámica un botón 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 el código o las opciones del botón.

Procesar 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: