Why does the Like-Box social plugin ignore data-width attribute lower than 292?

Question

I have on my website google like box for our facebook page. I use this setting

<div class="fb-like-box" data-href="http://www.facebook.com/pages/valka_cz/120204797463" 
data-width="250" data-height="350" data-show-faces="true" 
data-stream="false" data-header="false">

it was working ok for months, but today, the FB box is much wider, flowing over to rest of the page. Chrome says the width of the box is 292, it ignores the 250 width setting from the data-width attribute. I tried to regenerate the code from Facebook, got the same, so there is nothing changed in the syntax.

When I turn the faces off, the width of the box is ok, 250. But I want the faces there ... :)

Any ideas what might be wrong ?

Answer 1

Yep, it was a big surprise this morning but... The minimal width for Facebook Likebox now is 292px... http://developers.facebook.com/docs/reference/plugins/like-box/ It's always a pleasure...

Answer 2

Got the same problem today. Thank you facebook. The HTML5 version of the like box now enforces the minimum width of 292px, but the iframe version of like box still does respond to manually adjusting the width in the code.

To replace your HTML5 like box with an iframe one, go and regenerate your likebox code at https://developers.facebook.com/docs/reference/plugins/like-box/ Adjust the settings, then click "get code", and then instead of the HTML5 code, grap the iframe code. Insert into a text widget in your sidebar. Adjust width and height to suit your needs. I found a width of 232px allows for 4 columns and fit well into my theme.

Answer 3

Thought I would try re-implementing the fb like box code, and depending on the options chosen I am getting different results. If all options are selected (faces, stream, border, header) it works, just ignores my narrower width (240px). Turning off "faces" causes my tab panels to all be displayed at once (jquery ui tabs). Turning off "stream" leaves the tab panel display alone but removes their top margins and padding.

Answer 4

I wrapped the like box html code with a div with overflow=hidden

<div style="overflow:hidden; width: 175px">
    <legend>Like us on Facebook</legend>
    <div class="fb-like-box"
        data-href="https://www.facebook.com"
        data-width="175"
        data-height="70"
        data-show-faces="true"
        data-stream="false"
        data-header="true">
    </div>
</div>

Answer 5

Problem

As others have said, it seems Facebook has changed the behavior of the Like-Box plugin to assume a minimum width of 292 pixels. Any data-width attribute lower than 292 pixels is ignored. This problem can also be reproduced in Facebook's own reference version.

Solution

For the time being, I ended up using the following style declarations as a temporary solution, until Facebook sorts out this mess. They are based on the facebook_like-box_responsive.css. .fi_container is the block-level container into which the plugin is added. In my case I need to limit the width to 180 pixels, but obviously this can be changed to any value lower than 270 pixels.

.fi_container {
    width:180px;overflow:hidden;
}

.fi_container .fb_iframe_widget, .fi_container .fb_iframe_widget span, .fi_container .fb_iframe_widget span iframe[style] {
    width:100% !important;
}

See jsFiddle demo

Caveats

The main problem with this solution is that while the box fits nicely within containers narrower than 292 pixels, the box's contents do not. If you include the data-stream="true" attribute, the text of the posts becomes extremely narrow and barely readable. Similarly, including the data-show-faces="true" attribute makes a tight fit for the rows of profile images, as the iframe's internal styling assumes the problematic minimum width. In conclusion, while this solution prevents the plugin from breaking the site's design, it does hinder the overall usability of the plugin itself.