无限滚动和Facebook的评论

我有一个tumblr博客与Facebook评论添加到每个职位。无限滚动和Facebook的评论

我也在使用infiniteScroll。

当浏览器滚动并且内容滚动时，所有事情都必须重新初始化，那么如何重新初始化Facebook评论？

这里是我的代码和回调无限滚动

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 
      }); 
     } 



    });

来源

2012-04-12 Tara Irvine

我已经使用了解析XML和FBML选项，它的工作

– 2012-04-12 14:51:14

研究了几个小时让我进一步了解这个问题之后（也就是我和无限滚动与FB的样箱的组合）。无限滚动确实创建了正确的HTML标签，但问题在于如果它们未被Facebook解析，那么这些小部件仍然不会显示在浏览器中。现在，它变得复杂了：如果您只需在回调函数中调用FB.XFBML.parse()，页面上的所有小部件都将被重新加载。这很沉重，根本不是最优的，如果你的页面上有很多小部件，它会让你的页面看起来很糟糕。我想出的解决方案是仅解析最新的元素。以下是我如何做到的：

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

来源

2013-03-10 21:04:04

非常感谢您的帮助。 – 2013-03-11 10:03:46

是啊！我只添加了FB.XFBML.parse（）;在成功功能上，它为我工作！

来源

2018-01-14 02:00:04 WesleyMacente

无限滚动和Facebook的评论

回答

相关问题