Question

I am using the FB Registration Widget on our website.

Our site lets people customize the url of their page on our site via registering a CNAME, so a page can either be accessed like this:

http://www.example.com/foo
or
foo.mysite.com/

When I embed the Facebook Registration Widget and I hit it via the canonical domain (www.example.com):

1. The blue Facebook Loading progress bars appear [] [] [] … for a couple seconds then…
2. The registration widget appears

This is expected — all is fine.

I see a message in the console:

The "fb-root" div has not been created, auto-creating  all.js (line 30)

But thats the only strangeness.

example.com is defined in my FB App as “app domains” (example.com), and under “Website with Facebook Login” in the “Site Url” field, it is set to http://www.example.com.

The problem occurs when the widget is instead embedded on foo.mysite.com. The FB app settings are the same as mentioned above. The behaviour is almost the same as mentioned above, except after step #2 (The registration widget appears), you can still see the loading progress bars in the background.

As before I still get this message in the console:

The "fb-root" div has not been created, auto-creating  all.js (line 30)

Regardless of this “phantom” loading bar animation, The widget itself works fine, it pulls the data from Facebook correctly, the redirect-uri is working fine (it posts to the redirect-uri as expected when clicked, with valid signed data).

Any idea whats causing this an how to fix it?

BTW,

<script src="http://connect.facebook.net/en_US/all.js#appId=xxxxx&xfbml=1">

and

<fb:registration fields="name,email" redirect-uri=http://foo.mysite.com/fb_registration?origin=http://foo.mysite.com/stuff&id=42cc fb_only="false" width="300">    </fb:registration>

Are the only pieces of code in play when these issues are happening (when working correctly or incorrectly).

UPDATE:

Running

$(".FB_Loader").hide()

“fixes” the issue. But if anyone knows what sort of cross-domain stuff may be occuring to cause this bug, it would be much appreciated.

Answer 1

The following message:

The "fb-root" div has not been created, auto-creating  all.js (line 30)

is irrelevant. The JS SDK requires this div but will create it automatically if it doesn’t exist already.