responsive-design - 流体状的盒子？

Question

我正在制作一个响应式网站，需要为客户的 Facebook 粉丝页面添加一个 Facebook Like-Box。类似框的开发人员页面有一个自定义小部件，但它不允许您以百分比设置宽度。

我四处搜索，最接近的是2010 年的这个页面，它指的是一个 fb:fan 小部件，它允许您链接自定义 CSS。我试图让本教程工作，但失败并出现以下错误：

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

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

score 38 · Accepted Answer

我今天找到了这个 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;
}

score 13 · Accepted Answer

你以为做不到？啊哈！面对你，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();
});

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

score 10 · Accepted Answer

自 OP 以来发生了很大变化。

通过简单地选择iFrame并将您的宽度设置为100%，您FB Like Box应该是响应式的。

基本上FB将其添加到iFrame：

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

score 8 · Accepted Answer

一直在努力解决完全相同的问题。一个快速简单的解决方案是使用基于 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/ 的想法）

score 3 · Accepted Answer

我使用了 Facebook Like Box 的 HTML5 版本，这对我有用：

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

score 2 · Accepted Answer

Ed 和 Matthias 上面关于使用 100% 的 iframe 的评论对我来说非常有用。这是我的 iframe 代码

原始无修正：

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

更新 100% 修复：

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

唯一的变化是在 iframe 的样式属性中添加了“width:100%”

请注意，上面的代码用“XXXXXXXXXX”代替了唯一的引用

score 2 · Accepted Answer

您不能将like-box 设置为像素宽度以外的任何值。我的建议是将它放在一个流动的 DIV 或 SPAN 中，溢出设置为隐藏。当然，它会裁剪掉部分类似框，但由于需要流体，这是你最好的选择。

score 2 · Accepted Answer

这是一个小解决方法，它将 HTML5 Facebook LikeBox 插件附加到具有响应高度或宽度的 DOM 中。

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

responsive-design - 流体状的盒子？

8 回答 8

Related

Reference