facebook-social-plugins - para - plugin facebook timeline
¿Es posible establecer un ancho fluido para los complementos sociales de Facebook? (29)
Estoy desarrollando un sitio en torno al concepto de "diseño receptivo", pero los complementos sociales de Facebook son de ancho estático y "rompo" el diseño cuando se vuelven a dimensionar.
Al usar consultas de medios, configuré los complementos para ocultarlos en navegadores de baja resolución (dispositivos móviles, etc.). Sin embargo, en los navegadores de escritorio, cuando la ventana del navegador se vuelve a clasificar según el tamaño más pequeño, pero no tan pequeño para ocultar los complementos, salen del diseño.
¿Alguna forma de establecer un ancho fluido para los complementos sociales de Facebook?
¡Solo ponga esto en su archivo CSS o en su código html con etiquetas de estilo!
<style>
.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;}
</style>
Acabo de probar esto y parece que ahora hay un <div> dentro del iframe que tiene un ancho fijo, lo que significa que ahora necesitas quitar la etiqueta de style con javascript para hacerlo fluido.
EDITAR: no puede acceder al contenido del iframe con JS porque proviene de otro dominio
Aquí es a lo que terminé:
(function() {
window.addEventListener(''load'', updateWidth);
window.addEventListener(''resize'', debounce(function () {
updateWidth();
if (window.FB && FB.XFBML && FB.XFBML.parse) {
FB.XFBML.parse();
}
}, 1000));
function updateWidth() {
$(''.fb-like, .fb-comments'').each(function () {
var el = $(this);
var width = el.parent().width();
el.attr(''data-width'', width);
})
}
function debounce(func, wait, immediate) {
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};
var callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
})();
Aquí hay algunos jquery que deberían persistir a través de los cambios en el marcado de salida ya que usa una expresión regular para reescribir el ancho solamente, dejando solo el resto de la etiqueta de estilo.
Debe especificar el identificador o selector correcto del contenedor, reemplazando mi ejemplo de: # footer-last. El iframe se redimensiona en función de los cambios en el ancho del contenedor, que deberán configurarse como receptivos.
// Resize facebook window width
container_width = $(''#footer-last'').width();
$fb_iframe = $(''.fb-social-like-plugin iframe'');
fb_style = $fb_iframe.attr(''style'').replace(/width:/s*/d+px/i, ''width: '' + container_width + ''px'');
$fb_iframe.attr(''style'', fb_style);
Aquí hay un ejemplo completo, usando jQuery, con un ancho de respuesta y una imagen de carga. El código CSS de Alan y Jubair se comenta en el código.
Eso funciona bien en una vista web de Android
<html>
<head>
<title>Title</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<style>
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100%;/* !important; To get the control with JQuery*/
}
</style>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : ''APP_ID'',
channelUrl : ''//domain.com/channelUrl.php'',
status : true,
cookie : true,
xfbml : true
});
//Event fired when the plugin has been completely loaded
FB.Event.subscribe(''xfbml.render'',
function(response) {
//alert(''You liked the URL: '' + response);
var w = (typeof window.innerWidth != ''undefined'')?
window.innerWidth
:(typeof document.documentElement != ''undefined''
&& typeof document.documentElement.clientWidth !=
''undefined'' && document.documentElement.clientWidth != 0) ?
document.documentElement.clientWidth
: document.getElementsByTagName(''body'')[0].clientWidth;
w *= .950; //95% for best fit on mobile screens
//RESIZE
$(".fb-comments").css("width",w);
$(".fb-comments > span").css("width",w);
//Some days ago the next line would be sufficient
$(".fb_ltr").css("width",w);
//Now the modify of the span width is necessary to do the work
$("#div_loading_gif").remove();
}
);
};
//cargando SDK Asíncronamente
(function(d){
var js, id = ''facebook-jssdk'', ref = d.getElementsByTagName(''script'')[0];
if (d.getElementById(id)) {return;}
js = d.createElement(''script''); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
}(document));
</script>
<div id="div_loading_gif" style="width:100%; height:100%; text-align:center; background:url(../img/loading.gif) no-repeat center center;" >
</div>
<!--Usando jquery modificar el style de el div de clase fb_ltr
cambiar el ancho por el de la pantalla-->
<div class="fb-comments"
style="padding:0 auto;"
data-href="http://domain.com/comments.html"
data-width="100px"
data-num-posts="5"
data-mobile="false"
>
</div>
</body>
Aquí hay una pequeña solución que agrega el complemento Facebook LikeBox de Facebook al DOM con una altura o ancho de respuesta.
$(document).ready(function(){
var height = $(window).height();
var width = $(window).width();
var widget_height = parseInt((height)*0.9);
var widget_width = parseInt((height)*0.3);
var page_url = "http://www.facebook.com/Facebook";
$(".fb-plugin").append("<div class=''fb-like-box''
data-href=''"+page_url+"''
data-width=''"+widget_width+"''
data-height=''"+widget_height+"''
data-colorscheme=''dark''
data-show-faces=''true''
data-border-color=''#222''
data-stream=''true''
data-header=''true''>
</div></div>");
});
Así es como funciona: simplemente agrega este ancho de datos = "100%" Aquí hay un ejemplo:
<div class="fb-comments" data-href="<?php the_permalink(); ?>" data-numposts="5" data-colorscheme="light" data-width="100%"></div>
Aunque es una vieja pregunta, este es ahora el principal resultado de Google para "el plugin de comentarios de Facebook responde", por lo que sigue siendo relevante.
Las soluciones en las otras respuestas ya no son necesarias, ya que FB recientemente (mayo de 2014) solucionó esto al final.
Desde https://developers.facebook.com/x/bugs/256568534516879/ :
Hemos impulsado una solución para esto. A partir de ahora, puede especificar el ancho como 100% (por ejemplo, ancho de datos = "100%") para obtener un diseño fluido. Los documentos también se actualizan: https://developers.facebook.com/docs/plugins/comments Gracias por su paciencia.
Así que ahora puedes actualizar tu HTML a, por ejemplo,
<div class="fb-comments" data-width="100%" data-href="http://yourpageurl.com"></div>
Y no necesita ninguna solución adicional de CSS.
Editar: esto creará el complemento para adaptar su ancho al espacio disponible en el momento de la carga. Cuando cambia el tamaño de la ventana del navegador, el complemento permanecerá en ese ancho inicial. Para que sea realmente receptivo, agregue esto a su CSS:
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
Esto hará que el complemento se adapte al espacio actualmente disponible cuando cambie el tamaño del navegador
Cree un div vacío donde desea que el cuadro de Facebook (u otro complemento social, funcione universalmente) con una clase ''fb-container'', luego agregue el siguiente jQuery:
$(document).ready(function(){
$(''.fb-container'').replaceWith(''<div class="fb-comments" data-href="https://WWW.YOURSITEHERE.COM/" data-width="'' + $(''PARENT DIV'').width().toFixed(0) +''" data-numposts="5" data-colorscheme="light"></div>'');
});
ps puede reemplazar PARENT DIV con cualquier otro elemento que desee que coincida con el cuadro de comentarios y WWW.YOURSITEHERE.COM con su sitio
Creo que max-width es mejor que el width en este caso, y funciona para mí:
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
Definitivamente funcionará solo para agregar .fb-comments span en el estilo.
.fb-comments, .fb-comments span, .fb-comments iframe[style] {width: 100% !important;}
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;}
Esto es JQuery y podría ser parte de la respuesta a tu pregunta. Estoy usando la versión HTML5 del botón Me gusta:
<div class="fb-like" data-href="my.domain.com" data-layout="standard" data-send="false" data-width="255" data-show-faces="false" data-action="recommend" data-font="verdana"></div>
El elemento "div.main-content" es el elemento en el que debe coincidir el botón Me gusta en mi diseño. El redimensionamiento funciona hasta que el div es tan pequeño que el atributo de diseño de datos en el div.fb-like necesita ser cambiado de "estándar" a una alternativa que ocupe menos espacio horizontal. Soy nuevo en esto, así que no estoy seguro si esta es la solución más elegante para hacer que el botón similar responda. Me gustaría ver una respuesta a esta pregunta de alguien que sea más un experto en este tema.
$(window).resize(function() {
var computed_width = $(''div.main-content'').width();
$(''div.fb-like iframe'').attr(''style'', ''border: medium none; overflow: hidden; height: 24px; width: '' + computed_width + ''px'');
});
Esto funciona para mí
/* Set inline instead of inline-block */
.fb-comments.fb_iframe_widget{
display: inline !important;
}
.fb-comments.fb_iframe_widget span,
.fb_iframe_widget iframe {
width: 100% !important;
}
Esto funciona para mí:
$(''.fb-comments'').attr(''data-width'', ''100%'');
Facebook realizó algunos cambios en el marcado generado desde el plugin de comentarios. Estoy usando la versión HTML5. Este CSS modificado de lo que se compartió anteriormente hizo el truco.
.fb-comments, .fb_iframe_widget iframe[style], .fb_iframe_widget span[style] {width: 100% !important;}
La respuesta aceptada no funcionó para mí.
Encontré esto por Craig Bailey en los comentarios aquí:
http://www.wpresponsive.com/how-to-make-facebook-comments-responsive-wordpress
que es perfectamente fluido (probado en osx ff & safari, ios6).
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
La respuesta correcta de trabajo es una combinación de cosas que encontré aquí. La respuesta de Mikel es un buen comienzo:
Enlace de plataforma de desarrolladores de Facebook
Esto dice:
Hemos impulsado una solución para esto. A partir de ahora, puede especificar el ancho como 100% (por ejemplo, ancho de datos = "100%") para obtener un diseño fluido. Los documentos también se actualizan: https://developers.facebook.com/docs/plugins/comments Gracias por su paciencia.
Pero ... Esto cargará el ancho de lo que está disponible para el complemento en el momento de la carga. Cuando cambie el tamaño de su página, seguirá siendo el mismo ancho que tenía cuando cargó la página. Para solucionar esto, y hacer una verdadera versión receptiva del complemento social de Facebook, agregue lo siguiente en su CSS:
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
Esto hará que el complemento cambie el tamaño del espacio disponible a medida que cambia el tamaño de la ventana.
Si desea que este código funcione para el complemento de página, cambie el nombre de clase ''fb-comments'' por ''fb-page'':
.fb-page, .fb-page iframe[style], .fb-page span {
width: 100% !important;
}
(gracias por la adición Black_Stormy!)
Lo estoy trabajando con este sencillo script (ver código en el enlace).
https://gist.github.com/2111366
Debe realizar algunos cambios en la información para que esté utilizando su ID de aplicación de Facebook y la URL de su página.
Esta solución utiliza jQuery, por lo que deberá comprender cómo funciona, pero una vez que obtenga el script para ejecutar su diseño receptivo, funcionará en la carga de la página o al cambiar el tamaño de la página.
Lo hice funcionar usando un pequeño jQuery y estableciendo el atributo "ancho de datos" cuando la página se carga y en el cambio de tamaño de la ventana. El problema que encontré con todos los enfoques de CSS es que algunos de los comentarios y botones estaban ocultos fuera de los márgenes del contenedor o desbordados.
Aquí está mi $ 0.02, espero que ayude. Además, simplemente configure el selector de # contenido en el lugar que desee que coincida con el cuadro de comentarios, como un contenedor div ...
jQuery (document) .ready (function () {
//check for device width and reformat facebook comments
function fbCommentWidth() {
jQuery(''.fb-comments'').attr(''data-width'',jQuery(''#content'').width());
}
//run on resize, and reparse FB comments box
jQuery(window).on(''resize'',function() {
fbCommentWidth();
FB.XFBML.parse();
});
//run on document ready
fbCommentWidth();
});
Logré hacerlo funcionar usando este código:
.fb-like, .fb-like span, .fb-like.fb_iframe_widget span iframe {
width: 100% !important;
}
porque en mi archivo html tengo esto:
<div class="fb-like" data-href="http://www.yourwebsite.yourdomain" data-send="true" data-show-faces="false" data-colorscheme="light" data-font="verdana"></div>
Sugerencia: debe cambiar su CSS dependiendo de la clase div.
No sé sobre los comentarios, pero con el cuadro de enlace, todo lo que tiene que hacer es usar la opción iframe directamente de Facebook y cambiar el ancho en píxeles con un porcentaje, y cambiará dependiendo del ancho del columna en la que está
Para aquellos que prefieren usar el código HTML5 para complementos de Facebook como el Feed de actividad o Like Box :
/******* IPHONE PORTRAIT MODE (480px or less) *******/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.fb_iframe_widget span[style], .fb_ltr[style] {
width:420px !important;
}
}
- No funciona con comentarios o ancho basado en porcentaje; manténgase en el código iframe si necesita fluidez pura.
- H / T a para el enlace css-tricks en la parte superior de esta página. (:
Parece que esta publicación no es muy antigua, pero la respuesta no me funciona. Tuve que agregar esto a mi hoja de estilo ...
#fbcomments, .fb_iframe_widget, .fb_iframe_widget[style], .fb_iframe_widget iframe[style], #fbcomments iframe[style] {width: 100% !important;}
El .fb_iframe_widget y .fb_iframe_widget [style] parecían ser importantes.
Si está utilizando el complemento oficial de wordpress facebook debido a la inhalación móvil de facebook, haga.
La versión móvil se mostrará automáticamente cuando se detecte un agente de usuario de dispositivo móvil. Puede desactivar este comportamiento estableciendo el parámetro móvil en falso. Tenga en cuenta que la versión móvil ignora el parámetro de ancho y, en su lugar, tiene un ancho de fluido del 100% para cambiar el tamaño de las situaciones de cambio vertical / horizontal. Es posible que deba ajustar su CSS para su sitio móvil para aprovechar este comportamiento. Si lo prefiere, puede controlar el ancho a través de un elemento contenedor. http://developers.facebook.com/docs/reference/plugins/comments/
Deberá cambiar facebook / social-plugins / fb-comments.php en la línea 35.
<div class="fb-comments fb-social-plugin" '' . $params . '' data-mobile="false"></div>
Esto le permitirá diseñar con el siguiente.
.fb-social-plugin {
width:98%!important;
}
.fb_iframe_widget span {
width:100%!important;
}
.fb-comments iframe[style] {width: 100% !important;}
Sería bueno si pudieran arreglar su versión móvil o poner una configuración en su GUI de complementos.
Una nota importante acerca de este cambio de tamaño: si el script de comentarios de Facebook detecta que estás en un dispositivo móvil, se rompe esto. Pero, si haces que la etiqueta <fb:comments> contenga el valor de atributo mobile="false" entonces (por ahora) los scripts de Facebook respetarán tu CSS.
Unirme a las masas desinformadas con mi propia solución a este problema, a partir de septiembre de 2015:
Facebook proporciona una opción para el widget de fb-page llamado adapt-container-width , que (de acuerdo con los docs ,) debe rastrear el ancho de los padres (hasta un ancho máximo de 500px ). Cuando se FB.XFBML.parse() con FB.XFBML.parse() , el widget parece quedarse atascado en un valor extraño para el ancho del contenedor principal, a pesar de lo que establezca en el propio widget. Por ahora, esto funciona bastante bien:
- Crear elemento usando el generador de código de FB (en la parte superior de docs )
- Vincula un evento al método de cambio de
resizewindow(opcionalmente usando_.debouncecon un límite razonable para evitar sobrecargar el navegador con las solicitudes intermedias Espere a que Facebook exponga más de la API de widgets para que podamos ver qué diablos está pasando.
<div class="fb-page" data-adapt-container-width="false" <!-- This bit''s the important part --> data-href="https://www.facebook.com/yourpage" data-show-posts="true" data-small-header="true" data-width="100%" > <div class="fb-xfbml-parse-ignore"> <blockquote cite="https://www.facebook.com/yourpage"><a href="https://www.facebook.com/yourpage">Like YourPage on Facebook!</a></blockquote> </div> </div>
combinado con el siguiente javascript:
// FB Resize
$(window).bind(''resize'', _.debounce(function() {
if (window.FB && FB.XFBML && FB.XFBML.parse) {
var el = $(''.fb-page'');
var width = el.parent().width();
el.attr(''data-width'', width);
FB.XFBML.parse();
}
}, 1000)); // Debounce until 1000ms have passed
Use el elemento de inspección para ver qué código se está generando. En algunos casos, como los complementos de Facebook de Wordpress, utilizan diferentes "ids" y una vez que encuentras el id que se está usando, agrega
#fbSEOComments, #fbSEOComments iframe[style] {width: 100% !important;}
Esto no siempre hace el truco de aprender. Si bien puede cambiar los colores y algunos tamaños que lo hacen sensible, sigue teniendo errores. Parece que no le gustan los porcentajes y no ve el tamaño de la caja en la que está, así que esto no funciona. Estoy jugando con hacer consultas @media para cambiar su tamaño según el tamaño de la ventana del navegador.
Sería bueno si reconociera el ancho, pero @media parece ser la única forma.
ninguno de estos métodos funcionó pero al usar esta idea, lo siguiente funcionó para mí:
.fb-comments, .fb-comments span, .fb-comments.fb_iframe_widget span iframe {
width: 100% !important;
}