Question

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

我已经搜索过，距离我最接近的是this page，它指的是一个fb：fan小部件，它允许你链接自定义CSS。我试图让本教程工作，但它失败并出现此错误：

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

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

Answer 1

我今天发现了这个要点并且完美无缺：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的if 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/）

的想法

Answer 5

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

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

Answer 6

您不能将like-box设置为像素宽度以外的任何其他值。我的建议是把它放在DIV或SPAN中，它是流动的，溢出设置为隐藏。当然，它会削减部分相同的盒子，但是由于需要流畅，这是你最好的选择。

Answer 7

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％FIX：

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

唯一的变化是将“width：100％”添加到iframe的样式属性

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

Answer 8

这是一个小小的工作，将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>");
        });

流体像盒子？

8 个答案: