¿Cómo hacer un ancho de caja de comentarios de Facebook del 100%?

Estoy usando este código para poner un cuadro de comentario de Facebook en mi página,

 (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=397337283630353"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));  

pero no puedo hacer que el cuadro de comentarios llene el 100% de la página.

Puedes hacer esto agregando clase CSS en la hoja de estilos de tu página HTML como:

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

Zeeshan su solución parece obsoleta y parece que Facebook actualizó su plugin y eso rompió el estilo.

Probablemente esto funcione mejor para mí a partir de ahora y creo que este estilo volverá a romperse cuando Facebook actualice la forma en que funcionan sus complementos.

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

Animo a otros colaboradores a agregar la solución más reciente a esta pregunta cuando llegue el momento.

bueno, creo que logré resolverlo, analicé el cuadro de comentarios y vi que el div fb-comments contiene un span con un ancho de 470px por defecto, y dentro de este span encontré un iframe del mismo ancho, por lo que la solución es cambiar el ancho de span y iframe en el tamaño de la ventana usando jquery de esta manera:

 $(window).resize(function(){$('.fb-comments iframe,.fb-comments span:first-child').css({'width':$('#commentboxcontainer').width()});}); 

así que ahora, al cambiar el tamaño de la ventana, todo el cuadro de comentarios toma el ancho del contenedor (por otros medios es 100% ancho).

Intento las otras soluciones y ninguna funciona para mí.

Al leer la documentación de fb encontré que el ancho del 100% ya es compatible agregando el attribut data-width = “100%” a la etiqueta:

Está funcionando en este momento y de acuerdo con su documentación en dispositivos móviles, esta configuración se establece automáticamente.

Intente agregar el parámetro data-width="{pixels}" , como lo obtiene cuando obtiene el código creado en esta página, https://developers.facebook.com/docs/reference/plugins/comments/ – eso es , si conoce el ancho de la página en píxeles. No sé, si funciona con porcentajes también, pero de alguna manera lo dudo.

Entonces su última opción podría ser agregar resp. modifique ese parámetro dinámicamente una vez que su página se haya cargado y pueda leer el ancho actual en píxeles, y luego XFBML solo se haya analizado (estableciendo xfbml param en falso mientras se carga el script, y llamando a FB.XFBML.parse después de configurar el ancho de datos) parámetro). Por supuesto, eso todavía no te ayudará, si el ancho se modifica más tarde por el usuario al cambiar el tamaño de la ventana del navegador o si no …

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

Esto funcionó para mí

Con jQuery puede sobrescribir el ancho codificado antes de cargar el cuadro de comentarios de Facebook.

 $('document').ready(function(){ $('.fb-comments').attr('data-width',$('body').width()); }); 

ps puede reemplazar ‘cuerpo’ con cualquier otro elemento que desee que coincida con el cuadro de comentario.

Esto es bastante simple en tu código

Agregue la siguiente pieza de código data-width = “100%”