1

I have FB comments and the FB share button implemented on a blog post page. The FB comments rarely load the first time I come to my blog post page. When I refresh the page one of five things happen: 1) the page loads without comments (most of the time); 2) the page loads with comments; 3)FB is not defined appears; and once in a while I get 4) init not called with valid version. If I refresh twice quickly sometimes the page won't refresh at all and will just return a blank page. In search of this solution I looked at pretty much all of the posts on stack overflow related to this talk including: facebook comments plugin showing only after refresh

I don't know what turbolinks are but I think it has something to do with RoR and this is an Angular Fullstack project. In my 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>

On my comments.html:

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

On my comments.controller:

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

This solution makes my FB share button come up without a refresh (my most recent issue) but it leaves me without my comments appearing until after an additional refresh.

2 Answers 2

1

After several more experiments I finally got the comments to come up on the first page load. There is a lagging issue where if I go to another page (like our social media) then hit backspace quickly it says "FB is not defined". Bonus points for anyone that leaves a better answer. Here is the code that I found that got the page loading the first time:

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

My comments.html:

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

My comments.controller.js:

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

I'm glad it 'works' but given the redundancy of FB.XFBML.parse() in the comments.html and comments.controller.js and the fact that the page will crashes when you hit back after going to another page to fast I find myself unsatisfied. If someone has a better answer, I'd love to hear it.

0

I solved this issue more simply. My 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>

and in reviews.ts file

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

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.