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
Configuración
| Configuración | Descripción | Valor predeterminado |
|---|---|---|
| URL absoluta de la publicación. |
|
|
|
|
| Ancho de la publicación. | Ancho variable |
| Se aplica a las publicaciones con foto. Establece el valor como |
|
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:
- Copia la URL del enlace permanente desde la barra de direcciones del navegador.
- 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 : '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>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.
Aparecerá el mensaje siguiente en lugar de la publicación insertada:
