Code Snippets

I wanted to set percentage width for facebook comments plugin.

I searched the web and i got the following information from stackoverflow.

What i previously had was the following

<div id="fb-root"></div>
<div class="fb-comments" data-href="http://vikku.info/programming/" data-num-posts="100" data-width="500"></div>
</div>

I was trying to set data-num-posts=’100%’ which was not working. and then change the above to the following

<div id="fb-root"></div>
<div class="fb-comments" data-href="http://vikku.info/programming/" data-num-posts="100" data-width="500" width="100%" style="width: 100%;"></div>
</div>

and then added the following style in the style section

/* for facebook width 100% */
iframe.fb_ltr { width:90% !important; }

That’s it. It is working. …

oh… after a few days of working with the above i added a like button. the above style affected the like button and i was wondering how to change the width to 100% without affecting the like button.
Then got this from stackoverflow. So i placed only the following and removed the styles specified above.

remove width=”100%” style=”width: 100%;” from <fb:comments tag and add only the following in the style. voila it works.

.fb-comments, .fb-comments iframe[style] {width: 100% !important;}

the above was used from this url http://stackoverflow.com/questions/7447483/how-to-make-facebook-comments-widget-a-fluid-width

References

http://stackoverflow.com/questions/5305685/facebook-comments-plugin

http://stackoverflow.com/questions/7447483/how-to-make-facebook-comments-widget-a-fluid-width