views:

45

answers:

1

I have a Facebook Login Button on a login.php page on my website, and when its there it works like it should. But for some reason when I have a click on a link to this login.php the button doesn't appear. When I refresh the page, the button pops up. When I manually go to login.php the button appears every time.

This seems to only happen in Firefox (mac), I can't replicate the issue in Chrome. Firebug gives me this error, but it shows up even when the button loads:

document.getElementById("fb-root") is null

My Button rendering code looks like this:

<fb:login-button onclick="trainer()" perms="read_stream,email,publish_stream,offline_access,user_checkins,friends_checkins"></fb:login-button>
<div id="fb-root"> </div>

I have the FB.init code inside a script tag AFTER the body tag.

UPDATE: I've actually just confirmed that the same error pops up in IE8 on Windows.

Any advice could help thank you!

+1  A: 

You might review a post by Gil Goldshlager to see if you have everything set up correctly.

One thing he points out is that you have to have your html tag set up correctly as follows:

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml" xml:lang="en" lang="en">
Chris Lively
If anybody is having this issue I have found the reason why it was doing this: I moved <div id="fb-root"> </div> above the <script> which contained by FB.init() function, perhaps the browser didn't think it existed because it hadn't rendered the full page yet (maybe)? In any case, this did work, also make sure you put the div and the script after the body tag, thanks for the link Chris!
Pete Herbert Penito
@Pete: glad it helped.
Chris Lively