Strumento di riproduzione di video in diretta e video incorporati

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 incorporati Esempio di codice Impostazioni Aggiunta 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

Includi tutto il post

Ottieni il codice

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 async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></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	Impostazione predefinita
`data-href`	L'URL assoluto 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-lazy`	`true` implica l'utilizzo del meccanismo di lazy-loading del browser impostando l'attributo iframe `loading="lazy"`. Ne consegue che il browser non esegue il rendering del plug-in se non è vicino al viewport e potrebbe non essere mai visto. Può essere `true` o `false` (impostazione predefinita).	`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`

Esempio di configurazione

<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.

Scegli 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 al 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 <body> iniziale:

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></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 async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></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 regolare le dimensioni, la lingua e altre impostazioni.

Acquisizione dell'URL di un post con video

Potrebbero esserci scenari in cui il tuo codice di incorporamento viene creato da un CMS e hai bisogno dell'URL del post raw. Puoi ottenere l'URL dei post in due modi:

Copia l'URL del permalink dalla barra degli indirizzi del browser.
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 l'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 seguendo questa 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 di un 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 di src per usare la tua lingua. Sostituisci en_US con la lingua desiderata, ad es. fr_FR per il francese (Francia):

src="https://connect.facebook.net/fr_FR/sdk.js#xfbml=1&amp;version=v3.2"

In base alla lingua, potresti aver bisogno di 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    : 'v3.2'
  });
  }; (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 = "https://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>

Prossimamente verrà rilasciata un'integrazione con WordPress nuova e semplice da utilizzare.

FAQ

Posso usare la proprietà `embed_htmlvideo` 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à ma 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>"
}