Search code examples
javascriptfacebookfacebook-graph-apifacebook-comments

Facebook Comment plugin is stuck perpetually loading -- is it Facebook or my code?

I am embedding Facebook Comment plugin on our site and for some reason the comment plugin is stuck in a perpetually loading sate like follows:

Facebook comment plugin perpetual load

I'm not sure if it's a Facebook problem or my code. Here's what I have right after the opening <body> tag:

<div id="fb-root"></div>
<script>
   window.fbAsyncInit = function () {
      FB.init({ appId: '1234567890', cookie: true, oauth: true });
   };
   (function (d) {
      var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
      if (d.getElementById(id)) { return; }
      js = d.createElement('script'); js.id = id; js.async = true;
      js.src = "//connect.facebook.net/en_US/all.js";
      ref.parentNode.insertBefore(js, ref);
   } (document));
</script>

(1234567890 is where my actual appID is)

On the page where I want to show the Facebook comment plugin I have this:

<div class="fb-comments" data-href="http://mydomain.com" 
     data-num-posts="2" data-width="580"></div>

As far as I can tell this should all work. However, I've seen no mention of any FB bugs regarding this, nor do I see problems on other sites. So I guess it's my code?

I've even tried using the exact code given by the code generator on the FB developers site:

<div id="fb-root"></div>
<script>
    (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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=1234567890";
       fjs.parentNode.insertBefore(js, fjs);
    } (document, 'script', 'facebook-jssdk'));
</script>

Unfortunately this doesn't work either.

Would love some help pointing me in the right direction!

Update: I've tried just placing my AppID in this fiddle (http://jsfiddle.net/Rw79Q/) and it works. So there is something in my code causing the issue. No idea what it could be and I can't share my entire code here.

Solution 
  • window.fbAsyncInit = function () {
   ({ appId: '1234567890', cookie: true, oauth: true });
};

    Isn't the body of that function actually supposed to be an argument? ({ appId: '1234567890', cookie: true, oauth: true }); in a function body creates an object literal and then does nothing with it. This is equivalent to writing:

    window.fbAsyncInit = function () {};

    Which is useless.

    The rest of your code looks like it works, but I don't have a valid app ID / domain on hand to test with at the moment. Drop your app ID and domain in this fiddle and see if it works: http://jsfiddle.net/Rw79Q/

    From the chat discussion, it looks like the page has to be on a live server, otherwise you get the "infinite loading" behavior. I was able to recreate the behavior using a local file: URI. Hopefully the issue will go away once you push this to production.