Référence

Attributs du bouton "S'abonner"

Attributs obligatoires

Cette section explique comment construire un élément <div> pour intégrer un bouton d'abonnement. La liste ci-dessous répertorie les attributs obligatoires et facultatifs. Les attributs facultatifs vous permettent de modifier l'affichage et le thème du bouton, ainsi que d'afficher ou non le nombre d'abonnés à la chaîne.

class : utilisez g-ytsubscribe comme valeur pour cet attribut. Cet attribut identifie l'élément <div> comme conteneur d'un bouton d'abonnement et permet à YouTube de redimensionner dynamiquement le bouton intégré, comme expliqué dans la section suivante.
Vous devez définir une valeur pour l'un des deux attributs suivants :
- data-channel : spécifie le nom de la chaîne associée au bouton. Exemple : GoogleDevelopers.
- data-channelid : spécifie l'ID de la chaîne associée au bouton. Exemple : UC_x5XG1OV2P6uZZ5FSM9Ttw. Vous pouvez récupérer l'ID de votre chaîne dans les paramètres de votre compte YouTube ou à l'aide des APIs Explorer à la fin de ce document. En savoir plus sur l'utilisation d'ID de chaînes.

Attributs facultatifs

data-layout : spécifie le format du bouton. Les valeurs possibles sont les suivantes :
- default : affiche l'icône du bouton de lecture et le mot "S'abonner" dans la langue de l'internaute, sélectionnée en fonction de ses préférences linguistiques ou du pays dans lequel il se trouve.
- full : affiche l'avatar et le nom de la chaîne en plus du bouton par défaut.
data-theme : définit le thème du bouton. Les valeurs possibles sont default et dark. Le thème dark est conçu pour les applications intégrant le bouton sur un élément d'arrière-plan plus sombre.
data-count : indique si le bouton affiche ou non le nombre d'abonnés à la chaîne. Par défaut, le nombre d'abonnés est affiché. Cependant, il ne l'est pas pour les chaînes payantes. Les valeurs possibles sont default et hidden.

Affichage dynamique

Au lieu d'utiliser le code d'intégration standard de l'outil de configuration, vous pouvez afficher dynamiquement le Subscribe Button. Cette méthode permet à l'API JavaScript de ne pas parcourir l'ensemble de l'élément DOM pour localiser les boutons, et peut ainsi réduire le délai d'affichage du bouton.

Avec l'Google+ JavaScript API, le Subscribe Button est compatible avec les méthodes standards go et render, qui peuvent être utilisées pour afficher dynamiquement des boutons d'abonnement. Par exemple, vous pouvez utiliser ces méthodes pour afficher un bouton lorsque l'événement ready de l'élément DOM est déclenché, comme sur une page modifiée avec l'architecture AJAX.

Méthode Description

Méthode	Description
`gapi.ytsubscribe.go( opt_container )`	Affiche tous les boutons d'abonnement dans le conteneur indiqué. Utilisez cette méthode si les éléments du bouton d'abonnement que vous voulez afficher existent déjà. Par exemple, si votre application envoie une requête AJAX qui renvoie l'élément `<div>` complet d'un Subscribe Button, appelez la méthode `go()` pour afficher le bouton. opt_container Désigne l'élément HTML qui contient les boutons d'abonnement à afficher. Indiquez l'ID de l'élément ou l'élément DOM lui-même. Si vous ne définissez pas ce paramètre, tous les boutons d'abonnement de la page seront affichés.
`gapi.ytsubscribe.render( container, parameters )`	Affiche le Subscribe Button dans le conteneur indiqué. Utilisez cette méthode si l'élément qui contiendra le Subscribe Button n'existe pas encore et doit être créé. container Désigne l'élément HTML vide dans lequel le Subscribe Button sera affiché. Indiquez l'ID de l'élément ou l'élément DOM lui-même. parameters Cet objet contient les attributs du bouton d'abonnement définis en tant que paires `key:value`, telles que `{"channel": "GoogleDevelopers", "layout": "full"}`.

gapi.ytsubscribe.go(
  opt_container
)

Affiche tous les boutons d'abonnement dans le conteneur indiqué. Utilisez cette méthode si les éléments du bouton d'abonnement que vous voulez afficher existent déjà. Par exemple, si votre application envoie une requête AJAX qui renvoie l'élément <div> complet d'un Subscribe Button, appelez la méthode go() pour afficher le bouton.

opt_container: Désigne l'élément HTML qui contient les boutons d'abonnement à afficher. Indiquez l'ID de l'élément ou l'élément DOM lui-même. Si vous ne définissez pas ce paramètre, tous les boutons d'abonnement de la page seront affichés.

gapi.ytsubscribe.render(
  container,
  parameters
)

Affiche le Subscribe Button dans le conteneur indiqué. Utilisez cette méthode si l'élément qui contiendra le Subscribe Button n'existe pas encore et doit être créé.

container: Désigne l'élément HTML vide dans lequel le Subscribe Button sera affiché. Indiquez l'ID de l'élément ou l'élément DOM lui-même.
parameters: Cet objet contient les attributs du bouton d'abonnement définis en tant que paires key:value, telles que {"channel": "GoogleDevelopers", "layout": "full"}.

Afficher un bouton avec la méthode gapi.ytsubscribe.go

L'exemple ci-dessous illustre le code utilisé pour appeler la méthode gapi.ytsubscribe.go permettant d'afficher dynamiquement un bouton lorsqu'un internaute clique sur le lien.

Remarque : L'outil de configuration présenté ci-dessus utilise également la méthode go pour afficher un nouveau bouton lorsque vous modifiez les options du bouton ou le code.

Afficher un bouton avec la méthode gapi.ytsubscribe.render

L'exemple ci-dessous montre comment appeler la méthode gapi.ytsubscribe.render pour afficher dynamiquement un bouton lorsqu'un internaute clique sur le lien.