Reference Guide

Attributs

Cette section explique comment construire un élément <div> pour un bouton d'abonnement. Les listes ci-dessous expliquent les attributs obligatoires et facultatifs de l'élément. 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.

Attributs obligatoires

• class : définissez la valeur sur g-ytsubscribe. Cette classe 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 : nom de la chaîne associée au bouton. Exemple de valeur : GoogleDevelopers.
  • data-channelid : ID de la chaîne associé au bouton. Exemple de valeur : UC_x5XG1OV2P6uZZ5FSM9Ttw. Vous pouvez récupérer l'ID de votre chaîne dans les paramètres de votre compte YouTube ou en utilisant l'APIs Explorer à la fin de ce document. En savoir plus sur l'utilisation des ID de chaîne

Attributs facultatifs

• data-layout : format du bouton. Les valeurs possibles sont les suivantes :

  • default : affiche une icône de bouton de lecture et le mot "s'abonner" dans la langue de l'utilisateur, qui est sélectionnée en fonction de ses paramètres linguistiques ou de sa position géographique.
  • full : affiche l'avatar et le titre de la chaîne en plus du bouton standard.

• data-theme : spécifie le jeu de couleurs à utiliser pour le bouton. Les valeurs valides sont default et dark. Le thème dark est destiné aux applications qui placent des boutons sur un élément d'arrière-plan plus sombre.

• data-count : indique si le bouton affiche le nombre d'abonnés de la chaîne. Par défaut, le nombre d'abonnés est affiché. Les valeurs valides sont default et hidden.

• data-onytevent – Remarque : Cet attribut a été abandonné.

Événements

Remarque : Les événements subscribe et unsubscribe du bouton S'abonner ont été abandonnés. De même, l'attribut data-ytonevent, qui pouvait auparavant être ajouté à l'élément du widget pour spécifier un écouteur pour les notifications d'événements, a également été abandonné.

Affichage dynamique

Au lieu d'utiliser le code d'intégration standard de l'outil de configuration, vous pouvez afficher le Subscribe Button de manière dynamique. Cette approche empêche le JavaScript de l'API de parcourir l'intégralité de DOM pour localiser les boutons, ce qui peut améliorer le temps de rendu des boutons.

Dans le cadre de Google+ JavaScript API, Subscribe Button est compatible avec les méthodes standards go et render, qui peuvent être utilisées pour afficher dynamiquement les boutons d'abonnement. Par exemple, vous pouvez utiliser ces méthodes pour afficher un bouton qui n'est pas présent lorsque l'événement DOM ready se déclenche, par exemple sur une page mise à jour avec AJAX.

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 pour un Subscribe Button, appelez la méthode go() pour afficher le bouton. opt_container Élément HTML contenant 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 spécifié. Utilisez cette méthode si l'élément qui contiendra le Subscribe Button n'existe pas encore et doit être construit. conteneur Identifie l'élément HTML vide dans lequel Subscribe Button sera affiché. Indiquez l'ID de l'élément ou l'élément DOM lui-même. paramètres  : objet contenant des attributs de bouton d'abonnement sous forme de paires key:value, comme {"channel": "GoogleDevelopers", "layout": "full"}.

Afficher un bouton avec gapi.ytsubscribe.go

L'exemple ci-dessous montre le code à utiliser pour appeler la méthode gapi.ytsubscribe.go afin d'afficher dynamiquement un bouton lorsque l'utilisateur clique sur le lien.

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

Afficher un bouton avec gapi.ytsubscribe.render

L'exemple ci-dessous montre comment appeler la méthode gapi.ytsubscribe.render pour afficher un bouton de manière dynamique lorsque l'utilisateur clique sur le lien :