Login Button

The Login button is a simple way to trigger the Facebook Login process on your website or web app.

If someone hasn't logged into your app yet, they'll see this button, and clicking it will open a Login dialog, starting the login flow. People who have already logged in won't see any button, or you can also choose to show a logout button to them.

If you show a logout button, when people use it to log out, they log out both from your app and from Facebook.

The Login button is only designed to work in connection with the JavaScript SDK — if you're building a mobile app or can't use our JavaScript SDK, you should follow the login flow guide for that type of app instead.

The Continue with Facebook button replaces earlier versions of the Login button. For more information, see Migration.

Plugin Configurator

Continue as {Name} Button

The Continue as {Name} button has the text "Continue as {persons' name}" and optionally includes the person's Facebook profile picture if they're logged in to Facebook in the same browser. To use the Continue as {Name} button, you must first load the JavaScript SDK. For instructions on setting up the JavaScript SDK, see the JavaScript SDK Quickstart. Enable Continue as {Name} by adding data-use-continue-as="true" to the settings for your button.

The height of the Continue as {Name} button is not customizable.

If the you select a size beyond the maximum parameters, the button will default to the maximum width.

Best Practices for the Continue as {Name} Button

The Continue As {Name} button can be a great way to increase clicks and engagement. It lets the user see their profile picture and name on our Login button and can help make your app feel more personalized.

As a result, it can also be confusing if the user isn't expecting to see their name and profile photo in this context. Please consider the following to see if Continue As is best for your app.

Even if the Continue As {Name} is not right for your app, you can still try the new JavaScript SDK buttons that say "Continue With Facebook".

Suggested Use Cases

We serve a global user base and different regions have different user expectations. Be respectful of those expectations when using this button.

Best when

• Your app is social:
  When people are using social apps, they expect to connect with others. We have seen Continue As {Name} perform well in these cases.

• People in the target market share phones:
  When multiple people are using the same phone, Continue As {Name} can give them reassurance that they are using the right account.

Avoid when

• Your app is new:
  If your app is new to market, your users may be more likely to be confused about why their name and profile photo are showing automatically, versus an established or familiar app users plan to use on a regular basis.

• People in the target market are concerned about privacy:
  In many countries, profile images are considered very private. You may want to avoid using Continue As {Name} in this case as it will show the profile image of the person logging in.

Login Button Best Practices

Please follow the general Best Practices for using Facebook Login. It is particularly important to follow these two best practices when using Continue As {Name}:

• Provide a way to log out (required by policy)
• Test and Measure — Identify what impact this is having on user perceptions and conversion

Some other possible best practices:

• Be clear about what Logging in Does
• Use a placeholder/spinner while the Login button is loading and remove it when button is loaded. An example of such code:

<script>
var finished_rendering = function() {
  console.log("finished rendering plugins");
  var spinner = document.getElementById("spinner");
  spinner.removeAttribute("style");
  spinner.removeChild(spinner.childNodes[0]);
}
FB.Event.subscribe('xfbml.render', finished_rendering);
</script>
<div id="spinner"
    style="
        background: #4267b2;
        border-radius: 5px;
        color: white;
        height: 40px;
        text-align: center;
        width: 250px;">
    Loading
    <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="large"
    data-button-type="continue_with"
    data-use-continue-as="true"
    ></div>
</div>

Settings

In addition to the settings above, you can also change the following:

Migration

Old buttons will be migrated to the new buttons. The following table shows the mapping.

The new Continue as {Name} buttons have a parameter called button_type, which the old buttons do not require. This is how you specify either the Continue with Facebook or Log in with Facebook buttons. If you don't specify a button type, the button is rendered as the new small button. This size is medium compared to the old buttons. For the x-large case, it will shrink down a bit slightly. If you do specify the button_type parameter, your buttons will appear as specified.

You can cause the buttons to load more quickly by launching the JavaScript SDK as soon as possible. However, the system can't load the buttons until the webpage and JavaScript have finished loading, then it can create the iframe and load up the resources to render the button.

 <div
    class="fb-login-button"
    data-max-rows="1"
    data-size="<medium, large>"
    data-button-type="continue_with"
    data-width="<100% or px>"
    data-scope="<comma separated list of permissions, e.g. public_profile, email>"
></div>
}

Localization:

Loading a button in a different locale requires the JavaScript SDK for that locale to be loaded. For more information on localizing the JavaScript SDK, see Localization with Social Plugins and JavaScript SDK.

FAQs

How do I use this to log users in?

Once someone has clicked the Login button, and accepted the login dialog — completing the Login flow — your app can now use the Facebook SDK for JavaScript to make API calls on behalf of that person.

There is no extra setup required here, however you can use the onlogin setting in the button to trigger your own JavaScript function that will run upon login.

Can I use the Login button with server-side registration code?

You can, however you will still need to use the JavaScript SDK partially. Once the login process started by clicking on the button is done, the SDK will have access to an authResponse object using FB.getLoginStatus(). You can use this function to pass the response object to your server-side code to complete any registration that exists there.

Can I use the Login button to re-request a permission that a person has declined?

The Login button doesn't support re-requests because asking for declined permissions doesn't fit the verbage on the button. If you need to re-request a permission, set up a custom button and use FB.login() as described in the Facebook Login for the Web documentation.

The button isn't rendering.

The <div> tags are transformed into rendered buttons using a technology we call XFBML, which relies on JavaScript in the SDK to parse the page and make replacements. If you are dynamically modifying page content to add these divs after the SDK init method has run, (e.g. in a dynamically constructed dialog) you need to call FB.XFBML.parse() again in order for the transformation to be effected.