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


Tags: css,facebook,iframe,facebook-likebox

Problem :

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">


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.


    CSS Howto..

    How to to make a gap between rows in FlowPanel in Css in Gwt?

    How to make this geometrical “translation” effect with javascript?

    How to overlap images in the header section?

    How to use css with jsp's

    How to define a CSS fontface?

    how to restore to original CSS

    How to link to a “tab” on my website

    How to align text next to an icon with CSS?

    How to style a completely different element when hovering over another element(with different parents)? [duplicate]

    How to disable the 'save image as' popup for smartphones for

    How to make onmouseover on menu link change background image?

    How to conditionally load CSS

    How to make a site have a built in user-friendly editor?

    How can I stay organized when writing CSS? [duplicate]

    How can I force text to “normal” (not bold) using css?

    How to make a div fall on hover and stay at at the bottom of the page using jquery or css?

    CSS: How to make selectable boxes?

    How to make maintaince document for a website?

    How can I position an element in the middle of the window while using position: absolute?

    How to override the color defined in css?

    how to do drop down list

    Firefox File Upload Box is bigger than Chrome/IE/Safari - How to fix? - use size(HTML) and width(CSS) parameters

    how to change css style for every second data (picture) from database?

    how to increase the font-size without making it thicker

    How do I make a Javascript alert display only once, ever? [closed]

    How to override inline style dynamically?

    How to edit the correct phone number in my script?

    How can I separate a column on a web page depending on whether or not the browser is mobile?

    How do I keep parentheses of SASS / SCSS mixin?

    CSS - How to set gradient color background for different heights