Video incorporati e strumento di riproduzione dei video in diretta

Lo strumento di riproduzione dei video incorporati consente di aggiungere i video di Facebook e i video di Facebook in diretta al tuo sito Web in modo semplice. Come origine video o video in diretta, puoi usare qualsiasi post pubblico con video delle Pagine o degli utenti.

Configuratore dello strumento di riproduzione dei video incorporatiEsempio di codiceImpostazioniAggiunta manuale del codice

Istruzioni dettagliate

1. Selezione dell'URL o della Pagina

Seleziona l'URL di un video di Facebook da incorporare.

2. Configuratore di codici

Incolla l'URL nel Configuratore di codici e clicca sul pulsante "Ottieni il codice" per ottenere il codice dello strumento di riproduzione dei video incorporati.

3. Copia e inserimento dello snippet HTML

Copia e incolla lo snippet nell'HTML del sito Web di destinazione.

Configuratore dello strumento di riproduzione dei video incorporati

URL del video
La larghezza in pixel del video

Esempio di codice completo

Copia e incolla l'esempio di codice nel tuo sito Web. Modifica il valore data-href con l'URL del video. Regola le dimensioni dello strumento di riproduzione mediante l'attributo data-width.

<html>
<head>
  <title>Your Website Title</title> 
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your embedded video player code -->
  <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
    <div class="fb-xfbml-parse-ignore">
      <blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
        <a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
        <p>How to share with just friends.</p>
        Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014
      </blockquote>
    </div>
  </div>

</body>
</html>

Impostazioni

Il configuratore descritto in precedenza non comprende tutte le possibili impostazioni dello strumento di riproduzione dei video incorporati. Puoi modificare anche le impostazioni seguenti:

Impostazione Descrizione Valore predefinito

data-href

L'URL univoco del video.

n/a

data-allowfullscreen

Consente la riproduzione del video a schermo intero: può essere false o true.

false

data-autoplay

Avvia automaticamente la riproduzione del video al caricamento della pagina. Il video verrà riprodotto con l'audio disattivato. I comandi dello strumento di riproduzione consentono di attivare l'audio. Questa impostazione non è valida per i dispositivi mobili: può essere false o true.

false

data-width

La larghezza del contenitore video. Minimo 220px.

auto

data-show-text

Seleziona true per includere il testo del post su Facebook associato al video, se presente. Disponibile solo per i siti per computer.

false

data-show-captions

Seleziona true per mostrare le didascalie (se disponibili) per impostazione predefinita. Le didascalie sono disponibili solo su computer.

false

Configurazione d'esempio

<div class="fb-video"
  data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
  data-width="500"
  data-allowfullscreen="true"
  data-autoplay="true"
  data-show-captions="true"></div>

Acquisizione del codice da un post con video

1. Accesso al post con video

Se stai pubblicando un video pubblico (vedi FAQ), puoi ottenere il codice di incorporamento direttamente dal relativo post.

Seleziona Embed Video nel menu delle opzioni:

In alternativa, visualizzando il video a pagina intera, seleziona il pulsante Embed Video in basso a destra:

Solo per le Pagine

Quando pubblichi un video pubblico su una Pagina (vedi FAQ), puoi ottenere il codice di incorporamento direttamente dal diario. Clicca sull'icona visualizzata in alto a destra nel post su Facebook.

Seleziona Embed Video nel menu a discesa: (solo per le Pagine)

2. Copia e inserimento del codice

Verrà visualizzata una finestra di dialogo contenente il codice per incorporare il post con video. Copia e incolla il codice nel punto della tua pagina Web in cui desideri posizionarlo.

Per informazioni tecniche dettagliate, consulta la sezione Aggiunta manuale del codice

Aggiunta manuale del codice

Oltre a usare il generatore di codici, puoi anche incorporare il codice manualmente.

1. Acquisizione dell'URL del post con video

Devi innanzitutto ottenere l'URL del post con video da condividere. Il post con video deve essere visibile a tutti (vedi FAQ), ossia deve presentare un'icona grigia a forma di mondo accanto alla data di pubblicazione del post:

Per eseguire un test, usa questo URL di esempio:

"https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"

2. Caricamento dell'SDK JavaScript

Per usare il plug-in dello strumento di riproduzione dei video incorporati, o altri plug-in social, devi aggiungere l'SDK di Facebook per JavaScript al tuo sito Web. Devi caricare l'SDK una sola volta nelle pagine, possibilmente subito dopo il tag iniziale <body>:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Per ricevere maggiore assistenza con l'implementazione dell'SDK JavaScript, consulta l'apposita guida di avvio rapido.

3. Posizionamento del tag dello strumento di riproduzione dei video incorporati

Posiziona il tag dello strumento di riproduzione dei video incorporati in qualsiasi punto del tuo sito Web. Sostituisci {your-video-post-url} con l'URL del post.

<div class="fb-video" data-href="{your-video-post-url}"  
  data-allowfullscreen="true" data-width="500"></div>

4. Test

Dopo aver completato questi passaggi, potrai testare lo strumento di riproduzione dei video incorporati. Un'integrazione completata avrà un aspetto simile a questo:

<html>
  <title>My Website</title>
<body>
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
  <h1>My Video Player</h1>
  <div class="fb-video"
    data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
    data-width="500"
    data-allowfullscreen="true"></div>
</body>
</html>

Il risultato del nostro test d'esempio è illustrato nello screenshot seguente.

5. Personalizzazione

Segui le istruzioni più in basso in questa pagina per modificare le dimensioni, la lingua e altre impostazioni.

Acquisizione dell'URL di un post con video

In alcune situazioni, il codice di incorporamento viene creato da un CMS ma serve solo l'URL del post non elaborato. Puoi ottenere l'URL dei post in due modi:

  1. Copia l'URL del permalink dalla barra degli indirizzi del browser.
  2. Clicca con il tasto destro del mouse sulla data di pubblicazione del post e copia l'indirizzo del link.

Entrambi i metodi sono evidenziati in rosso nello screenshot seguente.

Tramite API Graph

Se desideri integrare automaticamente gli strumenti di riproduzione dei video incorporati nel sito Web, puoi usare l'API Graph per aggregare i video. Ad esempio, puoi usare l'endpoint dell'API Page Videos, che invierà una risposta alla tua richiesta per /{page-id}/videos nel formato seguente (abbreviato):

{
  "data": [
    {
      "id": "1234567890",
      "created_time": "2015-02-25T23:22:06+0000",
      "description": "My Video Caption",
      "embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>",
      "format": []
    }
   ]
}

Per ottenere l'URL del video:

Usa il valore id per creare un URL che segue la struttura:

"https://www.facebook.com/video.php?v={id}"

Non usare la proprietà embed_html per incorporare i video. Per maggiori informazioni su questo argomento, consulta la sezione FAQ

Layout su computer

Puoi modificare la larghezza dello strumento di riproduzione dei video incorporati su computer tramite l'attributo data-width nell'apposito tag, come mostrato nell'esempio seguente. Il valore minimo è 220. Non esiste un limite massimo, tuttavia lo strumento di riproduzione non supererà mai le dimensioni del proprio elemento principale.

Non usare i tag di stile CSS per modificare le dimensioni dei plug-in poiché potrebbero verificarsi errori di visualizzazione.

<!-- WRONG! -->
<style type="text/css">
.fb-video {
  width: 500px;
}
</style>
<div class="fb-post" data-href="{your-video-post-url}"></div>

<!-- CORRECT -->
<div class="fb-video" data-href="{your-video-post-url}"
  data-allowfullscreen="true" data-width="500"></div>

Schermo intero

Puoi aggiungere la proprietà data-allowfullscreen="true" per consentire la riproduzione del video a schermo intero.

Layout sul Web mobile

Sul Web mobile, lo strumento di riproduzione dei video incorporati si adatta automaticamente alla larghezza interna del proprio elemento principale.

Modifica della lingua

Puoi modificare la lingua del plug-in dello strumento di riproduzione dei video incorporati caricando una versione localizzata dell'SDK di Facebook per JavaScript. Durante il caricamento dell'SDK, modifica il valore js.src per usare la tua lingua: ti basta sostituire en_US con la lingua desiderata, ad es. fr_FR per il francese (Francia):

js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v2.5";

Le lingue supportate sono indicate nel file XML delle lingue di Facebook. In base alla lingua, potresti dover modificare la larghezza dei plug-in social. Per maggiori informazioni, puoi consultare la nostra pagina dedicata a localizzazione e traduzione.

WordPress

Se stai già usando l'SDK di Facebook per JavaScript in un sito WordPress, puoi usare il plug-in dello strumento di riproduzione dei video incorporati aggiungendo il tag fb-video al tuo post:

<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" 
  data-width="500" data-allowfullscreen="true"></div>

Se non usi l'SDK di Facebook per JavaScript e incorpori un video copiando e incollando lo snippet, reperibile nei post con video, molto probabilmente il plug-in dello strumento di riproduzione dei video incorporati non verrà visualizzato poiché WordPress converte tutti i caratteri & in #038;, bloccando il funzionamento dello strumento di riproduzione.

In questo caso, per aggiungere il plug-in, usa il codice seguente:

<script>window.fbAsyncInit = function() {
  FB.init({
    xfbml      : true,
    version    : 'v2.5'
  });
  }; (function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>

Una nuova e più semplice integrazione con WordPress sarà disponibile a breve.

FAQ

Posso usare la proprietà videoembed_html dell'API Graph?

No, ti consigliamo di non usare la proprietà embed_html ma il plug-in dello strumento di riproduzione dei video incorporati.

Informazioni sulla proprietà embed_html:

L'endpoint API Graph video visualizzerà una proprietà denominata embed_html. Il relativo valore contiene un elemento HTML incorporabile in una pagina Web per la riproduzione del video desiderato.

Questo valore non deve essere confuso con il plug-in dello strumento di riproduzione dei video incorporati. Consigliamo di non usare questa proprietà bensì il plug-in dello strumento di riproduzione dei video incorporati.

Se usi il valore della proprietà embed_html, il tuo strumento di riproduzione dei video:

  • non funzionerà sui dispositivi mobili e sui tablet;
  • non conterrà informazioni aggiuntive come visualizzazioni, titolo del video e così via.

Esempio della proprietà embed_html (obsoleta):

{
  "embed_html": 
    "<iframe 
      src=\"https://www.facebook.com/video/embed?video_id=1234567890\"
      width=\"1280\" 
      height=\"720\"
      frameborder=\"0\">
    </iframe>"
}