Hai un canale YouTube e vuoi promuoverlo offrendo iscrizioni tramite un pulsante sul tuo sito web? Beh, è semplicissimo: vai alla pagina appropriata ( questa ) e troverai l'esempio ufficiale. Da lì, tutto ciò che devi fare è inserire il nome o l'ID del canale, cliccare su un paio di selettori per scegliere lo stile, e il gioco è fatto: hai il tuo nuovo pulsante.
Ma questo pulsante, come la stragrande maggioranza di quelli ufficiali, ha uno svantaggio: la sua dipendenza da JavaScript di terze parti. Questo significa richieste extra, essere soggetto allo stato del server e, tutto sommato, un ritardo nel caricamento. Non è un disastro, ma poiché tutto si somma, vediamo come rendere il pulsante incredibilmente veloce da caricare con un piccolo sacrificio.
Immagine originale: imgkid.com
Se hai seguito il link qui sopra, avrai visto che il codice risultante per un pulsante normale è simile al seguente:
<script src="https://apis.google.com/js/platform.js"></script>
<div class="g-ytsubscribe" data-channel=" ID_o_NOME_CANALE " data-layout="default" data-count="non definito"></div>
(*) In verde, le informazioni che devono essere modificate con i dati del canale.
La prima riga carica l'API di Google e, sebbene gli utenti di Blogger possano saltarla perché la piattaforma la carica già di default per i pulsanti G+ e altre funzionalità, il pulsante accederà comunque all'API per ciò di cui ha bisogno: il numero attuale degli iscritti per visualizzarlo sul pulsante.
Questo sarà il piccolo sacrificio che dovremo fare: omettere il contatore. Questo perché useremo un semplice URL che rimanda direttamente a una pagina con il modulo di iscrizione. Inoltre, l'immagine non sarà un'immagine vera e propria, ma piuttosto un insieme di forme di base create con CSS. Ecco come apparirà:
<a class='ytboton' href='http://www.youtube.com/subscription_center?add_user= ID_or_CHANNEL_NAME '> YouTube</a>
YouTube
Con questo avremo un semplice collegamento come quello sopra che porta alla pagina in questione, ma se vuoi che assomigli (o quasi) al pulsante originale, devi solo aggiungere questo CSS dopo il codice precedente:
<style>
a.ytboton {posizione: relativa;display: blocco;larghezza: 100px;altezza: 24px;margine: 0 auto;imbottitura: 4px 8px 4px 34px;sfondo: #B31217;colore: bianco;altezza della riga: 16px;dimensione del carattere: 12px;decorazione del testo: nessuno;famiglia di caratteri: arial;dimensione del riquadro: bordo-scatola;}
a.ytbutton:before {contenuto:"\25B6";posizione: assoluta;superiore: 4px;sinistra: 8px;imbottitura: 1px 5px;sfondo: bianco;colore: #B31217;raggio del bordo: 3px;dimensione del carattere: 10px;dimensione del riquadro: bordo-scatola;altezza della riga: 12px;}
</style>
YouTube
Ovviamente, puoi fare a meno di quest'ultimo e sostituire direttamente il testo ("YouTube") all'interno del link con un'immagine come questa:
Commenti
Posta un commento