Question

i want to make my facebook api login popup to close after user logs in, after user clicks the login with facebook image, popup opens succesfully and after user logs in the popup window, the popup still remains there and redirects to my website logged in succesfully, however, i want the popup closed after user logs in succesfully, and redirect the parent login page to main page.

Thank You,

Here is what i did :

Javascript Ones :

<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
    appId      : '<?php echo $_setting['facebook_api']; ?>',
    channelUrl : '//<?php echo $website; ?>/channel.html',
    status     : true,
    cookie     : true,
    xfbml      : true
});
 };



    (function(d) {
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
    }(document));
    </script>
<script type="text/javascript">

function popup(url)
{

 var width  = 600;
 var height = 400;
 var left   = (screen.width  - width)/2;
 var top    = (screen.height - height)/2;
 var params = 'width='+width+', height='+height;

 params += ', top='+top+', left='+left;
 params += ', directories=no';
 params += ', location=no';
 params += ', menubar=no';
 params += ', resizable=no';
 params += ', scrollbars=no';
 params += ', status=no';
 params += ', toolbar=no';

 newwin=window.open(url,'FB', params);
 opener.location.reload();
 if (window.focus) {newwin.focus()}

 return false;

 }

 </script>

The User Login Part :

<a href="javascript:void(0)"
onclick="popup('https://www.facebook.com/dialog/oauth?client_id=<?php echo $_setting['facebook_api']; ?>
&redirect_uri=<?php echo urlencode($website."/index.php"); ?>
&cancel_url=<?php echo urlencode($website."/register"); ?>
&scope=email')">
<img src="<?php echo $website; ?>/images/fb.png" /></a>

Answer 1

Simply output “window.parent.location =”www.pageafterlogin”; window.close();” in the child window didn’t work for me. I had to use an interval to check if the child window (popup) has been closed.

This is the functions I wrote to make it work (my login button is an anchor with a class set to “facebook_connect”):

$(document).ready(function() {
    initFacebookConnect();
});

var fbTimer, fbChildWindow;
function fbPolling() {
    if(fbChildWindow && fbChildWindow.closed) {
        // The popup has been closed, stop the timer and reload window.
        clearInterval(fbTimer);
        window.location.href = window.location.href;
    }
}
function initFacebookConnect() {
    $('a.facebook_connect').click(function(event) {
        event.preventDefault();

        var url = $(this).attr('href');
        fbChildWindow = window.open(url, 'Facebook', 'status=1, resizable=0');
        fbTimer = setInterval('fbPolling()', 1000);
    });
}

Inside the page Facebook redirects to (the redirect_uri page), I write:

<script>window.close();</script>

I hope this is useful for someone 🙂