Come inserire un video di Youtube nella pagina Facebook Static Fbml

Come inserire un video di Youtube nella pagina Facebook Static Fbml

Come ho scritto anche nell’articolo precedente Come creare una Landing Page su Facebook con Static FBML , questa applicazione Facebook è ottima per creare pagine personalizzate con layout in HTML/CSS, oppure utilizzando il linguaggio di Facebook FBML (Facebook Markup Language). Recentemente ci hanno chiesto come inserire i video nella pagina di Facebook con Static FBML. Infatti si possono inserire i video e oggetti Flash usando Static FBML, ed è abbastanza facile. Ecco come si fa a inserire un video di Youtube (Nota: è possibile utilizzare questa tecnica per inserire qualsiasi oggetto Flash con estensione .swf).

Nota bene:

1. Static FBML può essere utilizzata solo nelle pagine dei fan e non nelle  pagine dei profili personali o di un gruppo.
2. Nella tua pagina di Facebook puoi usare solo html e css e FBML.
3. I video non partono in automatico quando si apre la pagina. Facebook richiede un’azione da parte dell’utente (un click) per far partire un oggetto Flash o JavaScript.
4. Per posizionare il tuo video sulla tua pagina, inserire il codice fb: swf  all’interno del tag DIV, impostare la larghezza del video e la posizione del tag DIV usando il foglio di stile CSS.

Inserire  un video di YouTube con FBML

Ecco il codice che si deve inserire  nella tua pagina Static FBML:

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/xxxxxxxxxx'
imgsrc='http://img.youtube.com/vi/xxxxxxxxxx/2.jpg' width='340' height='270' />

• Sostituire “xxxxxxxxxx” con l’ID del video di YouTube, che è la stringa di caratteri dopo la “v =” nella URL nella barra degli indirizzi del browser.

Per esempio: http://www.youtube.com/watch?v=0tOMcTUrpVk – Devi sostituire “xxxxxxxxxx”con ” 0tOMcTUrpVk” in entrambi i casi,  con:

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/0tOMcTUrpVk'
imgsrc='http://img.youtube.com/vi/0tOMcTUrpVk/3.jpg' width='340' height='270' />

• In base alle tue preferenze puoi cambiare i valori “swfbgcolor” e “imgstyle”.

• L’ attributo  “swfsrc” è l’indirizzo assoluto del file Flash che si vuole  inserire (i video di YouTube sono in formato Flash).

• Anteprima dell’ immagine che si vuole inserire  – imgsrc

Facebook richiede un’azione da parte dell’ utente (di solito un click) per attivare i video in Flash o JavaScript.  L’immagine “imgsrc”è l’immagine che l’utente vedrà al posto del video. Solo quando lui o lei cliccherà  l’immagine il tuo video si caricherà. Per eliminare un secondo click per avviare il video dopo il caricamento, devi  impostare il video a riproduzione automatica in modo che parta immediatamente quando l’utente fa clic sull’immagine di attivazione.

• Per fare questo basta aggiungere “& autoplay = 1” alla URL swfsrc:

swfsrc = ' http://www.youtube.com/v/0tOMcTUrpVk&autoplay=1’

L’ attributo “imgsrc” imposta quale immagine di anteprima mostrare. Le miniature (thumbnails) di Youtbe sono piccole ( di solito 120×90 pixel), perciò molto probabilmente vorrai usare un’immagine più grande per l’anteprima. È possibile modificare l’URL “imgsrc” per puntare a qualsiasi immagine on line, quindi probabilmente dovrai creare una propria immagine a dimensioni  340×270 (o qualsiasi dimensioni che desideri – il 340×270 è solo un esempio), caricarlo sul tuo server (o se non ne hai uno puoi usare uno dei tanti servizi di image hosting). Nella tua Fan Page apparirà un’immagine che si trasformerà in video (oggetto Flash) solo quando un’utente farà click.

Posizionamento / Allineamento del tuo video sulla pagina Facebook

Se, per esempio,  desideri centrare il tuo video / Flash nella pagina, è necessario inserirlo in un DIV e poi posizionare il  DIV con il CSS, come in questo esempio, utilizzando la larghezza di 492 pixel:

<div style="margin:0 auto; width:492px;">

<fb:swf

swfbgcolor="000000"

imgstyle="border-width:3px; border-color:white;"

swfsrc=' http://www.youtube.com/v/0tOMcTUrpVk&autoplay=1'

imgsrc='URL-DELLA-TUA-IMMAGINE-PER-L’ANTEPRIMA’ width='492' height='391'/>

</div>

• Il “margin: 0 auto” centra il contenuto all’interno del tag DIV.

Se hai domande lascia un commento e cercherò di aiutarti.