How to render "Continue as X" Facebook login like Pinterest

Question

How can I tell Facebook to load a login button that shows the signed in user's profile picture, like Pinterest is doing?

Somebody else asked this question, Facebook login like Pinterest style, but the answer is a hack. If you replace Pinterest's app_id with your own, leaving everything else intact, you just get a regular login button again. Did Pinterest just get special private access to this cool feature?

The only relevant code I found that Pinterest is doing is from their UnauthHomereactPage javascript file. Mine was named "entryChunk-react-UnauthHomeReactPage-c85eaea8.js"

t.prototype.renderProfilePicButton = function P() {
        var e = this
          , t = '<div class="fb-login-button" data-scope="public_profile,email,user_likes,user_about_me,user_birthday,user_friends" onlogin="checkLoginState"></div>';
        return l["default"].createElement("div", {
            dangerouslySetInnerHTML: {
                __html: t
            },
            ref: function n(t) {
                e.profilePicButton = t
            },
            // This style just sets the height to 50px.
            style: R.fbProfileButton
        })
    }

and

FB.init({
    appId: f["default"].GEN.templateConst.settings.FACEBOOK_API_KEY,
    status: !0,
    xfbml: !0,
    version: "v2.7"
})

But when I try it, my button is just regular:

And the generated iframe URL is exactly the same except mine starts as "https://www.facebook.com/plugins" instead of Pinterest's "https://www.facebook.com/v2.7/plugins", and the app_id, domain, and origin are different.

Any ideas?

Answer 1

It's official now

(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.9&appId=286230584903471";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

<div id="fb-root"></div>
<div class="fb-login-button" data-max-rows="1" data-size="large" data-button-type="continue_with" data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="true"></div>