Question

我在博客帖子页面上实现了FB评论和FB分享按钮。 FB评论在我第一次来到我的博客帖子页面时很少加载。当我刷新页面时，会发生以下五种情况之一：1）页面加载时没有注释（大部分时间）; 2）页面加载注释; 3）FB未定义出现;并且偶尔我得到4）init没有使用有效版本调用。如果我快速刷新两次，有时页面根本不会刷新，只会返回一个空白页面。为了寻找这个解决方案，我查看了与此次演讲相关的堆栈溢出的几乎所有帖子，包括： facebook comments plugin showing only after refresh

我不知道什么是turbolinks，但我认为它与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>

在我的comments.html上：

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

在我的comments.controller上：

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

此解决方案使我的FB共享按钮出现时没有刷新（我最近的问题），但是在我再次刷新之前，我的注释没有出现。

Answer 1

经过几次实验后，我终于得到了第一页加载的评论。有一个滞后的问题，如果我去另一个页面（如我们的社交媒体）然后快速点击退格，它说“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>

我的评论：

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

我的comments.controller.js：

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

我很高兴它“有效”但是在comments.html和comments.controller.js中给出了FB.XFBML.parse（）的冗余，以及当你去另一个页面后回到页面时页面崩溃的事实页面到快我发现自己不满意。如果有人有更好的答案，我很乐意听到。

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

评论.html

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

<块引用>

在review.ts文件中

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

}

它会解决问题。

Facebook评论加载与Angular Fullstack不一致

2 个答案: