facebookfbmlxfbmlfbjs

fb loading image not hiding

I have a vanilla implementation of the fb register button on my website, but the loading graphic will not hide..

    <fb:registration  scope="email,user_birthday,publish_stream" width="520"  fields="[
        {'name':'name'},
        {'name':'uname', description:'username', 'type':'text'}, 
        {'name':'email'}
    ]" redirect-uri="myDomain"></fb:registration>



    <script>
    window.fbAsyncInit = function() {
      FB.init({
        appId      : myAppId, // App ID
        channelUrl : '//myDomain/channel.html', // Channel File
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        xfbml      : true  // parse XFBML
      });

      // Additional initialization code here
    };


    // Load the SDK Asynchronously

    (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>
Solution

  • Seems to be a bug with the XFBML version of the registration plugin. Go with the iFrame version:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <div id="fb-root"></div>
    <script src="https://connect.facebook.net/en_US/all.js#appId=YOUR_APP_ID"></script>
      <iframe src="https://www.facebook.com/plugins/registration?
            client_id=YOUR_APP_ID&
            redirect_uri=https%3A%2F%2FYOUR_DOMAIN.com&
            fields=[
              {'name':'name'},
              {'name':'uname', 'description':'username', 'type':'text'}, 
              {'name':'email'}
            ]"
        scrolling="auto"
        frameborder="no"
        style="border:none"
        allowTransparency="true"
        height="520"
        width="520">
      </iframe>
  </body>
</html>