Plugins sociales

Reproductor de video y video en vivo insertado

El reproductor de video insertado te permite agregar videos de Facebook y videos en vivo de Facebook a tu sitio web muy fácilmente. Puedes usar cualquier publicación con video pública de una página o persona como origen de video o video en vivo.

Configurador del reproductor de video insertadoEjemplo de códigoConfiguraciónAgregar código manualmente

Paso a paso

1. Elegir una URL o página

Elige la URL del video de Facebook que quieres insertar.

2. Configurador de código

Pega la URL en el configurador de código y haz clic en el botón "Obtener código" para generar el código del reproductor de video insertado.

3. Copiar y pegar el fragmento de código HTML

Copia y pega el fragmento de código en el texto HTML del sitio web de destino.

Configurador del reproductor de video insertado

URL del video
Ancho en píxeles del video
Obtener código

Ejemplo de código completo

Copia y pega el ejemplo de código en el sitio web. Ajusta el valor data-href a la URL del video. Puedes controlar el tamaño del reproductor con el atributo 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>

Configuración

El configurador anterior no incluye todas las configuraciones posibles del reproductor de video insertado. También puedes modificar las opciones siguientes:

Configuración Descripción Valor predeterminado

data-href

La URL absoluta del video.

n/a

data-allowfullscreen

Permite la reproducción del video en modo de pantalla completa. Puede ser false o true.

false

data-autoplay

Inicia automáticamente la reproducción del video cuando se carga la página. El video se reproducirá sin sonido (silenciado). El sonido puede activarse con los controles del reproductor de video. Esta configuración no se aplica a los dispositivos móviles. Puede ser false o true.

false

data-lazy

true significa que usas el mecanismo de carga diferida del navegador mediante la configuración del atributo loading="lazy" del iframe. Como consecuencia, el navegador no muestra el plugin si no está cerca del visor, y quizás nunca se vea. Puede ser true o false (predeterminado).

false

data-width

El ancho del contenedor de video. Mínimo de 220px.

auto

data-show-text

Si se configura en true, se incluye el texto de las publicaciones de Facebook asociadas con el video, si las hay. Solo disponible para sitios web para computadoras

false

data-show-captions

Si se configura en true, se muestran los subtítulos (si los hay) de manera predeterminada. Los subtítulos solo se muestran en la computadora.

false

Configuración de ejemplo

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

Obtener el código de una publicación con video

1. Ir a la publicación con video

Si publicas un video público (ver preguntas frecuentes), puedes obtener el código de inserción directamente desde la propia publicación con video.

Elige Embed Video en el menú "Opciones":

O bien, si estás viendo el video en pantalla completa, selecciona el botón Embed Video en la esquina inferior derecha:

Solo para páginas

Si publicas un video público en una página (ver preguntas frecuentes), puedes obtener el código de inserción directamente desde la biografía. Haz clic en el icono que aparece en la esquina superior derecha de la publicación en Facebook.

Elige Embed Video en el menú desplegable: (solo para páginas)

2. Copiar y pegar el código

Aparecerá un cuadro de diálogo con el código necesario para insertar la publicación con video. Copia este código y pégalo en tu página web en la ubicación en la que deseas que aparezca.

Para acceder a detalles técnicos, consulta la secciónAgregar código manualmente.

Agregar código manualmente

Aparte de usar el generador de códigos, también puedes insertar el código manualmente.

1. Obtener la URL de la publicación con video

En primer lugar, debes obtener la URL de la publicación con video que deseas compartir. Esta publicación con video debe ser pública (ver preguntas frecuentes), lo que se indica con el icono del mundo gris que se muestra junto a la hora de publicación correspondiente:

Para pruebas, puedes usar esta URL de ejemplo:

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

2. Cargar el SDK para JavaScript

Para usar el plugin del reproductor de video insertado o cualquier otro plugin social, debes agregar el SDK de Facebook para JavaScript al sitio web. Solo debes cargar el SDK una vez en una página; lo ideal es hacerlo después de la etiqueta <body> de apertura:

<div id="fb-root"></div>
<script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></script>

Puedes hallar más ayuda acerca de la implementación del SDK para JavaScript en el artículo de inicio rápido sobre el SDK para JavaScript.

3. Colocar la etiqueta del reproductor de video insertado

A continuación, coloca la etiqueta del reproductor de video insertado en cualquier ubicación del sitio web. Reemplaza {your-video-post-url} con la URL de la publicación.

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

4. Pruebas

Tras completar estos pasos, podrás probar el reproductor de video insertado. Una integración completada tendrá el siguiente aspecto:

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

El resultado de este ejemplo de prueba se muestra a continuación en la captura de pantalla.

5. Personalización

Sigue las instrucciones del resto de esta página para ajustar el tamaño, el idioma y otras configuraciones.

Obtener la URL de una publicación con video

Puede haber situaciones en las que tu código de inserción se cree a través de un CMS y solo necesites la URL de la publicación sin procesar. Existen dos maneras de obtener la URL de una publicación:

  1. Copia la URL del enlace permanente de la barra de direcciones del navegador.
  2. Haz clic con el botón derecho sobre la hora de publicación y copia la dirección del enlace.

Ambos métodos se destacan con rojo en la captura de pantalla siguiente.

A través de la API Graph

Si deseas integrar automáticamente los reproductores de video insertados en un sitio web, probablemente agregarás los videos con la API Graph. Por ejemplo, puedes usar el extremo de la API de videos de página, que enviará la respuesta a tu solicitud a /{page-id}/videos, con el siguiente formato (abreviado):

{
  "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": []
    }
   ]
}

Para obtener la URL del video:

Usa el valor id para crear una URL con la siguiente estructura:

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

No uses la propiedad embed_html para videos insertados. Para obtener más información sobre este tema, consulta la sección de preguntas frecuentes.

Diseño en computadoras

Para ajustar el ancho del reproductor de video insertado en la computadora, coloca el atributo data-width en la etiqueta del reproductor, tal como se muestra en el siguiente ejemplo. El valor mínimo debe ser 220. No se aplica ningún límite al valor máximo porque el reproductor nunca será mayor que su correspondiente elemento principal.

No uses etiquetas de estilo CSS para ajustar el tamaño de un plugin. Pueden generar errores de visualización.

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

Pantalla completa

Si deseas permitir que el video se reproduzca en modo de pantalla completa, agrega la propiedad data-allowfullscreen="true".

Diseño en web móvil

En la web móvil, el reproductor de video insertado se ajusta automáticamente al ancho interior de su correspondiente elemento principal.

Cambiar el idioma

Para cambiar el idioma del plugin del reproductor de video insertado, carga una versión localizada del SDK de Facebook para JavaScript. Cuando lo hagas, cambia el valor de src para usar la configuración regional. Reemplaza en_US con tu idioma. Por ejemplo, reemplázalo con fr_FR para usar el francés (Francia):

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

Quizá debas ajustar el ancho del plugin social para adaptarlo a los diferentes idiomas. Si quieres obtener más información, visita la página de localización y traducción.

WordPress

Si ya integraste el SDK de Facebook para JavaScript en un sitio de Wordpress y deseas usar el plugin del reproductor de video insertado, solo tendrás que agregar la etiqueta fb-video a la publicación:

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

Si no usas el SDK de Facebook para JavaScript e insertas un video con el fragmento de código "copy&paste" (que puedes obtener en las distintas publicaciones con video), lo más probable es que no se muestre el plugin del reproductor de video insertado, porque Wordpress convertirá todos los caracteres & en #038; y se interrumpirá la actividad del reproductor.

Como alternativa, usa el siguiente código para agregar el plugin:

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

Se lanzará una nueva integración sencilla de WordPress en el futuro cercano.

Preguntas frecuentes

¿Puedo usar la propiedad de video de la API Graph embed_html?

No, no debes usar la propiedad embed_html. En su lugar, usa el plugin del reproductor de video insertado.

Acerca de la propiedad embed_html:

El extremo de API Graph video proporcionará la propiedad embed_html. Su valor contendrá un elemento HTML que no se puede insertar en una página web para reproducir el video solicitado.

Este valor no debe confundirse con el plugin del reproductor de video insertado. Te recomendamos no volver a usar esta propiedad en el futuro. En su lugar, usa el plugin del reproductor de video insertado.

Si usas el valor de la propiedad embed_html, el reproductor de video:

  • No funcionará en tabletas y dispositivos móviles.
  • No mostrará información adicional, como las reproducciones, el título del video, etc.

Ejemplo de la propiedad embed_html (obsoleto):

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