Facebook feed iframe paresseux chargement

Question

À des fins de performance, je suis à la recherche d'un moyen de charger paresseux le flux de page de fans de facebook à mon site. Comme cette alimentation est visible après l'interaction utilisateur (clic), je me demandais si, au lieu de mettre en œuvre la balise

<fb:fan profile_id="XXXXXX" href="http://www.facebook.com/XXXX.XXX" width="292" show_faces="0" stream="true" height="390px" header="false" css="XXX"></fb:fan> 

dans mon balisage (tout en étant ti l'utilisateur invisible), je pourrais par quelque moyen que demande le facebook serveurs pour construire l'iframe et c'est du contenu à la demande?

Answer 1

Si vous pouvez utiliser un iframe au lieu de XFBML, faire en utilisant jQuery (jsFiddle):

$(document).ready(function() 
{ 
    $('#container_for_fb_box').append($('<iframe>') 
     .attr({ 
      'src': "http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=false&amp;stream=true&amp;header=false&amp;height=395", 
      'scrolling': 'no', 
      'allowTransparency': 'true' 
     }) 
     .css({ 
      'border':'none', 
      'overflow': 'hidden', 
      'width': '292px', 
      'height': '395px' 
     }) 
    ); 
}); 

Answer 2

Un exemple fixant le titre avec l'URL au lieu du src afin que jquery peut définir dynamiquement le src avec l'URL requise pour charger l'iframe.

//Trying to load the URL dynamically did not work for me 
//hence using the title as a workaround 
<iframe id="facebookFrame" title="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%xxxxxx%xxxxxx&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true&amp;height=590" scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 300px; height: 590px;"></iframe> 


//on click 
$("#yourButton").click(function(event) { 
    $("#facebookFrame").attr("src", $("#facebookFrame").attr("title")); 
    $("#facebookFrame").removeAttr("title");  
}); 

//using a timer to load the iframe after 2 seconds 
window.setTimeout(function() { 
    $("#facebookFrame").attr("src", $("#facebookFrame").attr("title")); 
    $("#facebookFrame").removeAttr("title"); 
}, 2000); 

//on user scroll 
$(window).bind("scroll", function(event) { 
    $("#facebookFrame").attr("src", $("#facebookFrame").attr("title")); 
    $("#facebookFrame").removeAttr("title"); 
});