Infinite Scroll und Facebook Kommentare

Question

Ich habe einen Tumblr Blog mit Facebook-Kommentare zu jedem Beitrag hinzugefügt.

Ich benutze auch infiniteScroll.

Wenn der Browser scrollt und der Inhalt scrollt, muss alles neu initialisiert werden. Wie initialisiere ich also Facebook-Kommentare neu?

Hier ist mein Code und der Rückruf für unendliche 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

Nach einigen Stunden der Forschung ich es geschafft, dieses Problem zu verstehen (die ich mit endloser Scroll hatte mit FB ist wie Box kombiniert). Infinite Scroll erstellt zwar die korrekten HTML-Tags, das Problem ist jedoch, dass die Widgets immer noch nicht im Browser angezeigt werden, wenn sie nicht von Facebook geparst werden. Jetzt wird es kompliziert: Wenn Sie einfach FB.XFBML.parse() in Ihrer Callback-Funktion aufrufen, werden alle Widgets auf der Seite neu geladen. Das ist schwer, nicht optimal und macht Ihre Seite so, als wäre sie kaputt, wenn Sie viele Widgets darauf haben. Die Lösung, die ich mir ausgedacht habe, besteht darin, nur die neuesten Elemente zu analysieren. Hier ist, wie ich es gemacht habe:

<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> 

Answer 2

Yeah! Ich habe nur FB.XFBML.parse() hinzugefügt; auf die Erfolgsfunktion und es hat für mich funktioniert! Kommentare href: