Scatola fluida come?

Question

Realizzo un sito reattivo e devo includere un Like-Box di Facebook per la fanpage Facebook del cliente. Lo developer page for the like-box ha un widget per la personalizzazione, ma non consente di impostare una larghezza in percentuale.

Ho cercato in giro e il più vicino che ho è stato this page dal 2010, che si riferisce a un fb: widget di fan che consente di collegare CSS personalizzati. Ho cercato di ottenere questo tutorial per lavorare, ma non riesce con questo errore:

<fb:fan> requires one of the "id" or "name" attributes. 

Quindi, per ricapitolare, ho bisogno di un Like Box Facebook che posso sia impostato per essere fluido, o che mi permette di passare personalizzati CSS per l'iFrame che genera. Chiunque è in grado di indicarmi la giusta direzione?

Answer 1

Hai pensato che non si potesse fare? AHA! Hai a te, a Facebook e ai tuoi perfidi modi a larghezza fissa: ho scritto uno script JQuery per annullare tutto il tuo male!

$(document).ready(function(){ 
    var fbWidth; 

    function attachFluidLikeBox(){ 
     // the FBML markup: WIDTH is a placeholder where we'll insert our calculated width 
     var fbml = '<fb:like-box href="http://www.facebook.com/YOURFANPAGEORWHATEVS" width="WIDTH" show_faces="false" stream="true"></fb:like-box>';//$('#likeBoxTemplate').text().toString(); 

     // the containing element in which the Likebox resides 
     var container = $('#likebox'); 

     // we should only redraw if the width of the container has changed 
     if(fbWidth != container.width()){ 
      container.empty(); // we remove any previously generated markup 

      fbWidth = container.width(); // store the width for later comparison 

      fbml = fbml.split('WIDTH').join(fbWidth.toString()); // insert correct width in pixels 

      container.html(fbml); // insert the FBML inside the container 

      try{ 
       FB.XFBML.parse(); // parses all FBML in the DOM. 
      }catch(err){ 
       // should Facebook's API crap out - wouldn't be the first time 
      } 
     } 
    } 

    var resizeTimeout; 

    // Resize event handler 
    function onResize(){ 
     if(resizeTimeout){ 
      clearTimeout(resizeTimeout); 
     } 

     resizeTimeout = setTimeout(attachFluidLikeBox, 200); // performance: we don't want to redraw/recalculate as the user is dragging the window 
    } 

    // Resize listener 
    $(window).resize(onResize); 

    // first time we trigger the event manually 
    onResize(); 
}); 

Ciò che fa è aggiungere un listener all'evento di ridimensionamento della finestra. Quando si ridimensiona, controlliamo la larghezza dell'elemento 'contiene', genera il nuovo codice XFBML con la larghezza corretta, sostituisce i figli dell'elemento contenitore con detto XFBML e quindi attiva l'API di Facebook per analizzare di nuovo l'XFBML. Ho aggiunto alcuni timeout e controlli per assicurarmi che non faccia nulla di stupido e venga eseguito solo quando è necessario.

Answer 2

Non è possibile impostare la casella di scelta su un valore diverso da una larghezza di pixel. Il mio suggerimento è di posizionarlo in un DIV o SPAN che sia fluido con overflow impostato su nascosto. Certo, sta andando a ritagliare parte della scatola dei like, ma avendo il bisogno di fluido, questa è la soluzione migliore.

Answer 3

State lottando con lo stesso identico problema. Una soluzione rapida & consiste nell'utilizzare la casella Facebook Like basata su iframe.

<iframe class="fb-like-box" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;height=500&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true" scrolling="no" frameborder="0" allowTransparency="true"></iframe> 

Nota la classe 'fb-like-box' assegnata e tutti gli stili in linea rimossi. La classe per l'iframe potrebbe essere simile a questa:

.fb-like-box { 
    width: 100% !important; 
    height:500px; 
    border:none; 
    overflow:hidden; 
} 

sembra che non importa ciò che l'altezza e la larghezza sono che sono definiti nel tag src del iframe. Basta posizionare l'iframe in un elemento fluido come una cella in un layout di griglia CSS.

(include idee da: http://updateox.com/web-design/make-facebook-comment-and-like-box-fluid-width/)

Answer 4

ho trovato oggi questo Gist e funziona perfettamente: https://gist.github.com/2571173

/* 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 5

Molto è cambiato da quando l'OP.

Semplicemente scegliendo iFrame e impostando la larghezza su 100%, il tuo FB Like Box dovrebbe essere reattivo.

Fondamentalmente FB aggiunge questo al iFrame:

style="border:none; overflow:hidden; width:100%; height:300px;". 

Answer 6

Ecco un piccolo lavoro in giro che aggiunge l'HTML5 Facebook LikeBox Plugin nel DOM con altezza o larghezza risposta.

$(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>"); 
     }); 

Answer 7

ho usato la versione HTML5 di Facebook Like Box e qui è ciò che ha funzionato per me:

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

Answer 8

Il commento di cui sopra da Ed e Matthias sull'utilizzo di 100% per l'iframe ha lavorato molto per me. Qui è il mio codice iframe

originale senza FIX:

<iframe src="//www.facebook.com/plugins/likebox.php? 
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&amp; 
width&amp;height=290&amp;colorscheme=dark&amp; 
show_faces=true&amp;header=true&amp;stream=false&amp; 
show_border=true&amp;appId=XXXXXXXXXX" 
scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; height:290px;" 
allowTransparency="true"></iframe> 

AGGIORNATO CON 100% FIX:

<iframe src="//www.facebook.com/plugins/likebox.php? 
href=https%3A%2F%2Fwww.facebook.com%2FXXXXXXXXXX&amp; 
width&amp;height=290&amp;colorscheme=dark&amp; 
show_faces=true&amp;header=true&amp;stream=false&amp; 
show_border=true&amp;appId=XXXXXXXXXX" 
scrolling="no" frameborder="0" 
style="border:none; overflow:hidden; height:290px;width:100%" 
allowTransparency="true"></iframe> 

L'unico cambiamento è l'aggiunta di "width: 100%" per l'attributo di stile del iframe

nota che il codice ha soprattutto "XXXXXXXXXX" al posto dei riferimenti unici