Reference Guide

Attributi

Questa sezione spiega come creare un elemento <div> per un pulsante di abbonamento. Gli elenchi riportati di seguito spiegano gli attributi obbligatori e facoltativi dell'elemento. Gli attributi facoltativi ti permettono di controllare il layout e il tema del pulsante e di scegliere se mostrare o meno il numero di iscritti al canale.

Attributi obbligatori

  • class: imposta il valore su g-ytsubscribe. Questa classe identifica l'elemento <div> come contenitore per un pulsante di iscrizione e consente a YouTube di ridimensionare dinamicamente il pulsante incorporato, come spiegato nella sezione successiva.

  • Devi specificare un valore per uno dei seguenti attributi:

    • data-channel: il nome del canale associato al pulsante. Valore di esempio: GoogleDevelopers.
    • data-channelid: l'ID canale associato al pulsante. Valore di esempio: UC_x5XG1OV2P6uZZ5FSM9Ttw. Puoi recuperare l'ID canale nelle impostazioni del tuo account YouTube o utilizzando il APIs Explorer alla fine di questo documento. Scopri di più sull'utilizzo degli ID canale.

Attributi facoltativi

  • data-layout: il formato del pulsante. I valori validi per l'attributo sono:

    • default: mostra un'icona a forma di pulsante di riproduzione e la parola "Iscriviti" nella lingua dell'utente, selezionata in base all'impostazione della lingua o alla località dell'utente.
    • full: mostra l'avatar e il titolo del canale, oltre al pulsante standard.

  • data-theme: specifica la combinazione di colori da utilizzare per il pulsante. I valori validi sono default e dark. Il tema dark è destinato alle applicazioni che posizionano i pulsanti su un elemento di sfondo più scuro.

  • data-count: indica se il pulsante mostra il numero di iscritti del canale. Per impostazione predefinita, il numero è riportato sul pulsante. I valori validi sono default e hidden.

  • data-onytevent – Nota:questo attributo è stato ritirato.

Eventi

Nota:gli eventi subscribe e unsubscribe del pulsante Iscriviti sono stati ritirati. Allo stesso modo, anche l'attributo data-ytonevent, che in precedenza poteva essere aggiunto all'elemento widget per specificare un listener per le notifiche degli eventi, è stato ritirato.

Rendering dinamico

In alternativa all'utilizzo del codice di incorporamento standard dello strumento di configurazione, puoi eseguire il rendering dinamico di Subscribe Button. Questo approccio impedisce al JavaScript dell'API di attraversare l'intero DOM per individuare i pulsanti, il che può migliorare il tempo di rendering dei pulsanti.

Nell'ambito di Google+ JavaScript API, Subscribe Button supporta i metodi standard go e render, che possono essere utilizzati per eseguire il rendering dinamico dei pulsanti di abbonamento. Ad esempio, puoi utilizzare questi metodi per eseguire il rendering di un pulsante che non è presente quando viene attivato l'evento DOM ready, ad esempio in una pagina aggiornata con AJAX.

Metodo Descrizione
gapi.ytsubscribe.go(
  opt_container
)		 Consente di eseguire il rendering di tutti i pulsanti di iscrizione nel contenitore specificato. Usa questo metodo se i pulsanti di iscrizione su cui desideri eseguire il rendering esistono già. Ad esempio, se la tua applicazione invia una richiesta AJAX che restituisce l'elemento <div> completo per un Subscribe Button, chiama il metodo go() per eseguire il rendering del pulsante.
opt_container
L'elemento HTML che contiene i pulsanti di abbonamento da eseguire il rendering. Specifica l'ID dell'elemento oppure l'elemento DOM stesso. Se questo parametro viene omesso, il rendering viene eseguito su tutti i pulsanti di iscrizione nella pagina.
gapi.ytsubscribe.render(
  container,
  parameters
)		 Visualizza Subscribe Button all'interno del container specificato. Utilizza questo metodo se l'elemento che conterrà Subscribe Button non esiste ancora e deve essere creato.
container
Identifica l'elemento HTML vuoto in cui verrà visualizzato Subscribe Button. Specifica l'ID dell'elemento oppure l'elemento DOM stesso.
Parametri
Un oggetto contenente attributi del pulsante di iscrizione come coppie key:value, ad esempio {"channel": "GoogleDevelopers", "layout": "full"}.

Visualizzare il pulsante con gapi.ytsubscribe.go

L'esempio seguente mostra il codice da utilizzare per chiamare il metodo gapi.ytsubscribe.go per eseguire il rendering dinamico di un pulsante quando viene fatto clic sul link.

Nota:lo strumento di configurazione riportato sopra utilizza anche il metodo go per eseguire il rendering di un nuovo pulsante quando aggiorni le opzioni o il codice del pulsante.

Esegui il rendering di un pulsante con gapi.ytsubscribe.render

L'esempio seguente mostra come chiamare il metodo gapi.ytsubscribe.render per eseguire il rendering dinamico di un pulsante quando viene fatto clic sul link: