FB comments and share doesn't load without page refresh

Question

I cut and paste the code generated by FB into my app as directed.

</head>
<script>
  window.fbAsyncInit = function() {
    FB.init({
      appId      : 'MyId',
      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>

<div class="fb-share-button" data-href={{webAddress}} data-layout="button_count"></div>

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

I tried putting the JS in the head as well as in different parts of my index.html but the share button and comments would appear without an additional refresh.

I had a similar problem with my LinkedIn button not showing up until after a refresh and I switched

<script src="https://platform.linkedin.com/in.js" type="text/javascript"> lang: en_US</script>

to

<script>
  delete IN;
  $.getScript("https://platform.linkedin.com/in.js")
</script>

and the problem is solved. Would a similar thing work for FB? If so how do I implement it?

I looked at this post, http://stackoverflow.com/questions/29133563/facebook-social-plug-in-not-showing-up-when-added-dynamically

focused on FB.XFBML.parse() but given the info on https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse

I don't know how to implement it and I don't think it's what will fix my problem because no information is coming from my server.

you don´t need FB.XFBML.parse in that case. are you trying without a webserver? — andyrandy, Mar 23 '16 at 14:08
@luschn I'm using express but I don't see how that's relevant. — rashadb, Mar 23 '16 at 14:34
opening the html file directly from your hdd is problematic sometimes. but you can (and should) omit "https" if you run it from a server anyway. — andyrandy, Mar 23 '16 at 15:16
@luschn I'm not opening the file from a hdd, it's all on the client. https or not doesn't influence anything. — rashadb, Mar 23 '16 at 15:53
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/107153/discussion-between-rashadb-and-luschn). — rashadb, Mar 23 '16 at 16:11
@luschn By the way, thanks for the help in the past! I'm using FB for a blog. When I click the link from the blog to the post nothing comes up in the JS console. After I refresh the button comes up along with the comments along with the message: Given URL is not allowed by the Application configuration: One or more of the given URLs is not allowed by the App's settings. It must match the Website URL or Canvas URL, or the domain must be a subdomain of one of the App's domains. But I know that's just a referral to me using localhost instead of doing it online — rashadb, Mar 23 '16 at 17:03
Whoever is out there - human time that could be moving on to fix the next problem is being wasted. I'm on my lonesome and this issue has taken 12 of my hours. Can someone please lend me a hand. I need a little more detail than I've been given so far. — rashadb, Mar 23 '16 at 19:23
i would recomend this solution. https://stackoverflow.com/a/65881437/11375670 — TheRanaEhtisham, Jan 25 '21 at 08:56

score 0 · Accepted Answer · edited Mar 30 '16 at 08:32

0

The code generated from the Twitter and FB share buttons belongs in the index.js file at the top of the <body> in an Angular Fullstack application. Then in the appropriate controller.js file put:

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

edited Mar 30 '16 at 08:32

Mr Lister

45,515
15
108
150

answered Mar 23 '16 at 19:45

rashadb

2,515
4
32
57

ok, you did not mention that you are using angular. in that case, the answer would have been clear from the beginning and of course you do need FB.XFBML.parse()... – andyrandy Mar 24 '16 at 08:19
@luschn, yes this works for the FB Share button, though the FB.XFBML.parse does not have to be inside that function, it can float inside the Angular function . . . Each page has both a share button and a comments section. The comments section will not load without a page refresh: http://stackoverflow.com/questions/36187606/facebook-comments-only-load-after-refresh-with-angular-fullstack – rashadb Mar 24 '16 at 08:25

FB comments and share doesn't load without page refresh

1 Answers1