Plugin de página

Con el plugin de página puedes 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 compartirla sin salir del sitio. Puedes usar el plugin de páginas para las páginas que no estén restringidas, por ejemplo, según el país o la edad.

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

URL de la página de Facebook

Pestañas

Anchura

Altura

Usar un encabezado corto

Adaptar a la anchura del contenedor del plugin

Ocultar la foto de portada

Mostrar caras de amigos

Obtener código

Configuración

Además de los valores anteriores, también puedes cambiar los siguientes:

Configuración	Atributo HTML5	Descripción	Valor predeterminado
`href`	`data-href`	URL de la página de Facebook	Ninguno
`width`	`data-width`	Ancho del píxel del plugin. El valor mínimo es `180` y el máximo, `500`.	`340`
`height`	`data-height`	Altura del píxel del plugin. El valor mínimo es `70`.	`500`
`tabs`	`data-tabs`	Pestañas que deben representarse (es decir, `timeline`, `events`, `messages`). Usa una lista separada por comas para añadir varias pestañas (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 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`

Atributos obsoletos

El atributo data-show-posts se ha retirado. Utiliza el atributo tabs/data-tabs y el valor timeline para mostrar publicaciones de la biografía de la página.

Añadir el plugin de página a un sitio web

La configuración estándar del plugin de página solo incluye el encabezado y una foto de portada. El tamaño es perfecto para promocionar una página en espacios reducidos (por ejemplo, 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 personalizado de llamada a la acción, se mostrará en lugar de la llamada predeterminada (botón “Compartir”).

Si el ancho del plugin es inferior a 280 px, se mostrará el botón “Compartir” predeterminado para evitar anomalías de diseño en las distintas traducciones.

Pestañas de páginas: biografía, eventos y mensajes

Ahora puedes tener pestañas de biografía, eventos y mensajes en el plugin:

Pestaña de biografía: se mostrarán las publicaciones más recientes de la biografía de la página de Facebook.
Pestaña de eventos: los usuarios pueden seguir los eventos de la página y suscribirse a ellos desde el plugin.
Pestaña de mensajes: los usuarios pueden enviar mensajes a la página directamente desde tu 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 una página de Facebook, accede al menú Settings de la página. En la fila Messages, marca Permitir que las personas se pongan en contacto con mi página de forma privada mediante el botón “Mensaje” (enlace directo: https://www.facebook.com/{your-page-name}/settings/?tab=settings&section=messages&view).

Añadir varias pestañas

Usa una lista separada por comas en el atributo data-tabs para añadir varias pestañas:

<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 añadir una sola pestaña que muestre el elemento timeline, events o messages:

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

Ancho adaptable

De forma predeterminada, el plugin se adaptará al valor de width de su contenedor principal al cargar la página (180px como mínimo y 500px como máximo). Esto resulta ú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ágina, 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 plugin nunca será menor que 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 desactivar el ancho adaptable, desmarca Adaptar al ancho del contenedor del plugin y el plugin se mostrará con el ancho especificado, independientemente del contenedor principal.

Sin cambio de tamaño dinámico

El plugin de página funciona con diseños receptivos, fluidos y estáticos. Puedes usar consultas multimedia u otros métodos para establecer el valor de width del elemento principal, pero ten en cuenta lo siguiente:

El plugin determinará su valor de widthal cargar la página.
No reaccionará ante los cambios del modelo de cuadrouna vez cargada la página.

Si quieres ajustar el valor de width del plugin al cambiar el tamaño de la ventana, tienes que volver a mostrarlo 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 han indicado que les gusta, además de las fotos de sus perfiles.

Para activar esta opción, marca 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 de privacidad restringida

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

Cambiar el idioma

Para cambiar el idioma del plugin de página, carga una versión localizada del SDK de Facebook para JavaScript. Cuando lo hagas, cambia el valor de js.src para utilizar tu configuración regional. Reemplaza en_US por tu 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";

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. Para obtener más información, visita la página Localización y traducción.