How to Make Facebook Comments Widget a Fluid Width

How to make Facebook comments widget a fluid width?

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;}

Is it possible to set a fluid width for Facebook's social plugins?

The correct working answer is a combination of things I found here. Mikel's answer is a good start:

Facebook Developers Platform link

This says:

We have pushed a fix for this. From now on, you can specify the width
as 100% (e.g. data-width="100%") to get a fluid layout. Docs are
updated too: https://developers.facebook.com/docs/plugins/comments
Thanks for your patience.

But... This will load the width of what's available to the plugin at loading time. When you resize your page it will remain the same width it had when you loaded the page. To fix this - and make a true responsive version of the Facebook Social Plugin - Add the following in your CSS:

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

This will cause the plugin to resize to the available space as you resize the window.

If you want this code to work for the page plugin, change the class-name 'fb-comments' to 'fb-page':

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

(thanks for the addition Black_Stormy!)

How to make facebook comment box width 100% and responsive?

This is was a facebook bug, check it out here:
https://developers.facebook.com/x/bugs/256568534516879/

The only available workaround is just using javascript.

Later edit: Bug fixed: You have to write: data-width="100%"

The width of the plugin. Either a pixel value or the literal 100% for
fluid width. The mobile version of the Comments plugin ignores the
width parameter, and instead has a fluid width of 100%.
https://developers.facebook.com/docs/plugins/comments

Responsive facebook comment box

this worked for me: Add to the fb-comments div data-width="100%"

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

and it will be responsive when you resize the browser.

you can put the fb-comments div inside another div and give that div the width you want.

How to adjust the width of the Facebook comments plugin?

Use something like jQuery to programmatically insert the comments plugin into your DOM after the page has been rendered setting it's width to the width the browser has displayed the parent div. Then call FB.XFBML.parse() to get it to show.

function adjustWidth(obj) {
    var width = parseInt($(obj).width());
    $(obj).html('<fb:like href="blah" width="' + width  + '></fb:like>');
    FB.FBXML.parse(obj);     
}

Responsive width Facebook Page Plugin

Facebook's new "Page Plugin" width ranges from 180px to 500px as per the documentation.

• If configured below 180px it would enforce a minimum width of 180px
• If configured above 500px it would enforce a maximum width of 500px

With Adaptive Width checked, ex:

Unlike like-box, this plugin enforces its limits by sticking to the boundary values if mis-configured.

For small screens / Responsive behaviors

• When rendering on smaller screens, enforce desiered width on the plugin container and plugin would try to fit in.

• The plugin renders at a smaller width (to fit in smaller screens) automatically, if the container is of slimmer than the configured width.

• You can scale down the container on mobile and the plugin will fit in as long as it gets the minimum of 180px to fit in.

Without Adaptive Width

• The plugin will render at the width specified, irrespective of the container width

Facebook's comments plug-in problem with data-width

It's a known bug in Facebook, as you can see here if you have a Facebook account: https://developers.facebook.com/support/bugs/173395380238318

The Facebook developers are working on it. This is what worked for me:

change data-width='100%' to width='100%'

---

Related Topics