|
 Mostrare un elenco video sulla propria pagina facebook? Niente di più semplice, esistono infatti già numerose applicazioni che svolgono questo scopo.
In questa guida però proveremo a creare da soli un elenco video con tanto di lettore YouTube.
Il codice, come vedremo, sarà molto ripetitivo e sarebbe opportuno generarlo attraverso una applicazione Facebook ed un linguaggio di scripting come Php.
Contentriamoci però al momendo sul FBML, vedremo in seguito come creare applicazioni.
Come recuperare i contenuti da YouTube
Per prima cosa dobbiamo apprendere come recuperare immagini e video da YouTube, esaminiamo la url di un video qualsiasi:
Il parametro v è quello che ci interessa. Grazie a questo possiamo recuperare una miniatura da usare come anteprima:
- http://img.youtube.com/vi/PdTEBPGNpKM/3.jpg
Questa anteprima per comunicare all'utente "fai click qui per avviare il lettore". A tal scopo sarebbe opportuno aggiungere il simbolo Play, avremo bisogno di una immagine PNG con trasparenza come questa:
Come sovrapporre due immagini in HTML è stato spiegato nella guida precedente, di seguito mostremo il codice relativo senza ulteriori commenti.
Passiamo al codice FBML per mostrare il video YouTube. Per prima cosa diciamo che non è possibile visualizzare un oggetto Flash (il nostro Player) senza che l'utente ci abbia fatto click prima. Abbiamo bisogno di una immagine che informi l'utente che deve compiere questa azione.
Una stratagemma efficace è usare una immagine con un lettore tutto nero, in fondo è quello che gli utenti sono abituati a vedere:
Hai fatto click? E si... è istintivo ormai.
Passiamo al codice:
<fb:swf
swfsrc="http://www.youtube.com/v/PdTEBPGNpKM&showinfo=0&showsearch=0&rel=0&autoplay=1"
imgsrc="http://www.miosito.it/fai_click.jpg" waitforclick='true' width="400" height="320" />
L'attributo swfsrc è l'indirizzo del lettore YouTube, nota come compaia all'interno sempre il codice del video. L'attributo imgsrc rappresenta l'immagine mostrata all'utente prima di mostrare il lettore vero e proprio.
Come mostrare e nascondere Contenuti in FBML
E' possibile in HTML indicare su ogni TAG un ID che lo identifica in maniera univoca:
<div id="mioId">
....
</div>
Esiste un codice FBML che consente di mostrare o nascondere un elemento:
<a clicktoshow="mioId">Mostra</a>
<a clicktohide="mioId">Nascondi</a>
I due precedenti link servono, rispettivamente, a mostrare o nascondere il blocco DIV dichiarato in precedenza. Sfrutteremo questo codice per mostrare il player quando l'utente fa click sull'anteprima.
Elenco Video
Bene, abbiamo appreso tutte le nozioni necessarie, è il momento di passare al codice completo.
Per ogni video della nostra lista dobbiamo:
- mostrare l'anteprima
- al click sull'anteprima mostrare il player
Per l'anteprima:
<div style="background: url(http://img.youtube.com/vi/PdTEBPGNpKM/3.jpg) no-repeat">
<a clicktoshow="video1"><img src="http://www.miosito.it/play_button.png" />a>
</div>
Il risultato sarà così:
Quando l'utente fa click sarà mostrato l'elemento con Id video1, tale elemento conterrà il player e per default sarà non visibile:
<div id="video1" style="display: none">
<fb:swf
swfsrc="http://www.youtube.com/v/PdTEBPGNpKM&showinfo=0&showsearch=0&rel=0&autoplay=1"
imgsrc="http://www.miosito.it/fai_click.jpg" waitforclick='true' width="400" height="320" />
</div>
Bene, è fatta. Per inserire altri video basta ripetere il codice dell'anteprima e del player tante volte quante ne servono facendo attenzione ad indicare per ogni video un ID differente.
Il risultato all'opera lo potete vedere qui:
http://www.facebook.com/pages/Radio-Schitikkio/158484840837111?v=app_109680822430042
|
Usare Facebook 
