Publicaciones insertadas

Las páginas o los usuarios de Facebook pueden utilizar las publicaciones insertadas para incluir publicaciones públicas en el contenido de una página o sitio web fácilmente. Solo se pueden insertar publicaciones públicas de perfiles y páginas de Facebook.

Generador de códigos

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

Configuración

Configuración Descripción Valor predeterminado

data-href

URL absoluta de la publicación.

n/a

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 de la publicación. 350 píxeles como mínimo y 750 píxeles como máximo. Deja el valor en blanco para usar un ancho variable.

Ancho variable

data-show-text

Se aplica a las publicaciones con foto. Establece el valor como true para incluir el texto de la publicación de Facebook, en caso de haberlo.

false

Obtener el código de una publicación

1. Navegar a la publicación

Puedes obtener el código de inserción directamente desde la publicación. Si la publicación es 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 las publicaciones con fotos, selecciona el botón Embed Post en la parte inferior derecha:

2. Copiar y pegar el código

Se mostrará un cuadro de diálogo con el código para insertar tu publicación. 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

En primer lugar, debes obtener la URL de una publicación que quieras compartir. La publicación debe ser pública, 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/20531316728/posts/10154009990506729/"

2. Cargar el SDK para JavaScript

Para utilizar 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 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 de la publicación insertada

A continuación, coloca la etiqueta de la publicación insertada en cualquier lugar 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. Probar

Después de realizar estos pasos, puedes probar la publicación insertada. Cuando la integración se complete, tendrás un código similar al siguiente:

<html>
  <title>My Website</title>
<body>
  <script async defer src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.2"></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. 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

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 deseas integrar automáticamente las publicaciones insertadas en un sitio web, probablemente uses la API Graph para añadir las publicaciones. Por ejemplo, puedes usar el extremo de la API de noticias de páginas y el valor de permalink_url del parámetro fields.

La respuesta a la solicitud a /{page-id}/feed?fields=permalink_url tendrá un aspecto similar al siguiente:

{
  "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, ya que 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 usas el SDK de Facebook para JavaScript en un sitio de WordPress y quieres utilizar el plugin de publicaciones insertadas, solo tienes 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 copiando y pegando el fragmento de código (que puedes obtener en las distintas publicaciones de Facebook), lo más probable es que no se muestre el plugin de publicaciones insertadas, ya que 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    : 'v15.0'
    });
  }; 
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></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 fácil de usar.

Preguntas frecuentes

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

Cuando lo hagas, cambia el valor de js.src para usar tu configuración regional. Solo tienes que reemplazar en_US por tu configuración regional. 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 las configuraciones regionales que se admiten en el archivo FacebookLocales.xml.

Posiblemente, deberás ajustar el ancho del plugin social para adaptarlo a los distintos idiomas. Puedes obtener más información en nuestra 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.