How to visualize "Continue as X" Facebook like Pinterest

Question

How can I tell Facebook to upload a login button that displays a signed user profile picture, such as Pinterest?

Someone else asked this question, Facebook, like Pinterest style , but the answer is hacked. If you replace Pinterest app_id with your own, leaving everything else unchanged, you will again receive another login button. Did Pinterest get special private access to this cool feature?

The only relevant code that I found that Pinterest does is the javascript UnauthHomereactPage 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, my button is just regular:

URL- iframe , , " https://www.facebook.com/plugins" Pinterest " https://www.facebook.com/v2.7/plugins", app_id, domain origin - .

?

Answer 1

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

Hide result