流体像盒子？

Question

我正在建立一个响应式网站,需要为客户的Facebook粉丝页面添加一个Facebook Like-Box.like-box的开发者页面有一个用于自定义的小部件,但它不允许您以百分比形式设置宽度.

我已经搜索过,最接近的是我从2010年开始的这个页面,它指的是一个fb:fan小部件,它允许你链接自定义CSS.我试图让本教程工作但它失败并出现此错误:

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

所以,回顾一下,我需要一个Facebook Like Box,我可以将其设置为流畅的,或者允许我将自定义CSS传递给它生成的iFrame.有人能指出我正确的方向吗？

Answer 1

我今天发现了这个Gist并且完美运行: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 2

你以为不能这样做？AHA!有你,Facebook和你的邪恶的固定宽度方式:我写了一个JQuery脚本来解除你所有的邪恶!

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

它的作用是为窗口的resize事件添加一个监听器.当它调整大小时,我们检查包含Likebox的元素的宽度,生成具有正确宽度的新XFBML代码,用所述XFBML替换包含元素的子元素,然后触发Facebook API再次解析XFBML.我添加了一些超时和检查,以确保它不会做任何愚蠢的事情,只在需要时运行.

Answer 3

OP以来发生了很大的变化.

只需选择iFrame并设置宽度100%,您就FB Like Box应该做出响应.

基本上FB将此添加到iFrame:

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

Answer 4

一直在努力解决同样的问题.一个快速而简单的解决方案是使用基于iframe的Facebook Like框.

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

请注意指定的'fb-like-box'类和所有已删除的内联样式.iframe的类可能如下所示:

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

看起来iframe的src标签中定义的高度和宽度无关紧要.只需将iframe放入一些流体元素中,就像CSS网格布局中的单元格一样.

(包括来自以下网址的想法:http://updateox.com/web-design/make-facebook-comment-and-like-box-fluid-width/)