Facebook Login Popup Box Blank

Question

After making a quick static landing page we noticed that the facebook login does not work. It simply pops open a box and then automatically redirects before being allowed to sign in or decline.

Please have a look at http://www.gemroc.com/landing/index.html

That is our landing page. You can see the issue I am having there.

Again, we copied over the fb source code into this page. I am guessing that is where the issue is.

Here is what I suspect may be the cause since it was copied from the source code.

<script type="text/javascript">     
(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 = "https://connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    }(document));

window.fbAsyncInit = function() {
    FB.init({
        appId      : 'OurAppID', 
        status     : true, 
        cookie     : true,
        xfbml      : true  
    }); 
    Event.observe(window, 'load', function() {
        Event.fire(document, 'fbinit:ready',{});
    });
};  
</script>
<script type="text/javascript">
Event.observe(document, 'fbinit:ready', function(event){
    mpFBConnect.init("https://www.facebook.com/dialog/oauth?client_id=430913623675901&redirect_uri=http%3A%2F%2Fwww.gemroc.com%2Ffacebookconnect%2Flogin%2F&state=a728aaf88633a0e24b793630a1b01194&scope=email%2Cpublish_stream&display=popup");
});

mpFBConnect.facebookconnectform = '<form id="facebookconnectform" method="post" action="https://www.gemroc.com/facebookconnect/login/">' +
    '<input type="hidden" name="return" value="aHR0cDovL3d3dy5qamV3ZWwuY29tLw==" />' +
    '<input type="hidden" name="fbconnecttype" value="form" />' +
    '</form>';
</script>

Answer 1

Have you created an app with Facebook over at developer.facebook.com and entered your app ID and secret keys into your script?

Also don't forget to change your URL from test to development server - I've been caught out with that once

Edit

It looks like you've just copied and pasted the output HTML by right-clicking and going to view source. This isn't the same as on run time, the snippet will be created with some more information.

Hunt down the code in the generating file and use that instead

Answer 2

You to make such complex flow if you can do the Facebook Login in a very simple and the preferred way?

In window.fbAsyncInit, just after the FB.init code, write this-

FB.login(function(response) {
   if (response.authResponse) {
       // The person logged into your app
   } else {
       // The person cancelled the login dialog
   }
});

that's it. And if you don't even want to call login each time, and automatically login the user if in the session, you can use the code here: https://developers.facebook.com/docs/facebook-login/login-flow-for-web/