Come inserire un video di Youtube nella pagina Facebook Static Fbml

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='https://www.youtube.com/v/xxxxxxxxxx'
imgsrc='https://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='https://www.youtube.com/v/0tOMcTUrpVk'
imgsrc='https://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.

<fb:swf
swfbgcolor="000000" imgstyle="border-width:3px; border-color:white;"
swfsrc='http://www.youtube.com/v/JOt2Qp0H9G8'
imgsrc='http://img.youtube.com/vi/JOt2Qp0H9G8/2.jpg' width='340' height='270' />
  • Cosa è la fidelizzazione del cliente Fidelizzazione del cliente definizione […]

    Continue reading
  • Il web design per eCommerce è un campo complicato e […]

    Continue reading
  • Lead Generation per aumentare le tu vendite e clienti Genera […]

    Continue reading
  • Cosa è la fidelizzazione del cliente Fidelizzazione del cliente definizione […]

    Continue reading
  • Il web design per eCommerce è un campo complicato e […]

    Continue reading

19 Comments

  1. nicolò Dicembre 27, 2010 at 1:55 am - Reply

    Cavolo grazie Gentian, una cosa molto utile e interessante.
    Non so se riuscirò a farlo, nonostante la tuas chiarissima spiegazione, ma ci proverò lo stesso :-D
    A presto, Nicolò.

  2. gBusiness Dicembre 30, 2010 at 7:17 pm - Reply

    Ciao Nicolò,
    se non ci riesci scrivici pure e vedrai che ci riusceremo tranquillamente :).

  3. Davide Gennaio 9, 2011 at 1:10 pm - Reply

    Era da una settimana che cercavo di inserire un video nella mia pagina di Facebook e non ci riuscivo ma leggendo la tua guida ce l’ho fatta.

    Grazie

  4. gBusiness Gennaio 16, 2011 at 1:21 pm - Reply

    Grazie a te Davide.

  5. Annunci Torino Febbraio 6, 2011 at 10:34 am - Reply

    Grande..grazie per la guida sei forte..e molto utile per promuovere le nostre attivita anche.

  6. denise Febbraio 10, 2011 at 12:24 am - Reply

    Complimenti, ottimo articolo.

  7. Gentian Febbraio 16, 2011 at 9:30 pm - Reply

    Grazie denise e Annunci Torino.

  8. onlyver dj Febbraio 20, 2011 at 1:07 am - Reply

    purtroppo a me non funziona……sarò io imbranato…..
    eppure ho incollato persino gli esempi fatti……ma non appare nulla.
    il massimo ke son riuscito ad ottenere è una immagine statica del video e appena ci clicco sopra scompare tutto.

    • Gentian Febbraio 20, 2011 at 11:33 am - Reply

      Ciao onlyver dj,
      grazie di averci segnalato il tuo caso.

      In effetti ci sono statti degli aggiornamento.
      Ho già cambiato il codice e vedrai che adesso funziona ;) .

      Ti segnalo anche un’altra applicazione con la quale puoi inserire
      i tuoi video in automatico in una pagina su Facebook.
      Link dell’applicazione: http://www.facebook.com/apps/application.php?id=2513891999

      Spero di aver risolto il tuo problema :) – Ciao e a presto

  9. Chloe Maggio 29, 2011 at 10:39 am - Reply

    Scusa come si fa per far vedere direttamente il video? L’immagine flash è un pò bruttina :

  10. alessia Giugno 15, 2011 at 6:43 pm - Reply

    nn mi riesce uffa ! me lo puoi fare te? il video è questo http://www.youtube.com/watch?v=R46WnwPsoAw
    ti prego aiutami!!

  11. Avril Luglio 1, 2011 at 11:49 pm - Reply

    io sn riuscita a mettere il video ma nn riesco a mettere un immagine per il video :(

  12. Melissa Gennaio 22, 2012 at 7:17 pm - Reply

    Cia senti io non ci riesco,me lo potresti fare tu questo è il video.

  13. salvatore stasio Gennaio 28, 2012 at 10:49 pm - Reply

    Bellissima guida mi è servita molto,ma pultroppo non riesco a mettere 1 click per azzionare il video aspetto tue risposte grz ancora.

  14. Ghentian Gennaio 28, 2012 at 11:35 pm - Reply

    @salvatore stasio
    Per questioni di sicurezza Facebook ha deciso di non far partire subito il video ma solo dopo un click.

    Grazie a te ;)

  15. andrea Gennaio 29, 2012 at 11:11 am - Reply

    non mi fa vedere il video lo aggiungo ma quando clicco rimane bianco perchè?

    • Ghentian Gennaio 30, 2012 at 9:37 am - Reply

      @andrea
      Guarda bene se il link del video funziona!

  16. blaze Febbraio 12, 2012 at 4:52 am - Reply

    Non Funziona! ne l’app nuova e ne il vecchio codice! aggiornereste per favore?!?

Leave A Comment

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.