css - page - plugin facebook timeline

¿Cómo hacer que Facebook Like Box responda?

Question

Estoy usando el código de caja de Facebook en mi barra lateral al pegar el código de Facebook en un widget de texto. Mi tema es receptivo y me gustaría obtener el mismo cuadro para cambiar el tamaño correctamente. Encontré este tutorial pero él dice que la forma en que lo está haciendo no es "totalmente receptivo", así que no sabía si había una mejor manera de hacerlo.

Answer 1

A partir del 4 de agosto de 2015, el cuadro de me gusta de facebook nativo tiene un fragmento de código receptivo disponible en la página de Desarrolladores de Facebook.

Puede generar su likebox de Facebook aquí

https://developers.facebook.com/docs/plugins/page-plugin

Esta es la mejor solución en vez de hackear CSS.

Answer 2

El ejemplo de Colin para mí chocó con el botón Me gusta. Así que lo adapté solo para apuntar a la casilla Me gusta.

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

Probado en la mayoría de los navegadores modernos.

Answer 3

Intentaba hacer esto en Drupal 7 con el módulo "fb_likebox" ( https://drupal.org/project/fb_likebox ). Para que sea receptivo. Resulta que tuve que escribir mi propia Variante de módulo Contrib y eliminar la opción de configuración de ancho. (la opción de altura predeterminada no me importa). Una vez que eliminé el ancho, agregué el <div id="likebox-wrapper"> en fb_likebox.tpl.php.

Aquí está mi CSS para darle estilo:

 `#likebox-wrapper * {
  width: 100% !important;
  background: url(''../images/block.png'') repeat 0 0;
  color: #fbfbfb;
 -webkit-border-radius: 7px;
  -moz-border-radius: 7px;
   -o-border-radius: 7px;
  border-radius: 7px;
   border: 1px solid #DDD;}`

Answer 4

La respuesta que está buscando a partir de junio de 2013 se puede encontrar aquí:

https://gist.github.com/dineshcooper/2111366

Se logra utilizando jQuery para reescribir el HTML interno del contenedor principal que contiene el widget de Facebook.

¡Espero que esto ayude!

Answer 5

NOTA: esta respuesta es obsoleta. Consulte la respuesta wiki de la comunidad a continuación para obtener una solución actualizada.

Encontré este Gist hoy y funciona perfectamente: https://gist.github.com/2571173

(Muchas gracias a https://gist.github.com/smeranda )

/* 
Make the Facebook Like box responsive (fluid width)
https://developers.facebook.com/docs/reference/plugins/like-box/ 
*/

/* 
This element holds injected scripts inside iframes that in 
some cases may stretch layouts. So, we''re just hiding it. 
*/

#fb-root {
    display: none;
}

/* To fill the container and nothing else */

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

Answer 6

NOTA: la solución de Colin no funcionó para mí. Facebook puede haber cambiado su marcado. Usar * debería ser más a prueba de futuro.

Envuelva el cuadro Me gusta con un div:

<div id="likebox-wrapper">
    <iframe src="..."></iframe> <!-- likebox code -->
</div>

y agrega esto a tu archivo css:

#likebox-wrapper * {
   width: 100% !important;
}

Answer 7

Ninguno de los trucos de CSS funcionó para mí (en mi caso, la casilla similar a fb fue sacada a la derecha con "float: right"). Sin embargo, lo que funcionó sin ningún truco adicional es una versión IFRAME del código del botón. Es decir:

<iframe src="//www.facebook.com/plugins/like.php?href=..." 
        scrolling="no" frameborder="0" 
        style="border:none; overflow:hidden; width:71px; height:21px;" 
        allowTransparency="true">
</iframe>

(Tenga en cuenta el ancho personalizado en el estilo, y no es necesario incluir javascript adicional).