Facebook评论加载与Angular Fullstack不一致

Facebook comments load inconsistently with Angular Fullstack

本文关键字：Fullstack 不一致 Angular 评论 加载 Facebook      更新时间：2023-09-26

我在博客页面上实现了FB评论和FB共享按钮。当我第一次来到我的博客页面时，FB评论很少加载。当我刷新页面时，会发生五件事之一：1）页面加载时没有评论（大多数时候）；2） 页面加载了评论；3） FB未定义出现；偶尔我会发现init没有被有效版本调用。如果我快速刷新两次，有时页面根本不会刷新，只会返回一个空白页面。在寻找这个解决方案的过程中，我查看了几乎所有与本次演讲相关的关于堆栈溢出的帖子，包括：facebook评论插件只在刷新后显示

我不知道涡轮链接是什么，但我认为这与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>

在我的评论.html：

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

在我的评论上。控制器：

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

这个解决方案让我的FB共享按钮在没有刷新的情况下出现（我最近的一期），但它让我在额外刷新之前没有评论出现。

经过几次实验，我终于在第一次加载页面时得到了评论。有一个滞后的问题，如果我转到另一个页面（比如我们的社交媒体），然后快速返回，它会说"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>

我的评论.html：

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

我的评论.controller.js:

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

我很高兴它"有效"，但考虑到comments.html和comments.controller.js中FB.XFBML.parse（）的冗余，以及当你在快速访问另一个页面后进行反击时页面会崩溃的事实，我发现自己很不满意。如果有人有更好的答案，我很乐意听到。

我更简单地解决了这个问题。我的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();
}
相关文章：