css - una - ¿Cómo hacer que el widget de comentarios de Facebook tenga un ancho fluido?

plugin comentarios facebook wordpress

Question

¿Es posible hacer que el widget de comentarios de Facebook tenga un ancho fluido? Su documentation muestra un campo de ancho para fb:comments xfbml o iframe que se especifica como:

• ancho: el ancho del complemento en píxeles. Ancho mínimo recomendado: 400px.

Entonces quizás no sea posible ...

Answer 1

¡Esto es lo único que funcionó correctamente para mí!

$(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on(''resize'', function() {
resizeFacebookComments();
});

function resizeFacebookComments() {
var src = $(''.fb-comments iframe'').attr(''src'').split(''width=''),
width = $(".fb-comments").`enter code here`parent().width();

$(''.fb-comments iframe'').attr(''src'', src[0] + ''width='' + width);
}

Answer 2

Alan, su solución funcionaba, pero parece que Facebook actualizó su complemento y rompió el estilo. Lo conseguí trabajando nuevamente usando el selector universal:

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

Answer 3

Creo que esto funcionará para todos. Funciona para mí el 26 de diciembre de 2013 en http://eddie11.com/dj-eddie-talks/

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

Ninguno de los siguientes funcionó para mí, pero lo dejé allí de todos modos.

.fb-comments,
.fb-comments *,
.fb-comments iframe[style],
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget iframe,
.fb_iframe_widget iframe[style],
.fb-comments span,
.fb-comments iframe,

Answer 4

Creo que tengo una solución que mejora un poco con la respuesta de Ryan del 5 de marzo.

En lugar de volver a cargar el iframe de Facebook después de un retraso, puede hacer lo siguiente.

Inserta una etiqueta de comentarios de Facebook con regularidad, pero añade un poco más a la clase, para que Facebook no la detecte, pero puedes.

<div class="fb-comments-unloaded" data-href="..." data-numposts="10" data-colorscheme="light"></div>

A continuación, agregue algunos JS que elige este div, lo modifica con el ancho deseado, luego activa el analizador de Facebook.

var foundFBComs = false;

$(''.fb-comments-unloaded'').each(function(){

    var $fbCom = $(this),
        contWidth = $fbCom.parent().width();

    $fbCom.attr(''data-width'', contWidth)
          .removeClass(''fb-comments-unloaded'')
          .addClass(''fb-comments'');

    foundFBComs = true;

});

if (foundFBComs && typeof FB !== ''undefined'') {
    FB.XFBML.parse();
}

Answer 5

Después de lidiar con esto por bastante tiempo, encontré un tidbit que debería ayudarte a descubrir cuál de los trucos de CSS en esta página te ayudará con el plugin de comentarios de tu sitio / versión / año en particular. Mire su sitio en un navegador e inspeccione los elementos alrededor del complemento de comentarios de Facebook. Debería encontrar un fragmento que agregó y ahora está embellecido por el widget de JavaScript de Facebook que se ve así:

<fb:comments href="http://mywebpage.com" 
    fb-xfbml-state="rendered" class="fb_iframe_widget">

toma nota de la parte que dice:

class="<whatever class your version is using>"

esta es la clase que desea utilizar, por lo que en mi ejemplo anterior, le gustaría agregar los siguientes estilos:

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

Answer 6

Encontré una solución usando css. La inspiración vino de este artículo http://css-tricks.com/2708-override-inline-styles-with-css/

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

Answer 7

Este problema ha sido abordado por Facebook. ¡Ahora puede agregar data-width="100%" o establecer la opción de ancho en 100% y eliminar cualquier hack loco js, ​​según corresponda!

Answer 8

Esto funcionó para mí, pero necesito agregar tag span para que funcione correctamente:

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

Answer 9

Ninguna de las soluciones de CSS funcionó para mí desde marzo de 2014. Parece que Facebook ha cambiado el complemento para establecer ahora un ancho en un contenedor dentro del iFrame que no puede sobrescribir con CSS.

Después de una pequeña excavación, noté que el ancho de los comentarios está controlado por el último parámetro del ifrme src width=XXX . Con eso en mente, así es como lo resolví:

// ON PAGE LOAD
setTimeout(function(){
  resizeFacebookComments();
}, 1000);

// ON PAGE RESIZE
$(window).on(''resize'', function(){
  resizeFacebookComments();
});

function resizeFacebookComments(){
  var src   = $(''.fb-comments iframe'').attr(''src'').split(''width=''),
      width = $(''#container'').width();

  $(''.fb-comments iframe'').attr(''src'', src[0] + ''width='' + width);
}

#container es el ancho del contenedor en el que desea que el complemento de comentarios se ajuste para ajustarse. Cambie esto a lo que sea que necesite y este código debería funcionar para usted.

Estoy usando un tiempo de espera porque no pude disparar una vez que cargué el iframe. Cualquier ayuda sobre eso sería apreciada, pero el tiempo de espera hace el trabajo.

EDITAR: Esta solución hace que se rompa el botón Atrás. Estoy probando esta solución ahora y parece ser mejor: https://.com/a/22257586/394788

Answer 10

No es necesario anular el CSS, use data-width="100%"

<div class="fb-comments" data-width="100%" data-href="yourURL"></div>

Answer 11

No puedo comentar aún porque mi reputación aún no es lo suficientemente alta, sin embargo, hay una solución para esto a partir del 21 de diciembre de 2014

para que esto funcione en CSS:

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

DEBE tener la sección de ancho de datos = "" establecida en 100% dentro del código del complemento FB, es decir,

<div class="fb-comments" data-href="your site here" data-width="100%" data-numposts="5" data-colorscheme="light"></div>

ejemplo de trabajo con movimiento fluido: http: www.unitedbiker.org

Espero que esto ayude a todos, la idea es anular el estilo del iframe para que sea el 100% del elemento principal y establecer el plugin de FB real al 100% del iframe. Este fue mi trabajo alrededor.

Answer 12

Por lo general, quiero evitar el uso del selector universal para un mejor rendimiento. Debería poder obtener el mismo resultado con

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

Probablemente podría mejorarse más si consulta los selectores de Facebook ...

Answer 13

Probablemente el próximo cambio de FB y esta vez esto funciona mejor:

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

Answer 14

Sé que esta es una vieja pregunta, pero esto tal vez pueda ayudar a alguien.

Puede usar el siguiente código para hacer que sus comentarios fluyan

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

Puede verificar el código aquí, porque la función pre aquí borra algunas cosas. Soy nuevo aqui. Saludos

Facebook Comments Fluid

Answer 15

Si el código de su complemento de comentarios de Facebook es similar a (XFBML):

<fb:comments href="{URL_HERE}" numposts="5" colorscheme="light"></fb:comments>

Entonces, el siguiente CSS debe hacer el trabajo:

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

Answer 16

inserte este código antes de inicializar el complemento de Facebook y tendrá comentarios fluidos de fb :) :) :)

 $(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
$(window).on(''resize'', function() {
resizeFacebookComments();
});

function resizeFacebookComments() {
var src = $(''.fb-comments iframe'').attr(''src'').split(''width=''),
    width = $(".fb-comments").parent().width();

$(''.fb-comments iframe'').attr(''src'', src[0] + ''width='' + width);
}

Answer 17

parece que Facebook actualizó su documentación ... ahora puede usar data-width = "100%" o width = "100%"

developers.facebook.com/docs/plugins/comments

Answer 18

pasó algún tiempo investigando este problema. Aunque FB propone especificar el ancho absoluto en píxeles, parece que funciona si lo configuras en ''100%''. Tenga en cuenta el ancho de datos a continuación.

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

Sí, sí, eso es fácil, no hay devoluciones de llamada onresize sin modificaciones de src iframe.

Answer 19

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