How to leave Facebook comment plugin with 100% width?

Question

Is there any possibility to leave the facebook plugin with 100 width%?

I think his default is 550px wide.

Answer 1

Updating

It seems that the Facebook method is not accepting percentages through the configuration option data-width, because the value is being converted to pixels irrespective of the indicator of the type of value used (%, pt, px).

If nothing is defined, there is an element within the iframe, specifically a div#feedback_xxxxxx which receives the default width of 550 pixels so that any solution via the site via CSS is disabled.

Solution with jQuery

Demonstration at Jsfiddle

$(function() {

    var $myWrap = $('body');                      // elemento wrapper dos comentários
        width   = $myWrap.width();                // recolhemos a largura em pixeis

    $('.fb-comments').attr("data-width", width);  // passamos a largura para o Facebook
});

Upshot:

Resize when the screen changes width

So that we can resize when the screen changes width, and because there are width controls inside the iframe whose own Comments Plugin uses, we can listen when the window is no longer resized to run the function that will set the new width for Facebook comments.

Therefore, we create a function that performs the various operations and one to listen if the window has stopped being resized:

Demonstration at Jsfiddle

// função para manipular a largura do PlugIn de comentários do Facebook
function fluidComments() {
    var $myWrap = $('body');             // elemento wrapper dos comentários
        width   = $myWrap.width();       // recolhemos a largura em pixeis

    // passamos a largura para o Facebook
    $('.fb-comments').attr("data-width", width);

    /* se existe a iFrame é porque não é o primeiro carregamento
     * e também precisas de a actualizar
     */
    if ($(".fb-comments > span > iframe").size()==1)
        FB.XFBML.parse(); // indicação ao código do Facebook para se actualizar
}

// Correr quando o DOM está pronto
$(function() {
    fluidComments();
});

/* Monitorizar o progresso do "resize" para saber se acabou
 * e assim chamar a função que manipula a largura
 */    
var progresso;
window.onresize = function(){
  clearTimeout(progresso);
  progresso = setTimeout(fluidComments, 100);
};

---

Original Response

If by Comment Plugin you are referring to Comments ^(English), you can set its width using a date attribute:

data-width

The width (in pixels) of the plugin. The mobile version of the Comments plugin ignores the width Parameter, and Instead has a Fluid width of 100%.

That translated:

data-width

The width (in pixels) of the plugin. The mobile version of the Comments plug-in ignores the width parameter, and instead has a fluid width of 100%.

Example of implementation

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

Answer 2

According to this response from the SOEN, it is possible yes:

Use the CSS:

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

EDIT: By the way this is a bug from facebook, recently introduced... but apparently, there is a way around the problem, as shown by the answers in SOEN:

• https://stackoverflow.com/a/22328835/195417

• https://stackoverflow.com/a/22199776/195417

Answer 3

With css could use the classes:

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