Plugins sociales

Vídeo y reproductor de vídeo en directo insertados

El reproductor de vídeo insertado permite añadir con facilidad vídeos de Facebook, incluidos los vídeos en directo, a un sitio web. Puedes utilizar como origen de vídeo o vídeo en directo cualquier publicación con vídeo pública de una persona o una página.

Configurador del reproductor de vídeo insertadoEjemplo de códigoConfiguraciónAñadir código manualmente

Paso a paso

1. Elegir una URL o una página

Elige la URL del vídeo 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 vídeo insertado.

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

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

Configurador del reproductor de vídeo insertado

URL del vídeo
Anchura en píxeles del vídeo
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 vídeo. 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 vídeo insertado. También puedes modificar la configuración siguiente:

Configuración Descripción Valor predeterminado

data-href

URL absoluta del vídeo.

n/a

data-allowfullscreen

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

false

data-autoplay

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

false

data-lazy

true significa que se utilizará el mecanismo de carga diferida del navegador al establecer el atributo iframe en loading="lazy". Como resultado, el navegador no mostrará el plugin si no está cerca del área de visualización y podría no verse nunca. Puede ser true o false (valor predeterminado).

false

data-width

Ancho del contenedor del vídeo. 220px como mínimo.

auto

data-show-text

Establece el valor como true para incluir el texto de la publicación de Facebook asociada al vídeo, en caso de haberlo. Solo disponible con sitios web para ordenadores.

false

data-show-captions

Establece el valor como true para mostrar transcripciones (en caso de que las haya) de forma predeterminada. Las transcripciones solo están disponibles para ordenadores.

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 vídeo

1. Navegar a la publicación con vídeo

Si publicas un vídeo público (consulta las preguntas frecuentes), puedes obtener el código de inserción directamente desde la publicación con vídeo.

Elige Embed Video en el menú de opciones:

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

Solo para páginas

Al publicar un vídeo público en una página (consulta las 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

Se mostrará un cuadro de diálogo con el código para insertar tu publicación con vídeo. Copia y pega este código en la página web en el lugar donde quieras que aparezca.

Para obtener más información sobre detalles técnicos, consulta la sección Añadir código manualmente.

Añadir código manualmente

Puedes insertar el código con el generador de códigos y también manualmente.

1. Obtener la URL de la publicación con vídeo

En primer lugar, debes obtener la URL de una publicación con vídeo que quieras compartir. La publicación con vídeo debe ser pública (consulta las preguntas frecuentes), lo que se indica con el icono del mundo gris que se muestra junto a la hora de publicación correspondiente:

A modo de prueba, puedes utilizar esta URL de ejemplo:

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

2. Cargar el SDK para JavaScript

Para utilizar el plugin del reproductor de vídeo insertado o cualquier otro plugin social, debes añadir el SDK de Facebook para JavaScript al sitio web. Solo tendrás que cargar el SDK una vez en cada página, preferentemente tras la etiqueta de apertura <body>:

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

A fin de obtener más información sobre cómo implementar el SDK para JavaScript, consulta SDK para JavaScript: inicio rápido.

3. Colocar la etiqueta del reproductor de vídeo insertado

A continuación, coloca la etiqueta del reproductor de vídeo insertado en cualquier lugar del sitio web. Reemplaza {your-video-post-url} por la URL de la publicación.

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

4. Probar

Después de realizar estos pasos, puedes probar el reproductor de vídeo insertado. Cuando la integración se complete, tendrás un código similar al siguiente:

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

En la captura de pantalla siguiente se muestra el resultado del ejemplo de prueba.

5. Personalizar

Sigue las instrucciones que se incluyen más adelante en esta página para ajustar el tamaño, el idioma y otras configuraciones.

Obtener la URL de una publicación con vídeo

Es posible que, en determinadas situaciones, el código de inserción se haya creado a través de un CMS y solo necesites la URL de la publicación sin procesar. Puedes obtener la URL de una publicación de dos formas:

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

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

Mediante la API Graph

Si quieres integrar automáticamente los reproductores de vídeo insertado en un sitio web, probablemente uses la API Graph para añadir los vídeos. Por ejemplo, puedes utilizar el extremo de la API de vídeos de página, que te enviará una respuesta a tu solicitud a /{page-id}/videos con el formato siguiente (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 vídeo:

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

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

No utilices la propiedad embed_html para insertar vídeos. Para obtener más información sobre este tema, consulta la sección de preguntas frecuentes.

Diseño en el ordenador

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

No uses etiquetas de estilo CSS para ajustar el tamaño de un plugin, ya que 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 quieres permitir que el vídeo se reproduzca en modo de pantalla completa, añade la propiedad data-allowfullscreen="true".

Diseño en la web móvil

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

Cambiar el idioma

Para cambiar el idioma del plugin del reproductor de vídeo insertado, carga una versión localizada del SDK de Facebook para JavaScript. Cuando lo hagas, cambia el valor de src para utilizar tu configuración regional. Reemplaza en_US por tu configuración regional. Por ejemplo, fr_FR para francés (Francia):

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

Posiblemente, deberás ajustar el ancho del plugin social para adaptarlo a los distintos idiomas. Para obtener más información, visita la página Localización y traducción.

WordPress

Si ya usas el SDK de Facebook para JavaScript en un sitio de WordPress y quieres utilizar el plugin del reproductor de vídeo insertado, solo tienes que añadir 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 vídeo copiando y pegando el fragmento de código (que puedes obtener en las distintas publicaciones con vídeo), lo más probable es que no se muestre el plugin del reproductor de vídeo insertado, ya que WordPress convertirá todos los caracteres & en #038; y se interrumpirá la actividad del reproductor.

En su lugar, añade el plugin con el código siguiente:

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

Próximamente se publicará una nueva integración con WordPress fácil de usar.

Preguntas frecuentes

¿Puedo utilizar la propiedad embed_html del extremo video de la API Graph?

No, no debes utilizar la propiedad embed_html. En su lugar, utiliza el plugin del reproductor de vídeo insertado.

Información sobre la propiedad embed_html:

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

Este valor no debe confundirse con el plugin del reproductor de vídeo insertado. Te recomendamos no volver a utilizar esta propiedad. En su lugar, utiliza el plugin del reproductor de vídeo insertado.

Si utilizas el valor de la propiedad embed_html, el reproductor de vídeo:

  • No funcionará en tabletas ni dispositivos móviles.
  • No contendrá información adicional, como las reproducciones, el título del vídeo, etc.

Ejemplo de la propiedad embed_html (obsoleta):

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