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?