Javascript Facebook Api Login and Close Popup Refresh Parent Page

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 :)

Answer 2

you need the login to redirect to page will run window.close() and redirect the main page page to the page u want using window.parent

try to add the code to the page that the login is redirect to (inside the popup) window.parent.location ="www.pageafterlogin"; window.close();

im currently writting it from my mobile phone so it a bit hard but that supposed to do the trick. if not i will try to rewrite it tomorrow.