Back to News for Developers

How-to: Improve the Experience for Returning Users

May 8, 2012ByConstantin Koumouzelis

When you visit many popular websites, they’ll check to see if you’re still signed from a previous session. If you are, they’ll skip the sign-in page and let you immediately see personalized content – your inbox, your favorite news sources, or your friends’ activity.

If you’ve integrated Facebook Login on your website, you can give returning users a similar, streamlined experience. People won’t have to see the logged-out version of your site and won’t waste time signing-in. By automatically determining if a user is signed-in to Facebook, you can let returning users immediately start engaging with your site.

One of the easiest ways to do this is to use the JavaScript SDK and the FB.getLoginStatus call to detect whether a visitor is signed-in to Facebook and has previously registered for your website. If FB.getLoginStatus returns response.status == ‘connected’, this indicates that the user has already authorized your website using Facebook Login, and you can retrieve their User Access Token from the ‘response’ object with response.authResponse.accessToken. To give your users the best experience, we recommend calling FB.getLoginStatus on all your landing pages to detect users' Facebook Login state on load.

Here’s a working example:

<!DOCTYPE html>

<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- Load the Facebook JavaScript SDK -->
    <div id="fb-root"></div>
    <script src="//connect.facebook.net/en_US/all.js"></script>
    
    <script type="text/javascript">
      
      // Initialize the Facebook JavaScript SDK
      FB.init({
        appId: 'APP_ID',
        xfbml: true,
        status: true,
        cookie: true,
      });
      
      // Check if the current user is logged in and has authorized the app
      FB.getLoginStatus(checkLoginStatus);
      
      // Login in the current user via Facebook and ask for email permission
      function authUser() {
        FB.login(checkLoginStatus, {scope:'email'});
      }
      
      // Check the result of the user status and display login button if necessary
      function checkLoginStatus(response) {
        if(response && response.status == 'connected') {
          alert('User is authorized');
          
          // Hide the login button
          document.getElementById('loginButton').style.display = 'none';
          
          // Now Personalize the User Experience
          console.log('Access Token: ' + response.authResponse.accessToken);
        } else {
          alert('User is not authorized');
          
          // Display the login button
          document.getElementById('loginButton').style.display = 'block';
        }
      }
    </script>
    
    <input id="loginButton" type="button" value="Login!" onclick="authUser();" />
  </body>
</html>

The ability to call FB.getLoginStatus using the JavaScript SDK isn’t new, but we encourage developers to use it to create a more personalized user experience and increase their engagement metrics. TripAdvisor and The Huffington Post both do this today, and they’ve found that logged-in users are more valuable than logged-out users:

  • TripAdvisor: Logged-in Facebook users are 27% more engaged in the site and 2x more likely to contribute content than the average TripAdvisor user.
  • The Huffington Post: People who are logged-in with Facebook do 22% more pageviews and spend 8 minutes longer on the site than their average reader.

Using FB.getLoginStatus is an easy way to immediately make your site more engaging and provide a better experience for returning users. Learn more about client-side authentication and FB.getLoginStatus.


Tags: