Login 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.

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

• 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>

 <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>
}