Plugins sociales

Publicaciones insertadas

Las publicaciones insertadas son un método sencillo de incluir entradas públicas (de una página o una persona en Facebook) en el contenido de un sitio o una página web. Solo pueden insertarse entradas públicas de perfiles y páginas de Facebook.

Generador de códigos

URL de la publicación
Ancho en píxeles de la publicación (entre 350 y 750)
Obtener código

Configuración

Configuración Descripción Valor predeterminado

data-href

La URL absoluta de la publicación.

n/a

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 de la publicación. 350 píxeles como mínimo; 750 píxeles como máximo. Se debe dejar vacío para usar ancho fluido.

fluid width

data-show-text

Se aplica a una publicación con foto. Se debe fijar en true para incluir el texto de la publicación de Facebook, si existe.

false

Obtener tu código de una publicación

1. Acceder a tu publicación

Puedes obtener el código de inserción directamente de la publicación. Si es pública, haz clic en el icono que aparece en la esquina superior derecha en Facebook.

Elige Insertar publicación en el menú desplegable:

Para publicaciones con fotos, selecciona el botón Insertar publicación en la parte inferior derecha:

2. Copiar y pegar el código

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

Primero, debes obtener la URL de una publicación que desees compartir. La publicación debe ser de carácter público, lo que se indica con el icono gris del mundo junto a la hora en que esta se realizó:

Para pruebas, puedes usar esta URL de ejemplo:

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

2. Cargar el SDK para JavaScript

Para usar al plugin de publicaciones insertadas o cualquier otro plugin social, debes agregar el SDK de Facebook para JavaScript a tu 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 de publicaciones insertadas

A continuación, coloca la etiqueta de publicaciones insertadas en cualquier punto del sitio web. Reemplaza {your-post-url} por la URL de tus publicaciones.

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

4. Pruebas

Una vez que completes estos pasos, podrás probar las publicaciones insertadas. Una integración completada tendrá el siguiente aspecto:

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

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

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 de forma automática publicaciones insertadas a tu sitio web, probablemente uses la API Graph para agregar publicaciones. Por ejemplo, puedes usar el punto de conexión de la API de feed de página y el fields parámetro permalink_url.

En respuesta a tu solicitud de /{page-id}/feed?fields=permalink_url, recibirás algo parecido a lo siguiente:

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

Diseño en computadoras

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

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-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 web móvil

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

WordPress

Si ya usas el SDK de Facebook para JavaScript en tu sitio WordPress, puedes aplicar el plugin de publicaciones insertadas simplemente agregando la etiqueta fb-post a tu 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 a través del fragmento copiar y pegar, que puedes obtener de cada publicación de Facebook, es muy probable que el plugin de publicaciones insertadas no se represente debido a que WordPress convertirá todos los caracteres & en #038; y lo dañará.

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

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v21.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>

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

Preguntas frecuentes

Si usas las versiones HTML5 o XFBML, deberás incluir el código de idioma cuando crees una instancia de la biblioteca.

Cuando lo hagas, cambia el valor de js.src para usar la configuración regional. Reemplaza en_US con la 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";

El archivo Facebook Locales XML contiene las configuraciones regionales que se admiten.

Quizá debas ajustar el ancho del plugin social para adaptarlo a las distintas configuraciones regionales. Obtén más información en nuestra página Localización y traducción.

Enlace permanente

Las publicaciones insertadas muestran los medios que llevan adjuntos, los números de Me gusta que alcanzaron, las veces que se compartieron 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 propias publicaciones.

Enlace permanente

Aparecerá el mensaje siguiente en lugar de la publicación insertada:

Enlace permanente