javascript - poner - ¿Cómo puedo hacer que el ancho del botón Me gusta de Facebook cambie automáticamente de tamaño?

no aparece el boton me gusta en mi pagina de facebook

Question

Estoy implementando el botón me gusta de Facebook , pero estoy teniendo problemas con el ancho. Estoy usando la implementación de JavaScript SDK, no el iframe directo.

De acuerdo con la documentación, el ancho predeterminado es 450 . Está bien, y entiendo que el ancho se puede cambiar por medio del atributo width en la etiqueta <fb:like> . Sin embargo, mi problema es que realmente no puedo especificar un ancho fijo. Debido a la naturaleza del botón, el ancho no es constante en todos los estados. Por ejemplo, si a nadie le ha gustado la página, muestra "Sé el primero de tus amigos en querer esto"; si alguien tiene, muestra "XXX personas así. Sé el primero de tus amigos"; y aún si te ha gustado, se muestra "Te gusta esto" o "A ti y a XXX personas les gusta esto". En otras palabras, hay muchos estados del botón, ninguno de los cuales comparte un ancho constante.

Esto no sería un gran problema si no fuera por el hecho de que quiero mostrar el botón flotante en el lado derecho de un <div> . Para ser más claro, esto es lo que estoy haciendo:

<div id="wrapper">
    <span class="fb-like"><fb:like show_faces="false" width="450" font="lucida grande""></fb:like></span>
    ...
</div>
<style type="text/css">
.fblike {
    display: inline-block;
    padding: 0.5em;
    position: absolute;
    right: 0;
    top: 0;
}
#wrapper {
    position: relative;
}
</style>

Esto funciona bien, pero el problema es que ahora el iframe tiene un ancho constante de 450 píxeles. Como el iframe está alineado a la izquierda, cuando el texto es más corto, hay espacio adicional a la derecha. He intentado varias aplicaciones de text-align: right en vano. Y el problema se agrava aún más por el hecho de que esto es realmente un marcado de lujo para un iframe que se agrega con el FB SDK, por lo que no puedo cambiar ninguno de sus contenidos con CSS o JavaScript.

Necesito una solución que (a) mantenga el ancho del área del botón dinámico (es decir, cambia según el contenido); o (b) alinee a la derecha todo en el área del botón.

¡Gracias por cualquier ayuda que alguien pueda darme!

Answer 1

Agregué esto a mi CSS:

div.fb-like.fb_iframe_widget > span {
 width: 100% !important;
}

div.fb-like.fb_iframe_widget{
 width: 100%;
}

Answer 2

Como todo el mundo probablemente ya sepa, no hay una manera fácil de hacerlo. Sin embargo, se me ocurrió una clase programática de kludge. Y cuando digo kludge, ¡realmente lo digo en serio! No lo considero listo para el horario estelar, pero a alguien le puede gustar juguetear con el concepto y tratar de encontrar algo viable.

La idea es que, si bien no se puede leer el ancho del contenido del iframe, se puede recorrer una serie de anchos para el propio iframe hasta que encuentre uno que apenas evite que se enrolle el texto. En ese punto, el texto debe tocar el lado derecho del iframe. En otras palabras, queremos establecer el ancho del iframe en 1px más ancho que el ancho que haría que el texto se ajuste.

En principio, es bastante fácil detectar si el texto se está envolviendo. Establece el ancho del marco flotante, espera que el código del FB ajuste el contenido y luego lee la altura. Si todo encaja en una línea, la altura debería ser de aproximadamente 25 px. Más que eso significa que el texto se ha envuelto.

La dificultad viene con la parte "esperar al código FB para ajustar el contenido". Siento que debe haber algún modo de forzar un "rediseño" del iframe, pero hasta ahora no lo he encontrado. Llamar a FB.XFBML.parse () es obvio, pero parece que no funciona. Esta es la parte donde me quedé atrapado. Estoy forzando que el iframe vuelva a cargar estableciendo su atributo src, que hace el trabajo pero a un precio horrible en velocidad. Simplemente se entiende como "prueba de concepto" en este punto. Casi tan bueno sería una manera simple de saber cuándo terminó cualquier redibujado; Siento que también debería ser posible, pero mi cerebro se estancó antes de encontrar algo simple.

De todos modos aquí hay un código de prueba si quieres probarlo. Se tarda una eternidad en colocar el botón en su lugar, pero al menos funciona. Dejé todo visible durante el proceso de carga para que pueda ver lo que está haciendo, en una página real, sería mejor mantener las cosas ocultas hasta que todo esté listo. También tenga en cuenta que la alineación puede estar un poco apagada porque estoy ajustando el ancho 5px a la vez. Si las cosas se pudieran hacer más rápido, sería fácil usar 1px en su lugar. Incluso mejor sería un ajuste aproximado para acercarse, luego un ajuste fino para hacerlo perfecto. Obviamente, hay muchos experimentos que hacer, para quien quiera llevarlo a cabo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type=''text/javascript''>
var likediv, likeframe;
function loadcode(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";
  fjs.parentNode.insertBefore(js, fjs);
}
function init()
{
loadcode(document, ''script'', ''facebook-jssdk'');
likediv=document.getElementById(''d2'');
setTimeout(initx, 10);
}
function initx()
{
likeframe=likediv.getElementsByTagName(''iframe'')[0];
if (!likeframe) { setTimeout(initx, 10); return; }
likeframe.style.width=''225px'';
setTimeout(shrink, 10);
}
function shrink()
{
likeframe=likediv.getElementsByTagName(''iframe'')[0];
var currwidth=parseInt(likeframe.style.width);
if (currwidth>=500) return;
newwidth=currwidth+5;
likeframe.style.width=newwidth+''px'';
likeframe.style.height=''0'';
likeframe.src=likeframe.src;
setTimeout(checkframe, 10);
}
function checkframe()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) setTimeout(checkframe, 10);
else if (h>25) shrink();
//else we are done; make the frame visible if we hid it earlier
}
</script>
</head>
<body onload=''init()'' style=''margin:10px 50px''>
<div id="fb-root"></div>
<div style=''text-align:right''>Here is some right-aligned text to compare to.</div>
<div id=''d2'' style=''float:right;height:25px;overflow:hidden;border:1px dotted red''>
<div class="fb-like" data-send="false" data-width="225" data-show-faces="false" data-action="recommend"></div>
</div>
</body>
</html>

EDITAR: Hice un poco más de experimentación, sigue siendo una solución incómoda pero más rápida que antes:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type=''text/javascript''>
var likediv, likeframe, targwidth;
function loadcode(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";
  fjs.parentNode.insertBefore(js, fjs);
}
function init()
{
loadcode(document, ''script'', ''facebook-jssdk'');
likediv=document.getElementById(''d2'');
setTimeout(initx, 10);
}
function initx()
{
likeframe=likediv.getElementsByTagName(''iframe'')[0];
if (!likeframe) { setTimeout(initx, 10); return; }
likeframe.style.width=''225px'';
setTimeout(shrink, 10);
}
function shrink()
{
likeframe=likediv.getElementsByTagName(''iframe'')[0];
var currwidth=parseInt(likeframe.style.width);
if (currwidth>=500) return;
targwidth=currwidth+5;
likeframe.style.width=''10px'';
likeframe.style.height=''0'';
setTimeout(checkframe, 10);
}
function checkframe()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) { setTimeout(checkframe, 10); return; }
likeframe.style.width=targwidth+''px'';
likeframe.style.height=''0'';
setTimeout(checkframe2, 10);
}
function checkframe2()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) setTimeout(checkframe2, 10);
else if (h>25) shrink();
//else we are done; make the frame visible if we hid it earlier
}
</script>
</head>
<body onload=''init()'' style=''margin:10px 50px''>
<div id="fb-root"></div>
<div style=''text-align:right''>Here is some right-aligned text to compare to.</div>
<div id=''d2'' style=''float:right;height:25px;overflow:hidden;border:1px dotted red''>
<div class="fb-like" data-send="false" data-width="225" data-show-faces="false" data-action="recommend"></div>
</div>
</body>
</html>

EDICIÓN FINAL: Este es el mejor que creo que este método alguna vez va a obtener; sin duda, el código podría modificarse, pero siempre llevará varios segundos recorrer el ancho de prueba para encontrar lo que funciona. Pero ahora es lo suficientemente rápido (alrededor de 5 segundos) para que pueda ser realmente utilizable. Por cierto, estoy agregando cada nueva versión de código en lugar de reemplazar las anteriores porque no he hecho muchas pruebas de este código entre navegadores y es posible que las versiones de mayor velocidad no funcionen para alguien. Como es un código experimental, creo que es mejor tener disponibles las diferentes versiones para el respaldo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type=''text/javascript''>
var minwidth=225, maxwidth=500, finished=false, last_was_good=null;
var likediv, likeframe, targwidth, boundlow, boundhigh;
function loadcode(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";
  fjs.parentNode.insertBefore(js, fjs);
}
function init()
{
loadcode(document, ''script'', ''facebook-jssdk'');
likediv=document.getElementById(''d2'');
setTimeout(initx, 10);
}
function initx()
{
likeframe=likediv.getElementsByTagName(''iframe'')[0];
if (!likeframe) { setTimeout(initx, 10); return; }
likeframe.style.width=minwidth+''px'';
setTimeout(trynewwidth, 1);
}
function trynewwidth()
{
if (last_was_good==null) { boundlow=minwidth; boundhigh=maxwidth; }
else if (last_was_good) boundhigh=targwidth;
else boundlow=targwidth;
finished=((boundhigh-boundlow)<2);
if (finished && last_was_good) { done(); return; }
if (finished && !last_was_good) targwidth=boundhigh;
else targwidth=parseInt((boundlow+boundhigh)/2);
setTimeout(setwidth, 1);
}
function done()
{
//All finished, if we were hiding the div make it visible now
}
function setwidth()
{
likeframe=likediv.getElementsByTagName(''iframe'')[0];
likeframe.style.width=''10px'';
likeframe.style.height=''0'';
setTimeout(checkframe, 10);
}
function checkframe()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) { setTimeout(checkframe, 10); return; }
likeframe.style.width=targwidth+''px'';
likeframe.style.height=''0'';
setTimeout(checkframe2, 10);
}
function checkframe2()
{
var h=parseInt(likeframe.offsetHeight);
if (h==0) { setTimeout(checkframe2, 10); return; }
if (finished) { done(); return; }
last_was_good=(h<26);
setTimeout(trynewwidth, 1);
}
</script>
</head>
<body onload=''init()'' style=''margin:10px 50px''>
<div id="fb-root"></div>
<div style=''text-align:right''>Here is some right-aligned text to compare to.</div>
<div id=''d2'' style=''float:right;height:25px;overflow:hidden;border:1px dotted red''>
<div class="fb-like" data-send="false" data-width="225" data-show-faces="false" data-action="recommend"></div>
</div>
</body>
</html>

Answer 3

Corrección de CSS

.fb-like, 
.fb-like > span,
.fb-like > span iframe {
    max-width:273px;
}

Answer 4

Hay algunas respuestas a preguntas frecuentes que vale la pena leer al elegir un tamaño.

https://developers.facebook.com/docs/plugins/like-button

Aunque con eso dicho, todavía es bastante críptico:

"El ancho del complemento. El diseño que elija afecta los anchos mínimo y predeterminado que puede usar, consulte las preguntas frecuentes a continuación para obtener más detalles".

estándar

Ancho mínimo: 225 píxeles.

El mínimo aumenta en 40px si la acción es ''recomendada'' por y aumenta en 60px si el envío es ''verdadero''.

Ancho predeterminado: 450 píxeles. Altura: 35 píxeles (sin fotos) u 80 píxeles (con fotos).

box_count

Ancho mínimo: 55 píxeles. Ancho predeterminado: 55 píxeles. Altura: 65 píxeles.

recuento de botón

Ancho mínimo: 90 píxeles. Ancho predeterminado: 90 píxeles. Altura: 20 píxeles.

botón

Ancho mínimo: 47 píxeles. Ancho predeterminado: 47 píxeles. Altura: 20 píxeles.

Answer 5

Personalmente estoy usando lo siguiente ...

#fbook-like {
    width: 50px !important; /*width of just the button*/
    overflow: visible; /*so there is no cut off*/
    vertical-align: top; /*bc all other like buttons align top*/
}

Lo que he hecho aquí es poner el botón fb en el extremo derecho y alinearlo con mi borde, y solo los comentarios agregados (de ancho dinámico) se mostrarán más allá del borde. Puedo mantener un buen diseño mientras se muestran los comentarios, independientemente de la duración.

Answer 6

Si usa la versión XFBML del botón Me gusta, junto con Facebook Javascript SDK, puede suscribirse al evento ''xfbml.render'', y una vez que se desencadene ese evento, puede establecer el ancho del botón if iframe similar a un valor pequeño . (Uso 50px.) El iframe ajustará automáticamente su ancho según sea necesario para mostrar el botón y contar como y cualquier otro elemento, de acuerdo con su configuración.

https://developers.facebook.com/docs/reference/javascript/

El mayor obstáculo para esta solución es que necesitará una ID de aplicación de Facebook. Puede obtener una ID de aplicación creando una aplicación aquí: https://developers.facebook.com/apps/

Answer 7

Tuve que enfrentar el mismo problema con el complemento add-this y lo resolví de manera similar:

.addthis_button_facebook_like,
.addthis_button_facebook_like span,
.addthis_button_facebook_like span iframe {
    max-width: 450px !important;
}

Answer 8

#fblike iframe {
    width: 95px !important;
}

#fblike .fb_edge_comment_widget iframe {
    width: 330px !important;
}

Y

<div id="fblike"><fb:like show-faces="false" layout="button_count"></fb:like></div>

De esta forma, tanto los comentarios como los iframes de botones son de ancho fijo. Sin efectos divertidos Espero eso ayude.