Estoy haciendo una capacidad de respuesta de sitio y la necesidad de incluir un Facebook Como la Caja para que el cliente Facebook fanpage. El página de desarrolladores de caja tiene un widget para la personalización, pero no permiten establecer una anchura en porcentajes.

He buscado de todo y el más cercano que tengo estaba esta página de 2010, que se refiere a un fb:ventilador widget que permite vincular CSS personalizado. Traté de hacer este tutorial para el trabajo, pero se produce este error:

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

Así que, para recapitular, necesito un Facebook Como la Caja que me puede configurar para ser fluido, o que me permite pasar CSS personalizado para el iFrame que genera. Cualquier persona capaz de que me apunte en la dirección correcta?

InformationsquelleAutor gillesv | 2012-02-14

8 Comentarios

  1. 38

    He encontrado 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;
    }
    • Eso en realidad no es una buena solución, ya que se pasa un ancho para el facebook iframe, por lo que puede decidir cuánto de la carga de contenido y de la pila etc. Esta solución se cosecha demasiado (dentro del iframe).
    • Lo he probado en un 7″ tablet y Android 2.3 teléfono de HTC. Funciona como se esperaba. Encaja a la perfección con Twitter Bootstrap en los modos vertical y horizontal.
  2. 13

    Pensaba que no podía ser hecho? AHA! Tiene en usted, Facebook y su malvado de ancho fijo maneras: escribí un script JQuery para deshacer todos los malos!

    $(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 se hace es que se añade un oyente a la ventana de tamaño evento. Cuando se cambia de tamaño, se compruebe la anchura de la Likebox’ elemento de contención, genera nuevas XFBML código con el ancho correcto, reemplaza el elemento de contención de los niños y niñas de dicho XFBML y activar el Facebook API para analizar la XFBML de nuevo. He añadido algunos tiempos de espera y comprueba para asegurarse de que no hacer nada estúpido y sólo se ejecuta cuando es necesario.

    • Javascript para hacer algo sensible… Sí… no puedo decir que me hace caliente en el interior.
    • El Facebook como la caja en sí mismo requiere de JavaScript, así que no veo un problema aquí.
    • Esto funciona bien, pero el borde derecho de la caja parece de corte.
  3. 10

    Ha cambiado mucho desde el OP.

    Simplemente eligiendo iFrame y la configuración de su anchura a 100%, su FB Like Box debe ser sensible.

    Básicamente FB añade esto al iFrame:

    style="border:none; overflow:hidden; width:100%; height:300px;". 
    
    • Funciona a la perfección!
  4. 8

    Estado luchando con el mismo problema. Un rápido & solución más simple es usar el iframe basado en Facebook Como la caja.

    <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>

    La nota asignada ‘fb-like-box’ de la clase y todos los quitan estilos en línea. 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 lo que la altura y el ancho que se definen en el iframe src de la etiqueta. Sólo tienes que poner el iframe en algunos líquido elemento como una célula en un CSS diseño de cuadrícula.

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

    • Perfecto! Esto funciona! el único inconveniente parece ser que las imágenes dentro de esa caja no consigue cambiar de tamaño.
  5. 3

    He utilizado la versión HTML5 de Facebook Como la Caja y aquí es lo que funcionó para mí:

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

    Que no se puede establecer como caja a otra cosa que un píxel de ancho. Mi sugerencia es que se sitúe en un DIV o SPAN, que es el líquido con el desbordamiento ocultos. Seguro, va a recortar parte de la como-box, pero al tener el requisito de líquido, esta es su mejor apuesta.

    • Lo siento, pero el recorte sería inaceptable. Voy a buscar un javascript solución.
    • Si el cultivo es inaceptable, entonces no hay solución. Javascript no se puede hablar el facebook del código iframe. Si el javascript podría, entonces eso sería un ENORME agujero de seguridad que podría ser revisados por Facebook en cuestión de segundos!
    • Soy muy consciente de la cruz-dominio de javascript limitaciones. Yo estaba pensando lo largo de las líneas de forma dinámica quitar y volver a agregar la Caja cuando la ventana del navegador los cambios de tamaños.
    • Oh, wow. Eso no suena divertido, pero puede que funcione 🙂
  7. 2

    El comentario de arriba de la Ed y Matías sobre el uso de 100% para el iframe trabajado muy bien para mí. Aquí está mi código iframe

    ORIGINAL SIN REVISIÓN:

    <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% DE REVISIÓN:

    <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 la adición de «width:100%» para el atributo de estilo de el iframe

    nota de que el código de arriba tiene «XXXXXXXXXX» en lugar de la única referencias

  8. 1

    Aquí una pequeña evitar que se anexa el HTML5 Facebook LikeBox Plugin en el DOM con una respuesta de altura o anchura.

    $(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>");
            });
    

Dejar respuesta

Please enter your comment!
Please enter your name here