Infinite scroll and facebook comments

Question

I have a tumblr blog with facebook comments added to each post.

I am also using infiniteScroll.

When the browser scrolls and the content scrolls in, everything had to be initialised again, so how do I reinitialize facebook comments?

Here is my code and the callback for infinite scroll

    function initialiseDescriptions(){
        $(".description").each(function(){

            $(this).click(function(){
                //alert();
                var postId = $(this).find(".id")[0].value;

                    $.openDOMWindow({ 
                        windowSourceID:'#post-' + postId,           
                        windowPadding:20,  
                        windowBGColor:'#fff',
                        overlayOpacity: 60,  
                        borderSize:'0', 
                        height:710,
                        width: 410,
                        anchoredSelector:'.defaultDOMWindow'
                    }); 

                    return false;
            })
        });


    //Pretty sure I need to reinitialize facebook comments in here but the following code doesn't work

$("<div id='fb-root'></div>'.appendTo("body");
(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_GB/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));


        }

    $(window).load(function () {

        initialiseDescriptions();

        var $content = $('#content');

        if($content.infinitescroll) {

            $content.masonry({
                itemSelector: '.posts',
                //columnWidth: 235,
                isAnimated: true
            }),    
            $content.infinitescroll({
                navSelector    : 'div#pagination',  
                nextSelector   : 'div#pagination div#nextPage a', 
                itemSelector   : '.posts',
                loading: {
                    finishedMsg: '',
                    img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif'
                },
                bufferPx       : 500,
                debug          : false,
            },
            // call masonry as a callback.
            function( newElements ) {
                var $newElems = $( newElements );
                $newElems.hide();
                // ensure that images load before adding to masonry layout
                $newElems.imagesLoaded(function(){
                    $content.masonry( 'appended', 
                        $newElems, true,
                        function(){$newElems.fadeIn();} 
                    );

                initialiseDescriptions();

                });
            });
        }else{
            $content.masonry({
                itemSelector: '.posts',
                //columnWidth: 235,
                isAnimated: true
            });
        }



    });

Answer 1

Yeah! I only added FB.XFBML.parse(); on the success function and it's worked for me!

Answer 2

After a few hours of research I managed to understand this problem (that I had with Infinite Scroll combined with FB's Like box). Infinite Scroll does create the correct HTML tags but the problem is that the widgets still don't show up in the browser if they are not parsed by Facebook. Now this is where it becomes complicated: if you simply call FB.XFBML.parse() in your callback function, all widgets on the page are going to be reloaded. This is heavy, not optimal at all, and it makes your page look like it's broken if you have a lot of widgets on it. The solution I came up with is to parse only the newest elements. Here's how I did it:

    <script type="text/javascript">
        $('#content').infinitescroll({
            navSelector  : "div.navigation",            
                // selector for the paged navigation (it will be hidden)
                nextSelector : "div.navigation a:first",    
                // selector for the NEXT link (to page 2)
                itemSelector : "#content div.post",
                // selector for all items you'll retrieve
                debug: true
                },
                function(arrayOfNewElems) {
                    for(var i=0;i<arrayOfNewElems.length;i++)
                        FB.XFBML.parse(arrayOfNewElems[i]);
                }
            );
    </script>