responsive design - tag - ¿Líquido como caja?

viewport css responsive

Question

Estoy creando un sitio receptivo y necesito incluir un Facebook Like-Box para la página de fans de Facebook del cliente. La página de desarrollador para el cuadro similar tiene un widget para personalización, pero no le permite establecer un ancho en porcentajes.

Busqué por todas partes y lo más cercano que obtuve fue esta página de 2010, que se refiere a un widget de fb: fan que te permite vincular CSS personalizado. Intenté hacer funcionar este tutorial pero falla con este error:

<fb:fan> requires one of the "id" or "name" attributes.

Entonces, para resumir, necesito un Facebook Like Box que puedo configurar para que sea fluido, o que me permita pasar CSS personalizado al iFrame que genera. ¿Alguien capaz de apuntarme en la dirección correcta?

Answer 1

¿Pensaste que no podía hacerse? AHA! Atentamente, Facebook y tus malvados caminos de ancho fijo: ¡Escribí un script de JQuery para deshacer todo tu mal!

$(document).ready(function(){   
    var fbWidth;

    function attachFluidLikeBox(){
        // the FBML markup: WIDTH is a placeholder where we''ll insert our calculated width
        var fbml = ''<fb:like-box href="http://www.facebook.com/YOURFANPAGEORWHATEVS" width="WIDTH" show_faces="false" stream="true"></fb:like-box>'';//$(''#likeBoxTemplate'').text().toString();

        // the containing element in which the Likebox resides
        var container = $(''#likebox'');  

        // we should only redraw if the width of the container has changed
        if(fbWidth != container.width()){
            container.empty(); // we remove any previously generated markup

            fbWidth = container.width(); // store the width for later comparison

            fbml = fbml.split(''WIDTH'').join(fbWidth.toString());    // insert correct width in pixels

            container.html(fbml);   // insert the FBML inside the container

            try{
                FB.XFBML.parse();   // parses all FBML in the DOM.
            }catch(err){
                // should Facebook''s API crap out - wouldn''t be the first time
            }
        }
    }

    var resizeTimeout;

    // Resize event handler
    function onResize(){
        if(resizeTimeout){
            clearTimeout(resizeTimeout);
        }

        resizeTimeout = setTimeout(attachFluidLikeBox, 200);    // performance: we don''t want to redraw/recalculate as the user is dragging the window
    }

    // Resize listener
    $(window).resize(onResize);

    // first time we trigger the event manually
    onResize();
});

Lo que hace es que agrega un escucha al evento de cambio de tamaño de la ventana. Cuando cambia de tamaño, verificamos el ancho del elemento que contiene la mesa de luz, genera un nuevo código XFBML con el ancho correcto, reemplaza a los elementos secundarios del elemento con XFBML y luego activamos la API de Facebook para analizar nuevamente el XFBML. Agregué algunos tiempos de espera y comprobaciones para asegurarme de que no haga nada estúpido y solo se ejecute cuando sea necesario.

Answer 2

Aquí hay un pequeño trabajo alrededor que agrega el Complemento HTML5 Facebook LikeBox en el DOM con un alto o ancho de respuesta.

$(document).ready(function(){      
            var height = $(window).height();
            var width = $(window).width();

            var widget_height = parseInt((height)*0.9);
            var widget_width = parseInt((height)*0.3);
            var page_url = "http://www.facebook.com/Facebook";

            $(".fb-plugin").append("<div class=''fb-like-box'' 
                                         data-href=''"+page_url+"'' 
                                         data-width=''"+widget_width+"'' 
                                         data-height=''"+widget_height+"'' 
                                         data-colorscheme=''dark'' 
                                         data-show-faces=''true'' 
                                         data-border-color=''#222'' 
                                         data-stream=''true'' 
                                         data-header=''true''>
            </div></div>");
        });

Answer 3

El comentario anterior de Ed y Matthias sobre el uso del 100% para el iframe funcionó muy bien para mí. Aquí está mi código iframe

ORIGINAL SIN ARCHIVO:

<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&amp;
width&amp;height=290&amp;colorscheme=dark&amp;
show_faces=true&amp;header=true&amp;stream=false&amp;
show_border=true&amp;appId=XXXXXXXXXX" 
scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; height:290px;" 
allowTransparency="true"></iframe>

ACTUALIZADO CON EL 100% DEL ARREGLO:

<iframe src="//www.facebook.com/plugins/likebox.php?
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&amp;
width&amp;height=290&amp;colorscheme=dark&amp;
show_faces=true&amp;header=true&amp;stream=false&amp;
show_border=true&amp;appId=XXXXXXXXXX" 
scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; height:290px;width:100%" 
allowTransparency="true"></iframe>

El único cambio es agregar "ancho: 100%" al atributo de estilo del iframe

tenga en cuenta que el código anterior tiene "XXXXXXXXXX" en lugar de las referencias únicas

Answer 4

Encontré este Gist hoy y funciona perfectamente: https://gist.github.com/2571173

/* Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ */

/* This element holds injected scripts inside iframes that in 
some cases may stretch layouts. So, we''re just hiding it. */

#fb-root {
  display: none;
}

/* To fill the container and nothing else */

.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
  width: 100% !important;
}

Answer 5

He estado luchando con el mismo problema exacto. Una solución rápida y sencilla es utilizar el cuadro Me gusta de Facebook basado en iframe.

<iframe class="fb-like-box" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;height=500&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true" scrolling="no" frameborder="0" allowTransparency="true"></iframe>

Tenga en cuenta la clase ''fb-like-box'' asignada y todos los estilos en línea eliminados. La clase para el iframe podría ser algo como esto:

.fb-like-box {
  width: 100% !important;
  height:500px;
  border:none; 
  overflow:hidden;
}

Parece que no importa cuál es la altura y el ancho que se definen en la etiqueta src de iframe. Simplemente coloque el iframe en algún elemento fluido como una celda en un diseño de cuadrícula CSS.

(incluye ideas de: http://updateox.com/web-design/make-facebook-comment-and-like-box-fluid-width/ )

Answer 6

Mucho ha cambiado desde el OP.

Simplemente eligiendo iFrame y configurando su ancho al 100% , su FB Like Box debería ser receptivo.

Básicamente, FB agrega esto al iFrame :

style="border:none; overflow:hidden; width:100%; height:300px;". 

Answer 7

No puede establecer el cuadro de "me gusta" en nada que no sea un ancho de píxel. Mi sugerencia es colocarlo en un DIV o SPAN que sea fluido con el desbordamiento configurado a oculto. Claro, se va a cortar parte de la caja similar, pero al tener el requisito de fluido, esta es su mejor apuesta.

Answer 8

Usé la versión HTML5 de Facebook Like Box y esto es lo que funcionó para mí:

.fb-like-box,
.fb_iframe_widget span,
.fb_iframe_widget iframe {
    width:100% !important;
}