How to make Facebook comment widget fluid width?

Question

Is it possible to make a Facebook comment widget as a fluid width? Their documentation shows the width field for fb:comments xfbml or iframe, which is indicated as:

• width - the width of the plugin in pixels. Minimum recommended width: 400 pixels.

So maybe this is not possible ...

Answer 1

I found a solution using css. Inspiration came from this article http://css-tricks.com/2708-override-inline-styles-with-css/

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

Answer 2

Alan your solution works, but it looks like facebook updated its plugin and broke the style. I was working with the universal selector again:

 .fb-comments, .fb-comments * { width:100% !important; } 

Answer 3

The following change is likely from FB, and this time it works better:

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

Answer 4

None of the CSS solutions worked for me as of March 2014. It looks like Facebook has changed the plugin to now set the width in the container in the iFrame, which you cannot override with CSS.

After a little digging, I noticed that the width of the comments is actually controlled by the last parameter iframe src width=XXX . With that in mind, here is how I decided it:

 // ON PAGE LOAD setTimeout(function(){ resizeFacebookComments(); }, 1000); // ON PAGE RESIZE $(window).on('resize', function(){ resizeFacebookComments(); }); function resizeFacebookComments(){ var src = $('.fb-comments iframe').attr('src').split('width='), width = $('#container').width(); $('.fb-comments iframe').attr('src', src[0] + 'width=' + width); } 

#container is the width of your container that you want the comment plugin to stretch to fit. Change this to everything you need and this code should work for you.

I use a timeout because I could not start it when the iframe was loaded. Any help on this would be appreciated, but a timeout does the job.

EDIT: This solution causes the back button to break. I am testing this solution now, and it seems to me that it is better: https://stackoverflow.com/a/3166/

Answer 5

I think I have a solution that slightly improves Ryan's answer from March 5th.

Instead of reloading the Facebook iframe after a delay, you can do the following.

Insert a regular Facebook comment tag, but add an extra bit to the class so that Facebook doesn't detect it, but you can.

 <div class="fb-comments-unloaded" data-href="..." data-numposts="10" data-colorscheme="light"></div> 

Then add some JS that picks this div up, modifies it with the required width, then launches the Facebook parser.

 var foundFBComs = false; $('.fb-comments-unloaded').each(function(){ var $fbCom = $(this), contWidth = $fbCom.parent().width(); $fbCom.attr('data-width', contWidth) .removeClass('fb-comments-unloaded') .addClass('fb-comments'); foundFBComs = true; }); if (foundFBComs && typeof FB !== 'undefined') { FB.XFBML.parse(); } 

Answer 6

This issue has been resolved by Facebook. Now you can add data-width="100%" or set the width parameter to 100% and remove any crazy js-hacks as needed!

Answer 7

I generally want to avoid using a universal selector for better performance. You should get the same result with

 .fb-comments, .fb-comments span, .fb-comments iframe {width: 100% !important;} 

Perhaps it will improve more if you check with facebook selectors ...

Answer 8

paste this code before initializing the facebook plugin and you will have current fb comments :) :) :)

  $(".fb-comments").attr("data-width", $(".fb-comments").parent().width()); $(window).on('resize', function() { resizeFacebookComments(); }); function resizeFacebookComments() { var src = $('.fb-comments iframe').attr('src').split('width='), width = $(".fb-comments").parent().width(); $('.fb-comments iframe').attr('src', src[0] + 'width=' + width); } 

Answer 9

Looks like facebook updated its documentation. Now you can use data-width = "100%" or width = "100%"

https://developers.facebook.com/docs/plugins/comments/

Answer 10

I can’t comment yet, because my reputation is still not high enough, however there is a solution for this as of December 21, 2014.

for this in CSS:

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

you MUST have a data-width = "" section set to 100% in the FB ie plugin code

 <div class="fb-comments" data-href="your site here" data-width="100%" data-numposts="5" data-colorscheme="light"></div> 

working example with fluid movement: http: www.unitedbiker.org

Hope this helps everyone, the idea is to redefine the iframe style to 100% of the parent element and set the actual FB plugin to 100% of the iframe. That was my job.

Answer 11

This worked for me, but I need to add a span tag to work correctly:

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

Answer 12

I think this will work for everyone. Works for me on December 26, 2013 at http://eddie11.com/dj-eddie-talks/

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

None of the below worked for me, but I still left it.

 .fb-comments, .fb-comments *, .fb-comments iframe[style], .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe, .fb_iframe_widget iframe[style], .fb-comments span, .fb-comments iframe, 

Answer 13

I know this is an old question, but it might help someone.

You can use the following code to make your comments current.

 .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 if span [style] {width: 100%! important;}

You can check the code here because the pre-function here removes some things. I'm new here. Relations

Facebook Fluid Comments

Answer 14

spent some time studying this problem. Although FB suggests specifying the absolute width in pixels, it looks like it works if you just set it to “100%”. Pay attention to the data width below.

 <div class="fb-comments" data-width="100%" data-href="http://www.sample.com/" data-numposts="5" data-colorscheme="light"></div> 

Yes, yes, it is easy, without onresize it does not cause any iframe src changes.

Answer 15

After dealing with this for quite some time, I found a tidbit that will help you figure out which of the CSS tricks on this page will help you in your particular facebook comment plugin site / version / year. Look at your site in a browser and view the elements around the facebook comment plugin. You should find the snippet that you added and is now decorated with a javascript widget framework that looks something like this:

 <fb:comments href="http://mywebpage.com" fb-xfbml-state="rendered" class="fb_iframe_widget"> 

pay attention to the part that says:

 class="<whatever class your version is using>" 

this is the class you want to use - so in my example above you would like to add the following styles:

 <style> .fb_iframe_widget, .fb_iframe_widget iframe[style], .fb_iframe_widget span[style], .fb_iframe_widget * { width: 100% !important; } </style> 

Answer 16

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

Answer 17

If your Facebook Comments plugin code looks like (XFBML):

 <fb:comments href="{URL_HERE}" numposts="5" colorscheme="light"></fb:comments> 

Then the following CSS should complete the task:

 .fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget iframe { width: 100% !important; } 

Answer 18

This is the only thing that worked right for me!

 $(".fb-comments").attr("data-width", $(".fb-comments").parent().width()); $(window).on('resize', function() { resizeFacebookComments(); }); function resizeFacebookComments() { var src = $('.fb-comments iframe').attr('src').split('width='), width = $(".fb-comments").`enter code here`parent().width(); $('.fb-comments iframe').attr('src', src[0] + 'width=' + width); } 

Answer 19

No need to override css, use data-width="100%"

 <div class="fb-comments" data-width="100%" data-href="yourURL"></div>