如何將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 不包含HTML或body標籤只是div的 我使用迪朗達爾在單頁應用

Answer 1

我加入了腳本app.js像

initializeFB: function() { 
     if (!isFBInitialized.isInitialized) { 

      FB.init({ 
       appId: 'xxxxxxxxxxxx', 
       appSecret: 'xxxxxxxxxxxxxxx', 
       // App ID from the app dashboard 
       channelUrl: '//mysite//channel.html', // Channel file for x-domain comms 
       status: true,         // Check Facebook Login status 
       cookie: true, // enable cookies to allow the server to access the session 
       xfbml: true         // Look for social XFBML plugins on the page to be parsed 
      }); 



      (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"; 
       fjs.parentNode.insertBefore(js, fjs); 
      }(document, 'script', 'facebook-jssdk')); 

      // Here we subscribe to the auth.authResponseChange JavaScript event. This event is fired 
      // for any auth related change, such as login, logout or session refresh. This means that 
      // whenever someone who was previously logged out tries to log in again, the correct case below 
      // will be handled. 
      FB.Event.subscribe('auth.authResponseChange', function (response) { 
       // Here we specify what we do with the response anytime this event occurs. 
       if (response.status === 'connected') { 
        // The response object is returned with a status field that lets the app know the current 
        // login status of the person. In this case, we're handling the situation where they 
        // have logged in to the app. 
        testFBAPI(); 
       } else if (response.status === 'not_authorized') { 
        // In this case, the person is logged into Facebook, but not into the app, so we call 
        // FB.login() to prompt them to do so. 
        // In real-life usage, you wouldn't want to immediately prompt someone to login 
        // like this, for two reasons: 
        // (1) JavaScript created popup windows are blocked by most browsers unless they 
        // result from direct user interaction (such as a mouse click) 
        // (2) it is a bad experience to be continually prompted to login upon page load. 
        FB.login(); 
       } else { 
        // In this case, the person is not logged into Facebook, so we call the login() 
        // function to prompt them to do so. Note that at this stage there is no indication 
        // of whether they are logged into the app. If they aren't then they'll see the Login 
        // dialog right after they log in to Facebook. 
        // The same caveats as above apply to the FB.login() call here. 
        FB.login(); 
       } 
      }); 

      isFBInitialized.isInitialized = true; 
     } 
    }, 

，並調用它在viewattached 作爲

   app.initializeFB(); 

然後它工作得很好

Answer 2

晚的答案，但也許它會幫助別人。對我來說，關鍵要獲得獨特的FB評論呈現在一個頁面應用程序是FB.XFBML.parse();

每次我想渲染獨特的評論：

1. 更改URL，每個FB評論線程分配給具體的網址 所以我可能會有www.someurl.com/#123，www.someurl.com/#456，www.someurl.com/#789，每個都有自己的fb評論主題。在AngularJs這可以用$location.hash('123');

2. 完成創建一個新的FB-評論DIV，其中 '號' 等於 '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); 
   }