Facebook 评论加载与 Angular Fullstack 不一致答案

【问题标题】：Facebook comments load inconsistently with Angular FullstackFacebook 评论加载与 Angular Fullstack 不一致
【发布时间】：2016-03-23 19:59:48
【问题描述】：

我在博客文章页面上实现了 FB cmets 和 FB 分享按钮。我第一次访问我的博客文章页面时，FB cmets 很少加载。当我刷新页面时，会发生以下五件事之一：1）页面加载时没有 cmets（大部分时间）； 2) 页面加载 cmets； 3)出现FB未定义；偶尔我会得到 4) init not call with valid version。如果我快速刷新两次，有时页面根本不会刷新，只会返回一个空白页面。为了寻找这个解决方案，我查看了几乎所有与本次演讲相关的堆栈溢出帖子，包括： facebook comments plugin showing only after refresh

我不知道 turbolink 是什么，但我认为它与 RoR 有关，这是一个 Angular Fullstack 项目。在我的 index.html 中：

<body ng-app="theApp">   
    <div id="fb-root"></div>
    <script>

        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'MyApp',
            xfbml      : true,
            version    : 'v2.5'
          });
        };

        (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 = "https://connect.facebook.net/en_US/sdk.js";
           fjs.parentNode.insertBefore(js, fjs);
         }(document, 'script', 'facebook-jssdk'));
    </script>

在我的 cmets.html 上：

<div class="fb-comments" data-href={{webAddress}} data-width="100%" data-numposts="10"></div>

在我的 cmets.controller 上：

angular.element(document).ready(function() {
      FB.XFBML.parse();
   });

此解决方案使我的 FB 分享按钮在没有刷新的情况下出现（我最近的问题），但它让我的 cmets 直到再次刷新后才出现。

【问题讨论】：

标签： javascript angularjs facebook

【解决方案1】：

经过多次实验，我终于让 cmets 在第一页加载时出现。有一个滞后问题，如果我转到另一个页面（例如我们的社交媒体）然后快速按退格键，它会显示“FB 未定义”。任何留下更好答案的人都会获得奖励积分。这是我发现的第一次加载页面的代码：

我的 index.html：

<body ng-app="theApp">   
    <div id="fb-root"></div>
    <script>

    window.fbAsyncInit = function() {
      FB.init({
        appId      : 'MyApp',
        xfbml      : false, //this was true before,
        version    : 'v2.5'
      });
    };

    (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 = "https://connect.facebook.net/en_US/sdk.js";
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
</script>

我的 cmets.html：

<script>
  FB.XFBML.parse();
</script>
<div class="fb-comments" data-href={{webAddress}} data-width="100%" data-numposts="10"></div>

我的 cmets.controller.js：

angular.element(document).ready(function() {
      FB.XFBML.parse();
   });

我很高兴它“有效”，但考虑到 cmets.html 和 cmets.controller.js 中 FB.XFBML.parse() 的冗余以及当您在转到另一个页面后回击时页面会崩溃的事实页面快我发现自己不满意。如果有人有更好的答案，我很乐意听到。

【讨论】：

【解决方案2】：

我更简单地解决了这个问题。我的 index.html

<div id="fb-root"></div>
<script
  async
  defer
  crossorigin="anonymous"
  src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v9.0"
  nonce="XgepUhS8"
>

</script>

reviews.html

  <div
    class="fb-comments"
    [attr.data-href]="url"
    data-width="100%"
    data-numposts="5"
  ></div>

在reviews.ts 文件中

declare var FB: any;
ngOnInit(): void {
    FB.XFBML.parse();
}

【讨论】：