¿Sabías que los videos de Facebook generan más de 8 mil millones de visitas todos los días? ¿Y que 8 mil millones es el doble de lo que era hace un año? Si bien parte de este éxito masivo se puede atribuir a la reproducción automática de videos y la metodología favorable de conteo de vistas, el hecho es que el video de Facebook es ahora un jugador importante para el consumo de video.
Esta publicación se trata de aprovechar el video de Facebook incrustándolo en sus publicaciones y páginas de WordPress . Te mostraré cómo puedes incrustar fácilmente videos de Facebook a través del Editor de WordPress normal y/o Divi. Luego, le daré información sobre cómo puede cambiar algunos detalles básicos de visualización de sus videos y hacer que se reproduzcan automáticamente. Y finalmente, si no quiere ensuciarse las manos con el primer método que describo, también le mostraré el método más fácil para incrustar videos a través de un iframe .
Si bien es probable que YouTube siga siendo el rey de los videos en el futuro previsible, veo algunas ventajas de incrustar videos de Facebook. Por ejemplo, puedes…
- Aproveche la transmisión en vivo : es posible que haya visto la nueva y popular función de transmisión en vivo que Facebook lanzó recientemente. Cuando incrusta videos siguiendo este método, también podrá incrustar transmisiones en vivo desde Facebook directamente en su sitio de WordPress.
- Promoción cruzada de su página de Facebook : incrustar videos de Facebook proporciona otro método para promocionar su página de Facebook en su sitio web. Incluso si ya está incluyendo botones de «me gusta» o un enlace a su página, incrustar videos directamente desde Facebook proporciona otra conexión. Por supuesto, si también está tratando de promocionar un canal de YouTube , deberá elegir cuáles son sus prioridades.
- Curar el contenido de video de otras páginas de Facebook : si ve un excelente video nativo de Facebook que desea incluir en una publicación o página, incrustarlo es prácticamente su única opción, a menos que desee vincular directamente a la página de Facebook.
Cómo incrustar videos de Facebook con JavaScript SDK
Este proceso para configurar un video de Facebook es bastante sencillo. Pero sí requiere agregar un pequeño fragmento de código al encabezado de su tema antes de que pueda comenzar a incrustar videos reales. Este fragmento de código vale la pena porque le permite hacer algunas cosas ingeniosas como agregar reproducción automática a sus videos incrustados.
Entonces, para comenzar, debe agregar el SDK de Facebook para JavaScript al encabezado de su tema. Ese es esencialmente un nombre elegante para este fragmento de código :
|
01
02
03
04
05
06
07
08
09
|
<!-- 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> |
Si está utilizando Divi , le mostraré una solución específica de Divi un poco más adelante. Pero para los temas regulares de WordPress , deberá ir al archivo header.php de su tema y agregarlo justo después de la etiqueta <body> de esta manera:
Idealmente, debería usar un tema secundario y agregar este fragmento de código al archivo header.php de su tema secundario .
Después de agregar este código una vez, habrá terminado para siempre. Puedes incrustar videos donde quieras usando un código de incrustación estandarizado.
Cómo incrustar videos individuales de Facebook
Para generar ese segundo bit de código, deberá encontrar la URL real del video que desea compartir y luego insertar esa URL en este pequeño fragmento de código:
|
01
02
|
<div class="fb-video" data-href="{your-video-post-url}" data-allowfullscreen="true" data-width="500"></div> |
También puede cambiar el ancho del video en píxeles editando la opción «ancho de datos» a un número diferente.
Hay un par de formas de obtener esta URL. Si está viendo una publicación de video en el feed de una página, puede hacer clic derecho en la marca de tiempo y copiar la URL:
Si está viendo un reproductor de video completo, puede encontrar la URL de una manera similar:
Para darle un ejemplo del mundo real, así es como se vería el código de inserción después de agregar la URL para el video de Divi Builder de ejemplo y cambiar el ancho del video a 550 px:
|
01
02
|
<div class="fb-video" data-href="https://www.facebook.com/elegantthemes/videos/10153760379211923/" data-allowfullscreen="true" data-width="550"></div> |
Simplemente pegue ese código en la pestaña de texto del editor de WordPress para incrustar el video. También puede agregar este código a su barra lateral o en cualquier otro lugar que permita el código:
Una vez que publique la publicación, debería ver el video incrustado:
Hacer que sus videos incrustados se reproduzcan automáticamente
Una de las grandes ventajas de incrustar videos de Facebook de esta manera es la capacidad de hacer que se reproduzcan automáticamente (en silencio) como en Facebook.
Si desea que los videos de Facebook se reproduzcan automáticamente incluso cuando están incrustados en su sitio web, solo necesita agregar un atributo a su código de inserción.
Aquí está el atributo que necesita agregar:
|
01
|
data-autoplay=”true” |
En el código de inserción completo, se ve así:
|
01
|
<div class="fb-video" data-href="https://www.facebook.com/elegantthemes/videos/10153760379211923/"data-allowfullscreen="true" data-width="550" data-autoplay="true"></div> |
Una vez que realice ese cambio, sus videos deberían reproducirse automáticamente cuando un lector cargue la página.
Incrustar videos de Facebook con Divi y JavaScript SDK
Si está utilizando Divi, el proceso es un poco más simple para agregar el fragmento de código SDK de JavaScript a su encabezado. Solo necesita ingresar a sus opciones de Divi y pegar el código en un cuadro.
Vaya a Divi → Opciones de tema → Integración . Luego, desplázate hacia abajo hasta que encuentres el cuadro con la etiqueta Agregar código al <título> de tu blog :
Pegue el fragmento de código completo allí y asegúrese de guardar los cambios. Como referencia, este es el fragmento de código que debe agregar:
|
01
02
03
04
05
06
07
08
09
|
<!-- 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> |
Luego, puede seguir el resto de las instrucciones anteriores para encontrar la URL de un video y generar el código de inserción. Puede pegar este código de inserción en los módulos Divi. Por ejemplo, así es como se ve si agrega el código de inserción en un módulo de código:
Cuando obtenga una vista previa de ese módulo en la interfaz, se verá así:
Cómo incrustar videos de Facebook con iFrames
Si no desea profundizar en el encabezado de su tema, Facebook también ha agregado incrustaciones de iframe que funcionan de manera muy similar a YouTube. Solo tenga en cuenta : hasta donde puedo encontrar, no puede hacer que los videos se reproduzcan automáticamente cuando los incrusta a través del iframe. Entonces, si bien es más simple agregar videos de esta manera, este método no ofrece tanta funcionalidad como el que describí anteriormente.
Para encontrar el código de inserción, primero debe hacer clic en la pequeña flecha en la esquina superior derecha de una publicación de video:
Luego seleccione la opción Incrustar .
Se abrirá una nueva ventana con su código iframe:
Simplemente copie ese código y péguelo en la pestaña de texto del Editor de WordPress o en un módulo Divi:
Cuando publique el video, debería ver que se muestra exactamente igual que con el método anterior.
Envolviendo las cosas
El video de Facebook está creciendo rápidamente y se volverá cada vez más importante como canal de medios, por lo que vale la pena saber cómo incrustar videos de Facebook en WordPress.
Si solo está buscando la forma más rápida y fácil de incrustar videos de Facebook, probablemente pueda tomar el código iframe e insertar videos de esa manera.
Por otro lado, si está dispuesto a agregar un poco de código al archivo de encabezado de su tema, obtendrá acceso a poderosos videos de reproducción automática, que Facebook ha utilizado con gran éxito. Solo tiene que agregar el código al encabezado de su tema una vez. Después de eso, incrustar videos a través de este método no lleva más tiempo que el método iframe. Es por eso que, en general, debe optar por el primer método si es posible.
¿Ha comenzado a incrustar videos de Facebook en su sitio de WordPress con resultados positivos o negativos? Me encantaría escuchar sus experiencias en los comentarios.
Imagen en miniatura del artículo por DenEmmanuel / shutterstock.com