php - Facebook login using Javascript -

i'm going insane!

i have been trying facebook login pop appear on website using facebook javascript api.

i've followed tutorial multiple times login not appear in pop , if follow login process through ens logging me in , not redirecting me website. once i'm @ site i'm logged in , works fine.

i have tried multiple variations of below code (too many write them all):

    <script>   window.fbasyncinit = function() {     fb.init({       appid      : '123456789012345',       status     : true,       xfbml      : true,       version    : 'v2.4'     });      fb.getloginstatus(function(response) {         if (response.status === 'connected') {             console.log('logged in.');             showlogoutoption(); // shows logout option         }         else {             showloginoption(); // shows login option             console.log('not logged in');         }     });       $('#loginoption').click(function() {         fb.login(); // when login option clicked -> login             });    };    (function(d, s, id){      var js, fjs = d.getelementsbytagname(s)[0];      if (d.getelementbyid(id)) {return;}      js = d.createelement(s); js.id = id;      js.src = "//connect.facebook.net/en_us/sdk.js";      fjs.parentnode.insertbefore(js, fjs);    }(document, 'script', 'facebook-jssdk')); </script> 

i've used code under quickstart here.

so can login, , can access fb graph api , pull data, , can logout. can't have login provides customer experience.

note: using firefox (have tried on chrome flashes dialog box disappears again, logging user in not refreshing page).

if need more information please let me know.

try example:

(function(win, doc) {   var declined_perms = [];   var permissions = ['email', 'user_friends', 'user_photos', 'publish_actions'];   var app_id = 'your api key';   win.fbasyncinit = function() {     fb.init({       appid: app_id,       xfbml: true,       cookie: true,       status: true,       version: 'v2.0'     });     afterfbasynloaded();   };   (function(d, s, id) {     var js, fjs = d.getelementsbytagname(s)[0];     if (d.getelementbyid(id)) {       return;     }     js = d.createelement(s);     js.id = id;     js.src = "//connect.facebook.net/en_us/sdk.js";     fjs.parentnode.insertbefore(js, fjs);   }(doc, 'script', 'facebook-jssdk'));   var afterloginbtnclick = function() {     fb.login(function(response) {       afterloginstatus(response);     }, {       scope: permissions.join()     });   };   var afterloginbtnreauthclick = function() {     fb.login(function(response) {       afterloginstatus(response);     }, {       scope: declined_perms.join(),       auth_type: 'rerequest'     });   };   var hideall = function() {     $("#loginsection").fadeout("fast");     $("#loginsectionreauth").fadeout("fast");   };   var afterfbasynloaded = function() {     fb.getloginstatus(function(response) {       afterloginstatus(response);     });     $("#login_btn").on("click", function() {       afterloginbtnclick();     });     $("#login_btnreauth").on("click", function() {       afterloginbtnreauthclick();     });   };   var afterloginstatus = function(response) {     var res = response.status;     if (res == 'connected') {       $("#loader").fadein("fast", function() {         declined_perms.length = 0;         fb.api('/me/permissions', function(response) {           (var = 0; < response.data.length; i++) {             if (response.data[i].status == 'declined') {               declined_perms.push(response.data[i].permission);             }           }           if (declined_perms.length) {             hideall();             $("#loader").fadeout("fast", function() {               $("#loginsectionreauth").fadein("fast");             });           } else {             var query = "select uid,name,first_name,contact_email,name,last_name,email user uid=me()";             fb.api({                 method: 'fql.query',                 query: query               },               function(res) {                 var res2 = res[0];                 var full_name = res2['name'];                 var first_name = res2['first_name'];                 var last_name = res2['last_name'];                 var email = res2['contact_email'];                 var fb_id = res2['uid'];                 var data = {                   name: full_name,                   first_name: first_name,                   last_name: last_name,                   email: email,                   fb_id: fb_id                 };                 $.ajax({                     url: "services/insertuserdata.php",                     datatype: "json",                     type: "post",                     data: data                   })                   .done(function(data) {                     var response = makeobject(data);                     if (response['response'] == "success") {                       //data inserted                     } else {                       //error api                     }                   })                   .error(function(jqxhr, exception) {                     //error                   });               });           }         });       });     } else {       hideall();       $("#loginsection").fadein("fast");     }   }; })(window, document); 

$("#loginsection") login button container

$("#loginsectionreauth") login re-auth container, suppose user logged in has not authorised app permissions

$("#login_btn") login button

$("#login_btnreauth") re-authorization login button

$("#loader") loader element

i hope helps !!!

plunker here