Facebook aún está muy lejos de alcanzar a YouTube en reproducciones de vídeos, evidentemente. Es más, dudo que ese hecho llegue a producirse; al fin y al cabo, el vídeo es el negocio de YouTube. Pero lo cierto es que está creciendo a un ritmo espectacular, y la reproducción automática dentro de su propia plataforma tiene mucho que ver en eso.
El caso es que los días en que YouTube era la opción obvia a la hora de incluir un vídeo en tu web comienzan a quedar atrás, y cada vez es más habitual ver cómo se insertan o incrustan vídeos de Facebook en una web. Así que, para que nadie quede atrás, vamos a ver cómo hacer eso en un post o en una página de WordPress, o incluso en un producto de WooCommerce.
Tabla de contenidos
Insertar vídeos en WordPress: oEmbed y embed
Lo cierto es que WordPress hace con esto, como con casi todo, las cosas muy fáciles; especialmente si hablamos de YouTube. De hecho, es tan fácil incrustar un vídeo de YouTube en WordPress como escribir la URL del vídeo en una línea, sin más texto.
Eso es debido a que WordPress incorpora oEmbed, un protocolo que hace que tu web se comunique directamente con YouTube para solicitarle el código HTML necesario para mostrar el vídeo cuya URL tú has escrito en la entrada. Más fácil imposible.
Pero la cosa no se queda ahí. Además de eso, WordPress incorpora por defecto el shortcode [embed], que hace que insertar un vídeo pueda ser tan sencillo como hacer:
Vamos, más fácil imposible. Por desgracia, con los vídeos de Facebook no es tan sencillo, al menos si quieres hacerlo bien.
Qué hace falta para insertar un vídeo de Facebook en WordPress
Con los vídeos de Facebook el proceso es, de momento, más artesanal por así decirlo (aunque todo se andará), y para poder insertar un vídeo que se haya subido a esta red social en tu web con WordPress necesitarás tres cosas:
- Que el vídeo sea público
- Incluir el SDK de Facebook para JavaScript en la cabecera de la página/entrada
- La URL del vídeo
Formas de insertar un vídeo de Facebook en WordPress
Por supuesto, no hay una única forma de hacerlo, sino varias. Unas más recomendables que otras. Por desgracia, como suele ser habitual para este tipo de cosas, las más fáciles suelen ser las menos recomendables.
Insertar un iframe con el vídeo
Si despliegas las opciones de la publicación del vídeo en Facebook (el ▽ a la derecha de la fecha de publicación) verás la opción Insertar, y si la seleccionas te proporciona un código que llama a un iframe para que lo pegues en la web.
Sin duda es, como ves, el método más fácil, sencillo y rápido de todos. Y también el menos recomendable. Aparte de que no tienes ninguna opción sobre los estilos del vídeo (sólo sobre los del iframe), los iframes son una reliquia del pasado que debería desaparecer del mundo web.
El resultado será ineficiente, mal dimensionado (tendrás suerte si consigues que se vea como quieres) y, para colmo, aún se discute cómo afectan los iframes al SEO.
Insertar vídeos de Facebook usando un plugin
Como para casi todo en WordPress, hay plugins que te ayudarán en esta tarea. Al menos dos, gratuitos: Facebook Video Embed y WP Embed Facebook. El segundo incluso promete permitirte insertar fácilmente comentarios, albums, eventos, etcétera, de esta red social.
Si eres de los que busca una solución rápida y fácil con poco esfuerzo, ahí la tienes, no necesitas leer más. Prueba estos dos plugins y quédate con el que más te guste o más se ajuste a tus necesidades, aunque yo personalmente te recomendaría Facebook Video Embed: he probado ambos brevemente y éste carga el SDK y los estilos sólo en las URL en las que hayas hecho uso del shortcode, mientras que (a fecha de hoy y en su versión actual) WP Embed Facebook carga scripts y estilos en todas las páginas, lo necesites o no, lo que afecta innecesariamente al rendimiento de la web.
Insertar vídeos de Facebook en WordPress de forma eficiente
Como decía más arriba, Facebook Video Embed es bastante eficiente haciendo lo que hace, y no guarda opciones en la base de datos, así que ya te aviso que es una buena opción si pretendes insertar vídeos de Facebook en tu web de forma habitual. Pero claro, si va a ser una cosa puntual, ¿para qué vas a tener un plugin instalado para una mísera entrada que contenga un vídeo de Facebook?
No tiene mucho sentido, así que si eres amante de la eficiencia, el do it yourself informático, del control hasta decir basta y huyes de plugins innecesarios, ésta es tu sección, porque vamos a ver cómo puedes hacerlo sin necesidad de instalar ningún plugin.
Incluir el SDK de Facebook para JavaScript
Como decía antes, lo primero que necesitamos (aparte de que el vídeo sea público) es insertar en la cabecera de la página un script que conecte con Facebook para solicitarle el vídeo. El script es el siguiente:
Y tiene que estar entre las etiquetas <head> y </head> de la URL en la que quieras insertar el vídeo.
Hay varias formas de hacer esto, y lo primero que leerás por ahí es que lo pegues en la cabecera de tu plantilla, y asunto resuelto. Pues bien, hacer esto es de cafres. Es lo más ineficiente que puedes hacer, puesto que entonces estarás incluyendo el código en todas y cada una de las URL de tu web, que tendrá que conectar con los servidores de Facebook en cada carga.
Así que lo que vamos a hacer es insertarlo en la cabecera mediante un hook, algo así (ojo a las contrabarras):
function ejr_sdk_facebook () {
echo '
';
}
add_action ('wp_head', 'ejr_sdk_facebook');
Eso, por supuesto, seguirá apareciendo en todas y cada una de las páginas de nuestro sitio, pero ahora tenemos la capacidad de ponerle un condicional. Por ejemplo, si vamos a incluir un vídeo de Facebook en una sola página, sólo tenemos que incluir la comprobación de si se está cargando o no esa página (mediante su ID). Si se está cargando, imprimimos el código; si no, a otra cosa, mariposa:
function ejr_sdk_facebook () {
if (get_the_ID() == 'ID')
echo '
';
}
add_action ('wp_head', 'ejr_sdk_facebook');
Sólo tienes que sustituir el ID en la segunda línea (el que está entre comillas simples) por el de la entrada/página/producto correspondiente. Si vamos a incluir vídeos en varias URL podemos optar por una solución como ésta:
function ejr_sdk_facebook () {
$ids = array (ID1, ID2, ID3);
if (in_array (get_the_ID(), $ids))
echo '
';
}
add_action ('wp_head', 'ejr_sdk_facebook');
Y sustituyendo ID1, ID2, ID3, etcétera (puedes añadir tantos como quieras, separados por comas) por los IDs de las páginas o entradas en cuestión. En cuanto al lugar donde incluir ese código, aquí te dejo un par de respuestas distintas pero igualmente válidas:
Insertar el vídeo de Facebook
Lo cierto es que, llegados a este punto, el trabajo “difícil” ya está hecho: lo único que falta ya es insertar el vídeo en el lugar de la publicación que queramos. Incluso podemos, si se trata de un producto de WooCommerce, hacerlo en una pestaña específica.
Lo único que necesitas es la URL de la publicación del vídeo en Facebook (utilizando la pestaña HTML del editor de WordPress), incluyéndola en este código:
Puedes permitir o no que se visualice a pantalla completa (data-allowfullscreen) y el ancho del vídeo (data-width). Por otra parte, puedes ajustar el resto de estilos de visualización mediante CSS, utilizando la clase fb-video, así que la libertad es plena.
¿Da un poco más de trabajo hacerlo así? Pues sí, y si vas a insertar vídeos de Facebook en tu web habitualmente no merece la pena hacerlo, mejor usa el plugin del que hablábamos más arriba. Pero si se trata de uno o dos vídeos puntuales y no es previsible que lo hagas más veces, merece la pena tomarse unos minutos extra.
