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.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
