Facebook Connect Login Button breaks when presented in iFrame

I have a Facebook Login button setup on a test page which allows FB users to connect w/ my application:

<fb:login-button show-faces="true" width="200" max-rows="1" perms="use开发者_如何转开发r_photos"></fb:login-button>

It works fine if I go to to it directly in a web browser. (e.g. mysiteDOTcom/facebook_login).

If I put the same code (along w/ the FB.init , xmlns:fb= etc.) on a different page in the same domain, it also works.

The problem comes if I have a javascript overlay and within that overlay there's an iFrame which contains mysiteDOTcom/facebook_login

In this case, the login button only shows as a blue "Facebook" rectangle, and if I click on this rectangle, I receive the following error:

"An invalid api key was specified."

Since I'm in a dev environment, I've added entries in my /etc/hosts file to redirect to my local box. For example, normally I'd hit production machines when I go to wwwDOTmysiteDOTcom/ , but now http://wwwDOTmysitedevDOTcom (only defined locally) is what is returned. Obviously I couldn't specify wwwDOTmysitedevDOTcom in the facebook configuration b/c it's internal only, so FB wouldn't be able to find it.