Facebook Kommentare laden inkonsistent mit Angular Fullstack

Ich habe FB-Kommentare und die FB Share-Taste auf einer Blog-Post-Seite implementiert. Die FB-Kommentare laden nur selten beim ersten Mal auf meine Blog-Post-Seite. Wenn ich die Seite aktualisiere, passiert eines von fünf Dingen: 1) die Seite lädt ohne Kommentare (meistens); 2) die Seite lädt mit Kommentaren; 3) FB ist nicht definiert erscheint; und ab und zu bekomme ich 4) init nicht mit gültiger version aufgerufen. Wenn ich zweimal schnell auffrische, wird die Seite überhaupt nicht aktualisiert und gibt nur eine leere Seite zurück. Auf der Suche nach dieser Lösung, die ich bei so ziemlich alle sah des Pfostens auf Stack-Überlauf zu diesem Vortrag im Zusammenhang mit: facebook comments plugin showing only after refresh Facebook Kommentare laden inkonsistent mit Angular Fullstack

Ich weiß nicht, was turbolinks ist, aber ich denke, es ist etwas mit RoR zu tun hat, und das ist ein angulares Fullstack-Projekt. In meinem 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>

Auf meinem comments.html:

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

Auf meinem comments.controller:

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

Diese Lösung meine FB Share-Taste ohne kommen macht Aktualisieren (mein aktuellstes Problem), aber es lässt mich ohne meine Kommentare erscheinen, bis nach einer zusätzlichen Aktualisierung.

Quelle

2016-03-23 rashadb

Nach mehreren weiteren Experimenten bekam ich endlich die Kommentare auf der ersten Seite geladen. Wenn ich auf eine andere Seite gehe (wie unsere Social Media) und dann schnell zurück geht, heißt es "FB ist nicht definiert". Bonuspunkte für alle, die eine bessere Antwort hinterlassen. Hier ist der Code, den ich fand, dass das Laden der Seite das erste Mal bekam:

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

Mein comments.html:

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

Mein comments.controller.js :

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

ich bin froh, dass es 'funktioniert', aber die Redundanz von FB.XFBML.parse() in der comments.html und comm gegeben ents.controller.js und die Tatsache, dass die Seite abstürzt, wenn man nach dem Zurückgehen auf eine andere Seite zurückkommt, finde ich unbefriedigt. Wenn jemand eine bessere Antwort hat, würde ich es gerne hören.

Quelle

2016-03-24 16:17:29 rashadb

Facebook Kommentare laden inkonsistent mit Angular Fullstack

Antwort

Verwandte Themen