Plugin de páginas

El plugin de páginas te permite insertar y promocionar cualquier página pública de Facebook en tu sitio web con gran facilidad. Al igual que en Facebook, los visitantes pueden indicar que les gusta una página o desean compartirla sin salir del sitio. Puedes usar el plugin de páginas para cualquier página sin restricciones, por ejemplo, de país o edad.

Temas relacionados: Preguntas frecuentes sobre plugins sociales | Otros plugins sociales

URL de la página de Facebook

Pestañas

Ancho

Alto

Usar encabezado breve

Adaptar al ancho del contenedor del plugin

Ocultar foto de portada

Mostrar rostros de amigos

Obtener código

Configuración

Además de la configuración mencionada anteriormente, puedes cambiar los siguientes elementos:

Configuración	Atributo HTML5	Descripción	Valor predeterminado
`href`	`data-href`	La URL de la página de Facebook	Ninguna
`width`	`data-width`	El ancho de píxel del plugin. Los valores mínimo y máximo son `180` y `500`, respectivamente.	`340`
`height`	`data-height`	La altura del píxel del plugin. El valor mínimo es `70`.	`500`
`tabs`	`data-tabs`	Las pestañas que deben representarse, por ejemplo, `timeline`, `events` o `messages`. Para agregar varias pestañas, usa una lista de valores separados por comas, por ejemplo, `timeline, events`.	`timeline`
`hide_cover`	`data-hide-cover`	Oculta la foto de portada del encabezado.	`false`
`show_facepile`	`data-show-facepile`	Muestra las fotos del perfil cuando los amigos indican que les gusta el contenido.	`true`
`hide_cta`	`data-hide-cta`	Oculta el botón de llamada a la acción personalizado (si se encuentra disponible).	`false`
`small_header`	`data-small-header`	Usa el encabezado pequeño.	`false`
`adapt_container_width`	`data-adapt-container-width`	Intenta realizar el ajuste al ancho del contenedor.	`true`
`lazy`	`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`

Atributos obsoletos

El atributo data-show-posts quedó obsoleto. Usa los atributos tabs o data-tabs y el valor timeline para mostrar las publicaciones de la biografía de una página.

Agregar el plugin de páginas a un sitio web

La configuración estándar del plugin de páginas solo incluye el encabezado y una foto de portada. El tamaño es perfecto para promocionar una página en espacios reducidos, como la parte superior de una barra lateral.

<div class="fb-page" 
data-href="https://www.facebook.com/facebook"
data-width="380" 
data-hide-cover="false"
data-show-facepile="false"></div>

Llamada a la acción

Si tu página tiene un botón de llamada a la acción personalizado, se mostrará este en vez de la llamada a la acción predeterminada, que es el botón "Compartir".

Si el ancho del plugin es inferior a 280 píxeles, se mostrará el botón "Compartir" predeterminado para que el diseño no se desajuste en las diferentes traducciones.

Pestañas de la página: Biografía, Eventos y Mensajes

Ya puedes incluir las pestañas Biografía, Eventos y Mensajes en el plugin:

Pestaña Biografía: muestra las publicaciones más recientes de la biografía de la página de Facebook.
Pestaña Eventos: los visitantes de una página pueden seguir los eventos correspondientes y suscribirse a estos desde el plugin.
Pestaña Mensajes: permite enviar mensajes a la página directamente desde el sitio web. Para usar esta función, los visitantes deberán iniciar sesión.

Activar los mensajes en una página

Para activar los mensajes en tu página de Facebook, ve a la sección Settings. En la fila Messages, activa Permitir que las personas se pongan en contacto con mi página de forma privada con el botón "Mensaje" (enlace directo: https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view).

Agregar varias pestañas

Para agregar varias pestañas, usa una lista de valores separados por comas en el atributo data-tabs:

<div class="fb-page" 
data-tabs="timeline,events,messages"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380" 
data-hide-cover="false"></div>

Una sola pestaña

También puedes agregar una sola pestaña donde se muestren los códigos timeline, events o messages:

<div class="fb-page" 
data-tabs="events"
data-href="https://www.facebook.com/YoloBookStore"
data-width="380"></div>

Ancho adaptable

El plugin adaptará de forma predeterminada el valor de width del contenedor principal cuando se cargue la página (con un valor mínimo de 180px y un valor máximo de 500px), lo que resulta muy útil para cambiar el diseño:

<div style="width: 190px;">
<!-- Page plugin's width will be 190px -->
<div class="fb-page" data-href="{url}" data-width="420"></div>
</div>

Si el valor de width del elemento principal es mayor que el valor de width del plugin de páginas, se mantendrá el valor definido en data-width:

<div style="width: 600px;">
<!-- Page plugin's width will be 500px -->
<div class="fb-page" data-href="{url}" data-width="500"></div>
</div>

El valor mínimo aplicable del plugin es 180px:

<div style="width: 100px;">
<!-- Page plugin's width will be 180px -->
<div class="fb-page" data-href="{url}" data-width="320"></div>
</div>

Para deshabilitar el ancho adaptable, desactiva Adaptar al ancho del contenedor del plugin. El plugin se mostrará con el ancho especificado, independientemente del contenedor principal.

Sin cambio de tamaño dinámico

El plugin de páginas funciona con diseños receptivos, fluidos y estáticos. Puedes establecer el valor de width del elemento principal mediante consultas multimedia o con ayuda de otros métodos.

El plugin determinará el valor de width correspondiente cuando se cargue la página.
No reaccionará a los cambios que se realicen en el modelo de cuadros después de que se cargue la página.

Para ajustar el valor de width del plugin en función del cambio de tamaño de la ventana, deberás representar de nuevo el plugin manualmente.

Mostrar las caras de los amigos

Si lo deseas, en lugar de que aparezca solo un número, puedes indicar a quién le gusta tu página mostrando las imágenes reales de los perfiles de esas personas. Los visitantes de tu página verán el número de amigos que indicaron que les gusta, además de las fotos de sus perfiles.

Para habilitar esta opción, activa Show Friend's Faces en el configurador.

<div class="fb-page"
data-href="https://www.facebook.com/imdb" 
data-width="340"
data-hide-cover="false"
data-show-facepile="true"></div>

Páginas con restricciones de privacidad

Las páginas de Facebook con restricciones de privacidad no se pueden insertar.

Cambiar el idioma

Para cambiar el idioma del plugin de páginas, carga una versión localizada del SDK de Facebook para JavaScript. Cuando lo hagas, cambia el valor de js.src para usar tu idioma. Reemplaza en_US con la configuración regional. Por ejemplo, ru_RU para ruso (Rusia):

Ejemplo

js.src = "https://connect.facebook.net/ru_RU/sdk.js#xfbml=1&amp;version=v2.5";

El archivo Facebook Locales XML contiene las configuraciones regionales que se admiten. Quizá debas ajustar el ancho del plugin social para adaptarlo a los diferentes idiomas. Si quieres obtener más información, visita la página de localización y traducción.