Javascript 如何将facebook评论添加到单页应用程序？

我有网站新闻（单页申请） 此代码在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>

（功能（d、s、id）{
var js，fjs=d.getElementsByTagName[0]；
if（d.getElementById（id））返回；
js=d.createElement；js.id=id；
js.src=“//connect.facebook.net/en_GB/all.js#xfbml=1&appId=1403512256546141”；
fjs.parentNode.insertBefore（js，fjs）；
}（文档“脚本”、“facebook jssdk”）；

但是如何在SPA的视野中做呢 它不包含html或body标记，只包含div

---

我在单页应用程序中使用durandal

我将脚本添加到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中调用它 作为

---

然后它会很好地工作，但也许它会帮助一些人。对我来说，在一个单页应用程序上呈现独特的fb注释的关键是

fb.XFBML.parse（）

每次我要呈现唯一的注释时：

更改url，每个fb评论线程都被分配到特定的url
因此，我可能有www.someurl.com/#123、www.someurl.com/#456、www.someurl.com/#789，每个都有自己的fb评论线程。在AngularJs中，这可以通过
$location.hash（'123'）完成

创建一个新的fb comments div，其中“number”等于“123”、“456”或“789”



调用执行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);
}


步骤3：让我的React应用程序变得更为友好（更为林特友好）：

只需添加
FB.XFBML.parse（）
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);
}

componentDidMount() {
    window.fbAsyncInit = () => {
        window.FB.init({
            appId: '572831199822299',
            xfbml: true,
            version: 'v4.0',
        });
    };

    (function (d, s, id) {
        const fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) { return; }
        const js = d.createElement(s);
        js.id = id;
        js.src = '//connect.facebook.net/ru_RU/sdk.js';
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    setTimeout(() => {
        window.FB.XFBML.parse();
    }, 100);
}