Make Facebook Comment and Like Box Fluid Width

Fluid width designs are considered as the best practice for web-pages. So if you are trying to make your web-page layout a fluid width layout, then congratulations for selecting the best. With fluid width layouts there are some problems with third party widgets like Facebook Comment box or Facebook Like box. They are not fluid width and you have to mention a static width for this widgets otherwise it will assign its default width and that may not be suitable for your web-page. So how to hack that? Here I’ll tell you the best possible way to hack Facebook Comment and Like box widgets and make them fluid width.

Default Facebook Comment box and Like Box HTML 5 code looks something like this.

<-- Facebook Comment Box -->
<div class="fb-comments" data-href="http://example.com" data-num-posts="2" data-width="470"></div>
<!-- Facebook Like buttom -->
<div class="fb-like" data-href="https://facebook.com/updateox" data-send="true" data-width="450" data-show-faces="true"></div>

As you can see both of this two scripts contains data-width=”" field and this field defines the width of the widget. So to make this widgets fluid width, first we have to remove this field and its value from the script.

After removing the script your script will look something like this.

<!-- Facebook Comment Box -->
<div class="fb-comments" data-href="http://example.com" data-num-posts="2"></div>
<!-- Facebook Like buttom -->
<div class="fb-like" data-href="https://facebook.com/updateox" data-send="true" data-show-faces="true"></div>

If you check it this script with your browser you will see that this widgets now has the default width of 470px for comment box and 459px for like box. To make this fluid width we have to define it’s width via CSS.

Add this line in to your style sheet and refresh the page.

Older version plugin users

#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;}

Newer version plugin users

.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
Updated on 21st April 2012

Facebook has recently updated its social plugin’s styles and added a span tag to define its width and height. So to overwrite this we have to add a few more styles in our style sheet.
Here are updated the CSS for both older version and newer version users
For older version users

#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;}
#fbcomments span, .fb_iframe_widget span, .fb_iframe_widget span[style], .fb_iframe_widget iframe span[style], #fbcomments iframe span[style] {width: 100% !important;}

For newer version users

.fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments, .fb-comments iframe[style], .fb-like-box, .fb-like-box iframe[style] {width: 100% !important;}
.fb-comments span, .fb-comments iframe span[style], .fb-like-box span, .fb-like-box iframe span[style] {width: 100% !important;}
Remember that this hack wont work on Internet Explorer 6 and 7. I’m still not able to make that work on IE6, 7. If you have a hack for IE6 or IE7 then please share it with us.
4 Comments

Add a Comment

Your email address will not be published. Required fields are marked *

Notify me of followup comments via e-mail. You can also subscribe without commenting.