Plugin de página

El plugin de página permite insertar y promocionar cualquier página de Facebook en un 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.

Ajustes

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

Ajuste Atributo HTML5 Descripción Valor predeterminado

href

data-href

La URL de la página de Facebook

Ninguno

width

data-width

El ancho del 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 añadir 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 personalizada (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


Atributos obsoletos

  • El atributo data-show-posts está obsoleto. Usa los atributos tabs o data-tabs, y el valor timeline para mostrar las publicaciones de la biografía de una 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 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 de esta y suscribirse a ellos 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 de la página. En la fila Messages, activa Permitir que la gente se ponga 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).

Añadir varias pestañas

Para añadir 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 añadir una sola pestaña (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 adapta de forma predeterminada el valor width del contenedor principal cuando se carga la página (con los valores mínimo y máximo de 180px y 500px respectivamente), 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 width del elemento principal es mayor que el valor 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 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 representará 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 establecer el valor width del elemento principal mediante consultas multimedia o con ayuda de otros métodos. En cualquier caso:

  • El plugin determinará su valor widthcuando se cargue la página.
  • No reaccionará a los cambios que se realicen en el modelo de cuadrostras cargarse la página.

Para ajustar el valor 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 han indicado 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 de privacidad restringida

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

Ajustes de idioma

Para ajustar el idioma del plugin de página, carga una versión localizada del SDK de Facebook para JavaScript. Cuando lo hagas, ajusta el valor js.src para usar tu idioma: solo tienes que reemplazar en_US por tu código de idioma. Por ejemplo, ru_RU para ruso (Rusia).

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

Puedes consultar los idiomas 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.