Cómo centrar el nuevo “page plugin” de Facebook

Publicado en 2015/04/27 @ 2:06 pm por Lozbo

  • Última actualización: 2015/04/27 @ 2:06 pm
  • Categoría(s): Tutoriales
  • Tags:
  • Discusión: 4 comentarios. ¿Agregar uno?

Cómo centrar este plugin, que es "responsivo" (sí, entre comillas porque realmente no lo es) por default.

La anterior “caja de gustos” muere

Recientemente Facebook anunció que su plugin “Like box” morirá para el 23 de Junio (2015). El nuevo se llama “Page Plugin“.

With the release of Graph API v2.3, the Like Box plugin is deprecated.

El anterior plugin permitía asignarle el ancho que nosotros quisiéramos a su like box, además también podíamos, mediante una técnica un tanto “oscura”, hacerlo responsivo (que el ancho se adapte). Dije técnica oscura, porque este tipo de cosas debería ser responsive por default. Después de todo, ¿de quién es el plugin? ¿de Facebook, o Internet Explorer 6?

Leí en algún Blog, no recuerdo (espero encontrar el vínculo) si era de Jeffrey Zeldman, Ethan Marcotte, Chris Coyier, o algún otro de estos genios nerds de la Web, que hoy por hoy, ya no hay “Responsive” Web Design, sino simple y sencillamente “Web Design”. En pleno 2015, la Web debe ser responsiva por defecto, no podemos darnos el lujo de hacer sitios Web con un único ancho fijo.

Bueno, me estoy desviando un poco.

TL;DR (versión corta)

Mete el código que provee Facebook en un contenedor padre (div, section, o quizá incluso article), el cual debes centrar.

Contexto

Los que necesiten un recordatorio, la caja de gustos (facebook like) es esa sección que aparece en ciertas páginas que socializan un perfil (empresarial) de un negocio o proyecto.

No, no es únicamente el botoncito de “Me gusta”, sino una pequeña vista previa del perfil, y los iconitos de la gente a la que “le gusta” esa página o perfil.

El plugin nuevo se ve más o menos así, una vez implementado:

Nuevo Facebook "like box"

Detalles

Ya vimos que el viejo plugin muere. El que lo reemplaza es éste, y tiene la peculiaridad que sólo permite máximo 500 pixeles de ancho.

Esto, como se imaginarán, puede representar problemas principalmente estéticos o de diseño para un sitio. Esto es, porque quedaría por defecto alineado a la izquierda, lo cual (infinitamente subjetivo), puede no corresponder con el arte diseñado para dicho sitio.

A mi forma de ver, y sin ningún estudio científico que lo avale, creo que en la mayoría de los casos, centrar el plugin que sólo puede medir como máximo 500 pixeles, brindaría una mejora estética instantáneamente.

Bueno, el primer paso, es obtener el código del sitio del plugin, donde especificamos el perfil, ancho (en pixeles), y quizá algunas otras cosas (mostrar/ocultar cover, posts, friend’s faces…).

Después, lo que tendríamos que hacer es simplemente crear un contenedor en el que insertemos el código que nos da Facebook. A dicho contenedor, le aplicaríamos margin:0 auto;.

El HTML sería algo similar a esto:

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

Y para centrarlo, el viejo margin auto:

.contenedor-padre {margin:0 auto;}

Sencillo, ¿huh? Quién lo habría pensado. Sí, es un contenedor no-semántico extra, pero ¿a quién le importa la semántica hoy en día? Todo lo que queremos son sitios bonitos [/sarcasmo].

Responsividad del nuevo plugin

El plugin nuevo no es responsivo realmente por default, sólo que el body del iframe tiene un overflow:hidden; lo que ocasiona que cuando se reduzca el ancho del contenedor padre, lo que “sobre” (overflow), esté oculto.

Osea que se verá raro e incompleto cuando el contenedor padre (body, si no hay otro, o en su defecto el viewport) sea menor de 500 pixeles.

Valdría la pena experimentar un poco para ver si podemos conseguir una manera de hackear este código para que, en primer lugar, sea más largo que 500 pixeles, y en segundo lugar, sea realmente responsivo.

¿Alguna idea?

Comentarios

4 responses to “Cómo centrar el nuevo “page plugin” de Facebook”

  1. carlos says:

    amigo soy nuevo en esto no puedo o no entiendo bien tu explicacion yo intento poner en un post y me sale alineado a la izquierda pongo el primer codigo htlm
    y el otro codigo CSS donde pongo en WordPress en que parte va

    • Lozbo says:

      Hola Carlos, la solución que presento aquí requiere un nivel un poco más que básico de HTML, pero intentaré ayudarte. Estás usando WordPress? Cuando estás escribiendo un post, debes cambiarte a la vista de “Texto” o “Código”, y ahí pegar el código HTML. Para que funcione este plugin, realmente no necesitas CSS, pero en todo caso lo puedes pegar también en la parte de código en el editor de WordPress.

      • Lobo, tu crees que hice exactamente lo que comentas y no tuve éxito, incluso noté que facebook incrusta una etiqueta “span” en el código embedido y nada 🙁

      • Lozbo says:

        Nefatlí, me puedes mandar un link de donde presentes tu error? Asumo que tienes acceso al CSS, correcto?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Next Post

Ya viene TB

Actualizaciones sobre el estado de TecnoBato.

Read on...

Previous Post

AlterNación punto com

Odisea contra revendedores de dominios.

Read on...