Publicaciones insertadas

Las publicaciones insertadas permiten incluir publicaciones públicas (de una página o una persona en Facebook) en el contenido de un sitio o una página web con gran facilidad. Solo pueden insertarse publicaciones públicas de páginas de Facebook y perfiles.

Generador de códigos

URL de la publicación
La anchura del píxel de la publicación (entre 350 y 750)

Ajustes

Ajuste Descripción Valor predeterminado

data-href

URL absoluta de la publicación

n/a

data-width

Ancho de la publicación. Mínimo de 350 píxeles y máximo de 750. Déjalo en blanco si quieres aplicar un ancho variable.

ancho variable

data-show-text

Se aplica a las publicaciones con foto. Establécelo en true para incluir el texto de la publicación de Facebook, si lo hay.

false

Obtener el código de una publicación

1. Ve a la publicación

Puedes obtener el código insertado directamente desde la publicación. Si se trata de una publicación pública, haz clic en el icono que aparece en la esquina superior derecha de la publicación en Facebook.

Elige Embed Post en el menú desplegable:

En el caso de publicaciones con foto, selecciona el botón Embed Post en la esquina inferior derecha:

2. Copia y pega el código

Aparecerá un cuadro de diálogo con el código necesario para insertar la publicación en él. Copia y pega este código en la página web donde deseas que aparezca el vídeo.

Para obtener más información sobre detalles técnicos, consulta la sección siguiente, 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. Obtén la URL de la publicación

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

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

"https://www.facebook.com/20531316728/posts/10154009990506729/"

2. Carga el SDK para JavaScript

Para usar el plugin de publicaciones insertadas 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>(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#xfbml=1&amp;version=v2.5";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Para obtener más información sobre cómo implementar el SDK para JavaScript, consulta Inicio rápido: SDK de Facebook para JavaScript.

3. Coloca la etiqueta de la publicación insertada

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

<div class="fb-post" data-href="{your-post-url}"></div>

4. Prueba

Tras completar estos pasos, podrás probar la publicación insertada. Cuando la integración se complete, obtendrás un código similar al siguiente:

<html>
  <title>My Website</title>
<body>
  <script src="//connect.facebook.net/en_US/sdk.js#xfbml=1&amp;version=v2.5" 
      async></script>  
  <div class="fb-post" 
      data-href="https://www.facebook.com/20531316728/posts/10154009990506729/"
      data-width="500"></div>
</body>
</html>

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

5. Personaliza

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

Obtener la URL de una publicación

Es posible que, en determinadas situaciones, el código insertado se haya creado a través de 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 en 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.

A través de la API Graph

Si deseas integrar automáticamente las publicaciones insertadas en un sitio web, probablemente añadirás las publicaciones con la API Graph. Por ejemplo, puedes usar el extremo de la API de la sección de noticias de la página y el campo permalink_url del parámetro fields.

La respuesta de tu solicitud a /{page-id}/feed?fields=permalink_url tendrá este aspecto:

{
  "data": [
    {
      "id": "1234567890_3456789012", 
      "permalink_url": "https://www.facebook.com/1234567890/posts/3456789012"
    }
  ]
}

Diseño en el ordenador

Para ajustar el ancho de las publicaciones insertadas en el ordenador, coloca el atributo data-width en la etiqueta de la publicación insertada, tal como se muestra en el ejemplo siguiente. Elige un valor entre 350 y 750 píxeles.

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

<!-- WRONG! -->
<style type="text/css">
.fb-post {
  width: 500px;
}
</style>
<div 
  class="fb-post"
  data-href="{your-post-url}">
</div>

<!-- CORRECT -->
<div 
  class="fb-post" 
  data-width="500"
  data-href="{your-post-url}">
</div>

Diseño en la web móvil

En la web móvil, las publicaciones insertadas se ajustan automáticamente al ancho del contenedor.

Wordpress

Si ya has integrado el SDK de Facebook para JavaScript en un sitio de Wordpress y deseas usar el plugin de publicaciones insertadas, solo tendrás que añadir la etiqueta fb-post a la publicación de Wordpress:

<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>

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

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

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v2.11'
    });
  }; 
  (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-post" 
  data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" 
  data-width="500"></div>

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

Preguntas frecuentes

Si usas las versiones HTML5 o XFBML, incluye el código de idioma al crear una instancia de la biblioteca.

Cuando lo hagas, ajusta el valor js.src para usar tu idioma: solo tienes que reemplazar en_US con tu código de idioma. Por ejemplo, fr_FR para francés (Francia):

// Example 1:
'https://connect.facebook.net/fr_FR/sdk.js';

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

Puedes consultar los idiomas que se admiten en el archivo FacebookLocales.xml.

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.

Las publicaciones insertadas muestran los medios que llevan adjuntos, los números de Me gusta que han alcanzado, las veces que se han compartido y los comentarios realizados. Con las publicaciones insertadas, las personas que usan un sitio web pueden ver la misma información enriquecida que se muestra en Facebook.com. También pueden seguir páginas y a autores de contenido, e indicar que les gustan directamente desde las publicaciones.