41

This is the info on Facebook Login button

http://developers.facebook.com/docs/guides/web/

So it will render a Login button, and a user can click on it to log in on Facebook (a log in window will pop up) But after the user logs in, even though the Like or Share buttons work now, but the Log in button still shows.

1) Is there a way to redirect to a URL after the user successfully logs in?
2) Another way is to dynamically change the Log in button to invisible or better yet, show it as "Logged in as [Peter (username)]"

How can (1) and/or (2) be done? (I don't see a callback URL in the Facebook app setting and also the redirection may need to go to different URL from page A or page B on the website)

Update: I found some info about <fb:login-button on-login="top.location = '...'; "> but I see some website doing the redirect but there is no on-login='...'

1
  • 5
    I too am perplexed by this. Also, why cant the plugin for fb:login-button not be smart enough to become a logout if the user is logged in. Confusing is not the word here. I cant see a single use case where a logged in user should see "login".
    – RichieHH
    May 19, 2011 at 13:03

2 Answers 2

38

1) You can also redirect on login using some code like this (note the auth.login event):

 <script src="http://connect.facebook.net/en_US/all.js">
  </script>
  <script>
      FB.init({
          appId: '??????????????', cookie: true,
          status: true, xfbml: true
      });
      FB.Event.subscribe('auth.login', function () {
          window.location = "http://example.com";
      });
  </script>
  <fb:login-button>
     Login with Facebook
  </fb:login-button>

2) To determine whether to show or hide the login button, you can use FB.getLoginStatus to discover whether the user is logged in. The following page might be of use: http://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus/

2
  • I thought I can do this only using the PHP SDK, but I had to integrate the JS SDK too and use this... and it works nicely. Also today.
    – SebiF
    Jan 18, 2013 at 19:37
  • with auth.login event subscribed, you have to also determine whether login is successful. In the answer's code, the user will be fowarded to example.com no matter login is successful or not.
    – Raptor
    Feb 9, 2013 at 12:21
2

FBML option: This should give you the functionality you want (with xfbml:true in FB.init):

<fb:login-button autologoutlink="true" onlogin="OnRequestPermission();">
</fb:login-button>

When the user is logged in, it changes to "Log Out." Also, if the user has not granted permissions to the app, it pops-up the request permission dialog.

Custom option: If you don't like using FBML, you can make your own Facebook login button like this:

HTML:

<button id="THE_BUTTON">Login</button>

Javascript:

FB.init({appId: 'YourAPPID', status: true, cookie: true, xfbml: true, oauth : true});
FB.getLoginStatus(function(response) {
    if (response.status.toString().indexOf("connected")>-1) {
        initAll(); //User is connected and granted permissions
        FB.api("/me", function (response) {
            document.getElementbyId("THE_BUTTON").value = 
                                            "Logged in as " + response.name;
        });
    } else { 
        // This URL is specially formed to ask permissions for your app. You change the 
        // permissions and your appID
        //redirect_uri = Change this to your desired callback URL
        top.location=window.location="http://www.facebook.com/dialog/oauth/?scope=read_stream,publish_stream,friends_photos,friends_activities&client_id="yourAPPID(nobrackets)"&redirect_uri=http://apps.facebook.com/filtered_feed/&response_type=code";
    }
});

So if the user is logged in, the button will be replaced with "Logged in as user's name." Otherwise, the OAuth Dialog will appear.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.