Incorporare un video facebook sul sito (WordPress, ma anche gli altri), è un’operazione facile facile che si fa in 5 minuti. Fare in modo che si visualizzi con le giuste dimensioni sia su computer desktop che su dispositivo mobile (leggi smartphone), richiede un tantino di applicazione in più. Vediamo come si fa.

Incorporare Video Facebook sul Sito

Per mostrare un video preso da facebook su un sito WordPress (ma in generale su tutti i siti), ci sono diversi modi. Iniziamo da quello che prevede l’incorporamento del codice video.

La procedura per incorporare un video facebook sul sito:

1. Portarsi sul post di facebook che ospita il video
2. Cliccare sulla freccetta in alto a destra del post
3. Cliccare su “incorpora video” o “embed” per chi ha impostato la lingua di default inglese
4. Copiare il codice <iframe> che viene visualizzato
5. Incollare il codice sull’articolo in modalità testo
6. Salvare e Pubblicare l’articolo

 

 

 

Terminata questa semplice procedura avrete incorporato nell’articolo Worpdress il video preso da facebook.

A questo punto dovreste poter vedere il video facebook sul vostro sito. Ma in qualche caso sorge qualche problema:

• il video non si vede
• il video non viene visualizzato correttamente sui diversi tipi di dispositivo

Andiamo a trovare le soluzioni.

Video Facebook non si vede sul sito

Alcuni editor dei plugin di page builder non memorizzano il codice iframe così com’è. In questo caso provatre a racchiuderlo tra due tag <p></p>.

Un’altra soluzione potrebbe essere quella di utilizzare il codice che segue, sostituendo l’id presente (quello in grassetto), con quello del video che vogliamo incorporare:

<script>window.fbAsyncInit = function() 
{   
FB.init({   xfbml : true,   version : 'v2.3'   });
}; 
(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=1234567890"
data-width="500" data-allowfullscreen="true"></div>

Ottenere l’ID del video Facebook da incorporare

Dove si trova l’ID del video Facebook? Per poter conoscere l’ID basterà cliccare sul link del video come nella figura seguente.

 

 

Il link vi porterà alla pagina del post originale. Non vi resta che selezionare l’ID che compare sulla barra degli indirizzi del browser, copiarlo ed incollarlo all’interno del codice di incorporamento.

 

Rendere un video Responsive sul sito

Una volta incorporato il video, potrebbe manifestarsi il problema della visualizzazione sui diversi tipi di dispositivo utilizzati. Casi normalissimi sono un video dalle dimensioni perfette sul pc di casa ma troppo grande sullo smartphone. Oppure il video potrebbe essere visualizzato troppo piccolo sul pc di casa e perfetto sullo smartphone.

Con questa soluzione, potrete rendere un video responsive su WordPress, Joomla!, Html e su tutti gli altri sistemi utilizzati per la costruzione dei siti web. La parola responsive sta a significare che gli elementi di un sito, sono correttamente visualizzabili sia sui pc desktop che sui dispositivi mobili (tablet e smartphone), indipendentemente dalla grandezza dello schermo e dalla loro risoluzione.

Si tratta di agire a livello di codice HTML e CSS, ma la cosa è veramente semplice.

Dunque portatevi sulla porzione di codice che avete utilizzato per incorporare il video facebook sul sito e aggiungete questi elementi (sempre in modalità testo):

<div class=”contenitore-video”>

… il codice <iframe> del video…..

</div>

Dopodiché dovrete creare la corrispondenza alla classe “contenitore-video” sul vostro foglio di stile CSS in questa maniera:

.contenitore-video iframe,.contenitore-video embed {
width: 100%;
height: 100%;
}

Nel nostro caso sarebbe bastato solo utilizzare la classe .contenitore-video per l’iframe per ottenere il risultato. Ho voluto aggiungere anche l’embed perché la stessa istruzione può rendere responsive il video se incorporato utilizzando questo potente shortcode.

Incorporare un video facebook su WordPress con lo shortcode embed

Questo metodo è adatto solo a WordPress. È il metodo più semplice e prevede l’utilizzo degli shortcode.

Non si dovrà fare altro che prendere il link del video e copiarlo tra gli shortcode “[embed]“, come di seguito (rimuovi lo spazio tra le parentesi quadre e lo shortcode embed per farlo funzionare)

[ embed ]url del video su facebook [ /embed ]

Finito!

Qualunque metodo deciderai di utilizzare per incorporare i video di facebook sul tuo sito, ricorda che è molto importante fare in modo che possano essere visualizzati in maniera responsive su tutti i tipi di dispositivi.