Fluid & Responsive Facebook Like Box

Question

i am using the "old" FB Likebox:

<div class="container">
    <div class="row-fluid">
        <div class="span12">
            <div id="fb-root"></div>
            <script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
            <script type="text/javascript">FB.init("394109690683544");</script>
            <fb:fan height="120px;" width="100%" logobar="false" stream="false" connections="12" css="http://myurl.com/facebook.css" profile_id="562615520421911" class="fb_iframe_widget "></fb:fan>
        </div>
    </div>
</div>

how can i change the css to always have a 100% width? I need to use the box with twitter bootstrap and responisve.

thank you

Answer 1

It will not work, if you look at the code that's generated

<fb:fan height="120px;" width="200%" ...

translates into

<iframe id="f13ed26db2962a6" class="fb_ltr" scrolling="no" name="f2625075f1fd254" style="border: medium none; overflow: hidden; height: 120px; width: 200px;"

Which means that the widget reads only the values as the iframe is set to 200px not 200%

EDIT: Seems like I was able to hack a bit with jQuery to make that happen, however becaue I can't set the span to 100% even when its display:block I'm using document width to set the span to the appropriate width, however you might need to change that to the width of the parent div. Again hacky but might get you started...

JSFiddle