How to leave facebook comments plugin with 100% width?

6

Is there any possibility of leaving the facebook plugin with 100% width?

I think its default is 550px width.

    
asked by anonymous 18.03.2014 / 16:11

3 answers

7

Update

It seems that the Facebook method is not accepting percentages through the data-width setting, given that the value is being converted to pixels regardless of the type of value used (%, pt, px) .

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

Solution with jQuery

Demonstration in 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
});

Result:

Resize when the screen changes width

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

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

JSFiddle Demo

// 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 Comments Plugin you are referring to the Comments (English) , you can set the width of it by a data attribute:

  

data-width

     

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

What translated:

  

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%.

Implementation example

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

According to this SOEN response , it is possible to:

Use CSS:

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

EDIT: By the way this is a facebook bug, recently introduced ... but it seems, there is a way to get around the problem, as the answers in SOEN show:

18.03.2014 / 16:13
0

With could use the classes:

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