CODEWITHSUNDEEP
javascripthtmlfacebook-graph-apifacebook-javascript-sdk
TaLha Khan
TaLha Khan

Reputation: 2433

FB.Event.subscribe not working

I am working on a website and wanted to give my users an option to log-in using facebook.
I am successful at logging in but events are not working for me.

Whenever i logged in, the function "login" was not called.....I have tried assigning this login function to other button for checking it manually, the alert worked but it didnt get any response.

Here my Code:

<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
   FB.init({appId: MY_APP_ID, status: true, cookie: true, xfbml: true});

   FB.Event.subscribe('auth.login', function(response) {
      login();
     });
};

 function login(){
    FB.api('/me', function(response) {
   alert('You have successfully logged in, '+response.name+"!");
  }); 
 }

 (function() {
   var e = document.createElement('script');
   e.type = 'text/javascript';
   e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
   document.getElementById('fb-root').appendChild(e);
 }());     </script>

<fb:login-button autologoutlink='true'   
  perms='email,user_birthday,status_update,publish_stream'></fb:login-button>


This is the facebook application setting:
enter image description here

Upvotes: 3

Views: 5362

Answers (2)

ThePCWizard
ThePCWizard

Reputation: 3348

Scenario 1 (New User)

Facebook Login Button's Text: "Login"
User State: User not connected

Now user clicks on login and completes the login flow.

Button's text changes to "Log Out" and this is the only time when'auth.login' triggers.

FB.Event.subscribe('auth.login', function (response) {     
        // do something with response                   
        if (response.status === 'connected') {
            // user connected                        
            FB.api('/me', function (response) {
                alert(response.name + " " + response.id);
            });
        }
});

Scenario 2 (Existing User)

If a user who is logged in to Facebook and has already authorized your app visits your app then the user automatically get's connected and Login Button's text is "Log Out".
In this case add the following code into the fbAsyncInit function:

            FB.getLoginStatus(function (response) {
                if (response.status === 'connected') {
                    // connected
                    alert(response.name + " " + response.id);
                }
            });

FB.getLoginStatus is called everytime the page refreshes but you can also call it anytime in your app by embedding it into a javascript function.

Upvotes: 0

Ikmal Ezzani
Ikmal Ezzani

Reputation: 1283

Have you tried loading the all.js script in the <head> instead of #fb-root? Use the following:

  (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/es_LA/all.js";
     d.getElementsByTagName('head')[0].appendChild(js);
   }(document));

instead of:

 (function() {
   var e = document.createElement('script');
   e.type = 'text/javascript';
   e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    e.async = true;
   document.getElementById('fb-root').appendChild(e);
 }());

[EDIT: updated sample]

The SDK inserts elements into fb-root which expect to be positioned relative to the body or relative to an element close to the top of the page.

Which might replacing the SDK source as well.
resource: Facebook Javascript SDK.

--
can you try to subscribe to other event and see if its work

FB.Event.subscribe('auth.statusChange', function(response) {
  // do something with response
});

From Facebook documentation (try subscribing this instead)

auth.authResponseChange
This event is fired for any auth related change as they all affect the session: login, logout, session refresh. Sessions are refreshed over time as long as the user is active with your app.

auth.statusChange
Typically you will want to use the auth.authResponseChange event. But in rare cases, you want to distinguish between these three states:
1. Connected
2. Logged into Facebook but not connected with your application
3. Not logged into Facebook at all.

Upvotes: 1

Related Questions