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.
See Question&Answers more detail:os
