logo标签列表

像流体一样的盒子？

responsive-designfacebook-likebox
19
我正在制作一个响应式网站，并需要在客户的Facebook粉丝页面中包含一个Facebook Like-Box。 Like-Box的开发者页面 提供了一个自定义小部件，但它不允许您设置百分比宽度。
我已经搜索过了，最接近的结果是来自2010年的这个页面，该页面提到了一个名为 fb:fan 的小部件，它允许您链接自定义CSS。我尝试让这个教程起作用，但出现了以下错误：
<fb:fan> requires one of the "id" or "name" attributes.

所以，简而言之，我需要一个Facebook Like Box，可以设置为流动的，或者允许我向它生成的iFrame传递自定义CSS。有人能指点我方向吗？

8个回答
38

我今天发现了这个代码片段，它完美地工作： 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;
}
这其实不是一个好的解决方案，因为你传递了一个宽度给 Facebook 的 iframe，所以它可以决定加载多少内容并进行堆叠等操作。这个解决方案也会裁剪内容（在 iframe 内部）。 - Rudie
我已在一台7英寸平板电脑和一部普通的2.3安卓HTC手机上进行了测试。按预期工作。在纵向和横向模式下，与Twitter Bootstrap完美匹配。 - Ikon
13
你以为这不可能做到吗？哈！来吧，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。我添加了一些超时和检查，以确保它不会做任何愚蠢的事情，并且只在需要时运行。
1
JavaScript 让某些东西具有响应性... 是的... 不能说这让我感到温暖。 - Rudie
4
Facebook 点赞框本身需要 JavaScript，所以我认为这里没有问题。 - Maxim Zubarev
这个很好用，但是盒子的右边框似乎被截断了。 - coneybeare
10

原帖发布后已有很多变化。

只需选择iFrame并将宽度设置为100%，您的FB Like Box即可具备响应式设计。

基本上，FB会将此添加到iFrame中：

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

我一直在与完全相同的问题作斗争。一个快速且简单的解决方案是使用基于iframe的Facebook Like Box。

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

太完美了！这个可行！唯一的缺点似乎是在该框中的图像不会被重新调整大小。 - cvbattum
3
我使用的是HTML5版本的Facebook点赞框，以下是我成功的做法：
.fb-like-box,
.fb_iframe_widget span,
.fb_iframe_widget iframe {
    width:100% !important;
}
2

以下是一个小技巧，可以将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>");
        });
2

您无法将“like-box”设置为除像素宽度以外的任何内容。 我的建议是将其放置在具有流动性且溢出设置为隐藏的DIV或SPAN中。 当然，这将裁剪掉“like-box”的一部分，但通过要求流动性，这是您最好的选择。

抱歉，但裁剪是不可接受的。我会寻找JavaScript解决方案。 - gillesv
2
如果裁剪是不可接受的，那么就没有解决方案。你的JavaScript无法与Facebook的iframe代码通信。如果你的JavaScript可以这样做，那将是一个巨大的安全漏洞，Facebook会在几秒钟内修补它！ - DMCS
我非常清楚跨域JavaScript的限制。我考虑的是当浏览器窗口大小改变时，动态地删除和重新添加Like Box。 - gillesv
2

Ed和Matthias上面的评论对于我的iframe使用100％非常有效。这是我的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的style属性中添加"width:100%"。请注意，上面的代码中用"XXXXXXXXXX"代替了唯一的引用。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接