Жидкость как коробка?

Ответ 1

Ты думал, что это невозможно? АГА! У вас есть, Facebook и ваши злые пути фиксированной ширины: я написал JQuery script, чтобы отменить все ваши зло!

$(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 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, а затем запускаем API-интерфейс Facebook для повторного анализа XFBML. Я добавил несколько тайм-аутов и проверок, чтобы убедиться, что он не делает ничего глупого и работает только тогда, когда ему нужно.

Ответ 2

Я нашел этот 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;
}

Ответ 3

Многое изменилось после OP.

Просто выбрав iFrame и установив ширину в 100%, ваш FB Like Box должен реагировать.

В основном FB добавляет это к iFrame:

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

Ответ 4

Борясь с той же проблемой. Быстрое и простое решение - использовать фреймворк на основе iframe на основе Facebook.

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

Ответ 5

Я использовал HTML5 версию Facebook Like Box, и вот что сработало для меня:

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

Ответ 6

Вы не можете установить подобное поле для чего-либо, кроме ширины пикселя. Мое предложение состоит в том, чтобы поместить его в DIV или SPAN, который является текучим с переполнением, установленным в скрытое. Конечно, он собирается обрезать часть подобной коробки, но, имея требование жидкости, это ваш лучший выбор.

Ответ 7

Комментарий выше от Эд и Маттиаса об использовании 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>

Единственное изменение заключается в добавлении "width: 100%" в атрибут style iframe

обратите внимание, что вышеприведенный код имеет "XXXXXXXXXX" вместо уникальных ссылок

Ответ 8

Здесь небольшая работа вокруг, которая добавляет HTML5 Facebook LikeBox Plugin в 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>");
        });