javascript - 如何将 Facebook 评论添加到单页应用程序？

Question

我有网站新闻(单页应用) 此代码在 aspx 页面中运行良好

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


  <div class="fb-comments" style="width: 670px; float: left;"   data-href="http://www.facebook.com/share.php?u=http://www.game11.com/%23/newsdetail/24" data-width="670" data-num-posts="10" dir="rtl" lang="aa">
   </div>

但是在SPA的View里怎么办 它不包含 html 或 body 标签只是 div 我在单页应用程序中使用 durandal

Answer 1

迟到的答案，但也许它会对某人有所帮助。对我来说，获得独特的 fb 评论以在单页应用程序上呈现的关键是 FB.XFBML.parse();

每次我想呈现独特的评论时:

1. 更改url，每个fb评论线程分配给特定的url 所以我可能有 www.someurl.com/#123、www.someurl.com/#456、www.someurl.com/#789，每个都有自己的 fb 评论线程。在 AngularJs 中，这可以通过 $location.hash('123'); 完成

2. 创建一个新的 fb-comments div，其中 'number' 等于 '123'、'456' 或 '789'

   <div class="fb-comments" data-href="http://someurl.com/#{{number}}" data-numposts="5" data-width="100%" data-colorscheme="light"> </div>

3. 调用执行fb SDK的函数

   function FBfun(path) {
     setTimeout(function() { // I'm executing this just slightly after step 2 completes
       window.fbAsyncInit = function() {
         FB.init({
           appId : '123456789123',
           xfbml      : true,
           version    : 'v2.2'
         });
       };
   
       (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/sdk.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
   
       FB.XFBML.parse(); // This is key for all this to work!
     }, 100);
   }