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 eng-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:
data-channel
: el nombre del canal asociado con el botón. Valor de muestra:GoogleDevelopers
.data-channelid
: el ID del canal asociado con el botón. Valor de muestra:UC_x5XG1OV2P6uZZ5FSM9Ttw
. Puedes recuperar el ID del canal en la configuración de tu cuenta de YouTube o mediante APIs Explorer al final de este documento. Obtén más información sobre cómo trabajar con los ID del canal.
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 sondefault
ydark
. El temadark
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 sondefault
yhidden
. -
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( |
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.
|
gapi.ytsubscribe.render( |
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.
|
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: