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

Configuración

Configuración Descripción Valor predeterminado

data-href

La URL absoluta de la publicación.

n/a

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 utilizar el ancho fluido.

Ancho fluido

data-show-text

Se aplica a publicaciones con foto. Si se configura en true, incluye el texto de las publicaciones de Facebook, si las hay.

false

Obtener el código de una publicación

1. Ir a la publicación

Puedes obtener el código de inserción directamente desde la propia 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. Copiar y pegar 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 quieras que aparezca.

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

Agregar 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 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. Cargar el SDK para JavaScript

Para usar el plugin de las publicaciones insertadas o cualquier otro plugin social, debes agregar 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 = "//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 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 ubicación del sitio web. Reemplaza {your-post-url} con la URL de la publicación.

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

4. Pruebas

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

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 de inserción 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 de la publicación 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 agregará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 parámetro fieldspermalink_url.

La respuesta a tu solicitud de /{page-id}/feed?fields=permalink_url se verá así:

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

Diseño en la computadora

Para ajustar el ancho de las publicaciones insertadas en la computadora, 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 de la computadora.

WordPress

Si ya integraste el SDK de Facebook para JavaScript en un sitio de WordPress y deseas usar el plugin de las publicaciones insertadas, solo tendrás que agregar 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 las publicaciones insertadas, porque WordPress convertirá todos los caracteres & en #038; y se interrumpirá la actividad del plugin.

En su lugar, agrega el plugin con el código siguiente:

<script>
  window.fbAsyncInit = function() {
    FB.init({
      xfbml      : true,
      version    : 'v2.10'
    });
  }; 
  (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 = "//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, debes incluir el código de idioma cuando crees una instancia de la biblioteca.

Cuando cargues el SDK, ajusta el valor "js.src" para que utilice tu configuración regional. Simplemente sustituye "en_US" con tu configuración regional, por ejemplo, "fr_FR" para usar el idioma Francés (Francia):

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

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

El [archivo Facebook Locales XML] (http://www.facebook.com/translations/FacebookLocales.xml) contiene las configuraciones regionales que se admiten. Posiblemente, deberás ajustar el ancho del plugin social para adaptarlo a los distintos idiomas. Consulta más información en nuestra página [Localización y traducción] (/docs/internationalization).

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.