How can I fix the indentation in a facebook like-box?
I can go to facebook and get the code for a "like box". Very handy.
Problem is, the display of this box is lame. it's not consistent. The first article in the 'stream' is displayed with this sort of indentation:
The next article in the stream is displayed with different (lame) indentation.
This is in the same likebox, I merely scrolled down.
The effect is not limited to the stream for "Facebook Platform". I've seen it in the Likebox for other streams as well.
I'd like to style the box, to try to make the indentation consistent, but it appears to be rendered as an iframe, which (I think) means I cannot style it because of the S.O.P.
How can I fix this?
Is there a workaround to display a likebox in a div that is not, eventually, an iframe?
EDIT: bug logged: http://developers.facebook.com/bugs/237053466346453
EDIT: I compared the
fb:fan control and the likebox control. With the
fb:fan thing, it is possible to provide custom CSS to style the contents. (There are some caveats.) I set the width and margins of the text, and also erased the
actorName, which is the same for every post. This is the result:
The left side is produced with this code:
<fb:fan profile_id='19292868552' width='292' connections='0' show_faces='false' stream='true' header='false' css='http://example.org/fb/customfanbox.css?_=6392'></fb:fan>
The right side is produced with this:
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&width=292&colorscheme=light&show_faces=false&border_color&stream=true&header=false&height=525" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:525px;" allowTransparency="true">
For the left-hand-side, if you don't want the
fb:fan element, you can use an iframe that points to fan.php, like this:
<iframe src='http://www.facebook.com/plugins/fan.php?connections=0&css=http%3A%2F%2Fexample.org%2Ffb%2Ffb%2Fcustomfanbox.css%3F_%3D0292&id=19292868552&locale=en_US&sdk=joey&stream=true&width=292&height=560' scrolling="no" frameborder="0" style="border-bottom:1px grey solid; overflow:hidden; width:292px; height:525px;" allowTransparency="true">
You could try using the older fan box plugin which offered loading an external CSS file. I don't know if it still works. If so, it could stop working any moment.
You certainly are not the only one with such problems. I suggest you file a feature request / vote for an existing one.