Actualizando comentarios de Facebook sin recargar la página
Facebook ofrece un plugin muy útil para comentarios: Facebook comments. La única variable para identificar los comentarios actuales es el valor que pongas en la propiedad href del tag fb:comments. Me topé con la necesidad de actualizar ese valor in situ (sin recargar la página); esta es la solución:
Lo primero, el código básico para poder mostrar los comentarios. El href predeterminado que usaré para este ejemplo es http://techcrunch.com/2012/05/24/facebook-camera/
<fb:comments href="http://techcrunch.com/2012/05/24/facebook-camera/" num_posts="20" width="500"></fb:comments> <div id="fb-root"></div> <script type="text/javascript"> (function(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&appId=1234567890"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script>
El único objetivo de este formulario es invocar la función change_facebook_url. Es obviamente opcional, puedes acoplarlo a tu propia implementación:
<form id="name"> <select onChange="change_facebook_url(this.value);"> <option value="facebook-camera" selected>Post 1</option> <option value="manpacks-startup-perks-condoms">Post 2</option> </select> </form>
Acá viene la magia que esperabas, gracias a un método poco documentado en el sitio de Facebook Developers.
function change_facebook_url(value) { var facebook_html = '<fb:comments href="http://techcrunch.com/2012/05/24/' + value + '/" num_posts="20" width="500"></fb:comments>'; $('#comments').html(facebook_html); FB.XFBML.parse($('#comments').get(0),function(){ $(".FB_Loader").remove(); }); }
Con esta técnica puedes actualizar los comentarios de diferentes urls en la misma página sin necesidad de recargarla; desde mi punto de vista, un excelente recurso si te gusta utilizar ajax para cargar contenidos. (este ejemplo utiliza jQuery.)