Is there any possibility of leaving the facebook plugin with 100% width?
I think its default is 550px width.
Is there any possibility of leaving the facebook plugin with 100% width?
I think its default is 550px width.
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.
$(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
});
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:
// 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);
};
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%.
<div class="fb-comments"
data-href="http://example.com/comments"
data-width="100%"
data-numposts="5"
data-colorscheme="light"></div>
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:
With css could use the classes:
.fb-comments, .fb-comments span[style], .fb-comments iframe[style] {
width: 100% !important;
}