responsive design - developers - Comentarios de Facebook receptivos CSS Hack Broken
fb comments count (17)
Estaba usando
.fb-comments, .fb-comments span, .fb-comments iframe[style] {
width: 100% !important;
}
Para que los comentarios de Facebook sean receptivos en mi sitio web. Esto estaba funcionando bien y excelente el otro día. Hoy los miro y han cambiado su código. ¿Es posible que esto funcione de nuevo?
A continuación se muestra mi solución. Este script es solo una solución para este error
Solución inspirada en:
- respuestas anteriores
- este enlace
Código a continuación (simplemente reemplace .comments-area con su propio nombre de clase de contenedor)
<script>
(function($,sr){
// debouncing function from John Hann
// http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
};
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || 100);
};
}
// smartresize
jQuery.fn[sr] = function(fn){ return fn ? this.bind(''resize'', debounce(fn)) : this.trigger(sr); };
})(jQuery,''smartresize'');
$(document).ready(function(){
if ($(".comments-area").width() != document.getElementsByClassName("fb-comments")[0].getAttribute("data-width")) {
$(".fb-comments").attr("data-width", $(".comments-area").width());
}
$(window).smartresize(function(){
if ($(".comments-area").width() != document.getElementsByClassName("fb-comments")[0].getAttribute("data-width")) {
$(".fb-comments").attr("data-width", $(".comments-area").width());
FB.XFBML.parse($(".comments-area")[0]);
}
});
});
</script>
Agregando a las respuestas aquí. Realmente deberías tener un tiempo de espera para no actualizar los comentarios docenas de veces por segundo. Además, realmente no es una buena práctica continuar rastreando el DOM para los elementos cada vez que se activa la función, esto debería ser un poco más eficiente:
$(function() {
// cache some selectors so we''re not looking up divs over and
// over and over on resize
var facebook_comment_resize,
comment_resize_timeout,
$window = $(window),
$comments_container = $(''#comments''),
$comments = $(''.fb-comments'');
var facebook_comment_resize = function() {
// define a function to get the width of the comment container
// then set the data-width attribute on the facebook comment div
$comments.attr("data-width", $comments_container.width());
// Reinitialize the comments so it can grab the new width from
// the data element on the comment div
FB.XFBML.parse($comments_container.get(0));
}
// Set a timeout that can clear itself, keeps the comments
// from refreshing themselves dozens of times during resize
$window.on(''resize'', function() {
clearTimeout( comment_resize_timeout );
comment_resize_timeout = setTimeout(facebook_comment_resize, 200);
});
// Set the initial width on load
facebook_comment_resize();
});
Agregue el atributo data-width="100%" a su elemento fb-comments . Establecerá el contenedor a un ancho fluido.
Ex:
<div
class="fb-comments"
data-href="http://www.someurl.com/somepage/"
data-num-posts="10"
data-width="100%"
></div>
Esto parece una actualización reciente de Facebook en su developers.facebook.com/docs/plugins/comments
Aquí hay una nueva solución solo para CSS. Hice esto para un proyecto en el que estoy trabajando hoy (16 de julio de 2014) y funciona muy bien.
HTML
<div class="fb-comments"
data-href="http://example.com/comments"
data-numposts="10"
data-width="100%"
data-colorscheme="light"></div>
CSS
.fb_iframe_widget,
.fb_iframe_widget span,
.fb_iframe_widget span iframe[style] {
min-width: 100% !important;
width: 100% !important;
}
El truco es data-width: 100% y min-width: 100% !important; width: 100% !important; min-width: 100% !important; width: 100% !important;
Aquí hay una pequeña solución ... inténtalo ...
Añade este jQuery:
$(document).ready(function(){
$(".fb-comments").attr("data-width", $(".fb-comments").parent().width());
});
Creo que hackear css no puede resolver nuestro problema ahora, esta solución de javascript resolvió mi problema:
<div id="commentbox"></div>
<script type="text/javascript">
$(function () {
$(window).bind("load", function () {
var containerwidth = $(''#commentbox'').width();
$(''#picture_comment'').html(''<fb:comments '' +
''href="http://yourlink"'' +
'' width="'' + containerwidth + ''" numposts="5" '' +
''colorscheme="light"></fb:comments>'');
FB.XFBML.parse(document.getElementById(''commentbox''));
});
});
</script>
Espero que esto ayude:
/* resize facebook comments */
(function(window){
var dh = null;
$(window).on("resize",function(){
if ( dh ) {
clearTimeout(dh);
}
dh = setTimeout(function(){
var $fbc = $(".fb-comments");
var $stc = $(".comments-container");
dh = null;
if ( $fbc.attr("data-width") != $stc.width() ) {
$stc.css({height:$stc.height()});
$fbc.attr("data-width", $stc.width());
FB.XFBML.parse($stc[0],function(){
$stc.css({height:''auto''});
});
}
},300);
}).trigger("resize");
})(this);
¡Aclamaciones!
Esta es la única solución que me ha funcionado. (También necesita el bit raíz de FB) Original encontrado aquí: http://jsfiddle.net/PZD54/4/
<script>
setTimeout(function(){
resizeFacebookComments();
}, 1000);
$(window).on(''resize'', function(){
resizeFacebookComments();
});
function resizeFacebookComments(){
var src = $(''.fb-comments iframe'').attr(''src'').split(''width=''),
width = $(''#comments'').width();
$(''.fb-comments iframe'').attr(''src'', src[0] + ''width='' + width);
}
</script>
<div id="comments">
<div class="fb-comments" data-href="http://www.url-here.com"></div>
</div>
Este problema ya lo solucionó Facebook (el Complemento de Comentarios ahora está forzando el ancho fijo )
Debes usar data-width="100%"
Consulte la documentación: developers.facebook.com/docs/plugins/comments
Intenté data-width="100%" y trabajé para mí, pero cuando cambio el tamaño de la pantalla, el contenedor sigue siendo del mismo tamaño, no cambia, lo intenté con el complemento Ripple para Chrome y se ve bien, pero tengo que tocar o haga clic dos veces para comentar.
Intenta usar este código. Esto podría ser un poco diferente.
#fbcomments, .fb_iframe_widget,
.fb_iframe_widget[style],
.fb_iframe_widget iframe[style],
.fb_iframe_widget span,
#fbcomments iframe [style]
{
width: 100% !important;
}
La solución de rebote de Ka. es bueno, pero esto podría ser más sencillo y debería memorizar los nodos. Asegúrate de envolver tus comentarios fb en algún contenedor:
<div class="comments">
<div class="fb-comments" data-href="..." data-numposts="5" data-colorscheme="light"></div>
</div>
Luego (si usa jQuery), configure un cambio de tamaño que elimine la cantidad de solicitudes. Además, asegúrese de almacenar en caché los nodos que está verificando para acelerar las cosas:
var $comments = null;
var $fbComments = null;
var resizeTimeout = null;
function resizeComments() {
if (resizeTimeout) clearTimeout(resizeTimeout);
resizeTimeout = setTimeout(function() {
resizeTimeout = null;
if (typeof FB === ''undefined'') return;
// The class of the wrapper element above is ''comments''
$comments = $comments || $(''.comments'');
$fbComments = $fbComments || $(".fb-comments");
if ($comments.width() !== parseInt($fbComments.attr("data-width"), 10)) {
$fbComments.attr("data-width", $comments.width());
FB.XFBML.parse($comments[0]);
}
}, 100);
}
Luego, llame a esta función en el documento listo y cuando la ventana cambie de tamaño:
$(document).ready(function() {
resizeComments();
$(window).resize(function() {
resizeComments();
});
});
Ok, esto es lo que he basado hasta ahora en un comentario de Timothy.
function resizeFbComment(){
if (typeof FB === ''undefined'')
return;
$(".fb-comments").attr("data-width", $(".fb-comments").width());
FB.XFBML.parse($(".comments")[0]);
}
$(window)
.load(resizeFbComment)
.resize(resizeFbComment);
Obviamente, esto es un hack temporal. El tamaño de las ventanas debe tener un tiempo de espera.
También me mordió esto. Puse en un JS hack. Básicamente, enlaza con el evento de cambio de tamaño de la ventana y vuelve a dibujar el widget de comentarios cuando se dispara (usa jquery si quieres publicar sin él):
$(window).resize(function(){
$(".fb-comments").attr("data-width", $(".comments").width());
FB.XFBML.parse($(".comments")[0]);
});
En el ejemplo anterior, .comments es el contenedor en el que desea que se expanda el ancho de los fb-comments . La desventaja de esto es que cuando se cambia el tamaño de la ventana, el widget de comentarios se reinicializa.
Si usa el subrayado, debounce controlador de cambio de tamaño usando debounce para evitar que se dispare a menudo.
Tuve el mismo problema (implementé los comentarios de respuesta ayer, hoy ya no funcionó).
No tengo suficientes puntos para votar, pero la respuesta anterior funciona. Estoy usando el plugin de facebook para wordpress. También programé un tiempo de espera cuando la página se carga para obtener el ancho correcto de inmediato.
setTimeout(function(){
$(".fb-comments").attr("data-width", $(".comments-area").width());
FB.XFBML.parse($(".comments-area")[0]);
}, 1000)
Un enfoque de CSS puro adaptable se puede encontrar aquí:
http://jsfiddle.net/bennyaarup/5gyp6/
HTML
Agrego bloques de código de comentario de FB por duplicado, lo que equivale al número de etapas adaptativas (ancho de datos) que necesito. Añado la clase extra = .fb-1 , .fb-2 , .fb-3 etc ... que necesito en el CSS.
<div class="fb-comments fb-1" data-href="http://yourdomain.com" data-width="900" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-2" data-href="http://yourdomain.com" data-width="800" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-3" data-href="http://yourdomain.com" data-width="700" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-4" data-href="http://yourdomain.com" data-width="600" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-5" data-href="http://yourdomain.com" data-width="500" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-6" data-href="http://yourdomain.com" data-width="400" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-7" data-href="http://yourdomain.com" data-width="300" data-numposts="5" data-colorscheme="light"></div>
<div class="fb-comments fb-8" data-href="http://yourdomain.com" data-width="200" data-numposts="5" data-colorscheme="light"></div>
CSS
Estilo las etapas adaptativas utilizando consultas de medios y muestra: ninguna para mostrar el campo de comentario respectivo
@media all and (min-width: 400px), (max-width: 300px) {
.fb-8{
display: none !important;
}
}
@media all and (min-width: 500px), (max-width: 400px) {
.fb-7{
display: none !important;
}
}
@media all and (min-width: 600px), (max-width: 500px) {
.fb-6 {
display: none !important;
}
}
@media all and (min-width: 700px), (max-width: 600px) {
.fb-5 {
display: none !important;
}
}
@media all and (min-width: 800px), (max-width: 700px) {
.fb-4 {
display: none !important;
}
}
@media all and (min-width: 900px), (max-width: 800px){
.fb-3 {
display: none !important;
}
}
@media all and (min-width: 1000px), (max-width: 900px){
.fb-2 {
display: none !important;
}
}
@media all and (max-width: 1000px) {
.fb-1 {
display: none !important;
}
}
Es un poco hack, pero funciona muy bien.
.fb-comments, .fb-comments span, .fb-comments iframe {
min-width: 100% !important;
max-width: 100% !important;
}
Funciona con el nuevo 100% de ancho de datos.