Sin duda te habrás dado cuenta de que el antiguo plugin Página Facebook, que genera un box en las páginas web para conseguir nuevos fans (me gusta), ha sido actualizado a una nueva versión. Si aún no has modificado manualmente tu código no te preocupes: Facebook ha migrado automáticamente todos los boxes de la versión antigua a la nueva.

La nueva gráfica del plugin es más limpia, resta importancia al logo de Facebook y da prioridad al brand de la página personal/empresarial.

Con la nueva versión puedes hacer que se visualice la cover que has elegido para tu página Facebook. Además, como habrás notado, en Facebook tienes la posibilidad de introducir un pulsante de Llamada a la Acción para llevar al usuario a una página de compra online, para la inscripción a una newsletter, a un formulario de contacto… Con el nuevo plugin puedes elegir si quieres que tu público visualice este pulsante.

Otras diferencias que puedes identificar son por ejemplo la posibilidad de presentar las imágenes de las personas en una sola fila. Por qué es importante este cambio? Resulta estratégico puesto que Facebook muestra sólo los amigos en común que ya han hecho clic en “Me Gusta”, por lo que cuando un usuario llega a una página y ve muchos Like de personas cercanas, la probabilidad de que pulse “Me Gusta” se incrementa de forma muy importante.

Personalizar el Plugin Página Facebook es muy sencillo. Encuentras una guía completa en la página oficial. Siguendo estas indicaciones puedes elegir si utilizar un box complejo con cover image, posts, llamadas a la acción o simplemente el logo de tu empresa y el button de “Me Gusta”.

Si estos elementos de personalización no son suficientes para ti, no te preocupes, las posiilidades son infinitas! Todo lo que deberás hacer es utilizar la clase .fb-page de tu hoja de estilo y reescribirla (si empiezas desde cero con la programación css, te aconsejamos este curso).

Éste es un ejemplo que he creado para Prima Posizione (ver ejemplo online).

.fb-page, .fb-page:before, .fb-page:after {
border: 1px solid #ff5500;
}

.fb-page:before, .fb-page:after {
z-index: -1;
position: absolute;
content: "";
bottom: 25px;
left: 10px;
width: 50%;
top: 80%;
max-width:300px;
background: #ff5500;
-webkit-box-shadow: 0 35px 20px #ff5500;
-moz-box-shadow: 0 35px 20px #ff5500;
box-shadow: 0 35px 20px #ff5500;
-webkit-transform: rotate(-8deg);
-moz-transform: rotate(-8deg);
-o-transform: rotate(-8deg);
-ms-transform: rotate(-8deg);
transform: rotate(-8deg);
}

.fb-page:after {
-webkit-transform: rotate(8deg);
-moz-transform: rotate(8deg);
-o-transform: rotate(8deg);
-ms-transform: rotate(8deg);
transform: rotate(8deg);
right: 10px;
left: auto;
}

Si necesitas algún consejo deja un comentario, estaré encantado de contestarte!