How can I fix the indentation in a facebook like-box?

StackOverflow https://stackoverflow.com/questions/7514693

Question

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:

enter image description here

The next article in the stream is displayed with different (lame) indentation.

enter image description here

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:

enter image description here

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&amp;width=292&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=true&amp;header=false&amp;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">
Was it helpful?

Solution

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.

OTHER TIPS

You cannot style pages form other domains. That would also make XSS possible.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top