Facebook like box widget not recognizing data-width attribute?

Question

I just noticed today that the data-width attribute for the Facebook Like Box widget does not appear to be working. It looks like it is reverting to the default width. An example

Answer 1

Simply Use iFrame instead of fbml and change width to whatever required.

i.e.:(width:194px below)

<iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%sitename.com&amp;width=194px&amp;height=290px&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=true&amp;appId=1234567890" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:194px; height:290px;" allowTransparency="true"></iframe> 

Thanks!

Answer 2

i think we should tell fb to fix their dumb script, now fb like box must be at least 292 px in width.

They state clearly on https://developers.facebook.com/docs/reference/plugins/like-box/

The minimum supported plugin width is 292 pixels.

Answer 3

I fixed the width with a little CSS hack but it is only temporary. My hack is this:

.fb-like-box iframe {
     width: your_width_in_px !important;
}

Answer 4

Expanding on user2477225's answer, it might have problems with custom positioning that you set (relative or absolute somewhere on the page), so what I did was:

.fb_iframe_widget>span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }

Seems to be working so far.

Edit: For IE 8 (and lower), please use this instead:

.fb_iframe_widget span { width: 240px !important; }
.fb-like-box iframe { width: 240px !important; }

I like to be as specific as possible in my selectors, but after checking this issue some more, I see no technical reason to use the > selector here.

Answer 5

Use the iframe settings, in my site using the iframe settings with a likebox of 236px width and it overrules the 292px width. Brainless thinking of FB, every site needs a sidebar of 292px width???? yeye

Answer 6

Here is what I used to fix it, this is not the exact same since I don't show faces, but just adapt it to your code, the important part is the div #fb-like-container that I added, it lets me use css selectors to change required code.

CSS:

<script>
#fb-like-container div.fb-like-box>span, 
#fb-like-container div.fb-like-box>span>iframe{
    width: 173px!important; 
}
</script>

HTML (data-width is not taken into account):

<div id="fb-like-container">
    <div class="fb-like-box" 
    data-href="http://www.facebook.com/christopherjonescomicart" 
    data-width="273" 
    data-height="71" 
    data-show-faces="false" 
    data-stream="true" 
    data-header="false">
     </div>
</div>