Facebook sign-in branding not compliant

[holtkamp]

Similar to #177,

just received an e-mail from Facebook:

Hi,

In working to create a great Platform experience for everyone, we ask developers to ensure the apps they build comply with our Platform Policies. Your app X (AppId: Y) doesn't comply with the following:

Platform Policy 8.3: Use a clearly branded "Login with Facebook" button and follow the Facebook Brand Guidelines: https://www.facebookbrand.com/.

Your Login button doesn't properly reference Facebook. To fix this issue, you should always use our official SDK for Login. For more information on Login best practices, check out the Login section of our developer documents: https://developers.facebook.com/docs/facebook-login/best-practices#buttondesign.

You can access the full list of our Platform Policies here: https://developers.facebook.com/policy/.

Please make the requested changes by <7 days later>.

Let us know when you've updated your app by replying to this email. If we do not hear back from you, your app will be subject to enforcement. If you have outstanding questions, respond here and we'll do our best to help.

Thanks,

When responding we use the "standard" https://github.com/lipis/bootstrap-social the response was:

Unfortunately, the button is not compliant with our Platform Policies. We would kindly ask you to use the button from https://developers.facebook.com/docs/facebook-login/best-practices#buttondesign , just to avoid any possible user confusion. We thank you for your understanding!

I also found:

https://developers.facebook.com/docs/facebook-login/userexperience#buttondesign which states:

• Color: Facebook blue; #4267B2
  • apparently, this component uses #3b5998:

    bootstrap-social/bootstrap-social.less

    Line 98 in 8f51880

    .btn-facebook { .btn-social(#3b5998); }

• Content: If you're using Facebook Login to enable account creation and login, recommended labels are "Continue with Facebook" or "Login with Facebook". We're heard from several partners that “Continue with Facebook” converts best, but this can vary based the context of the button.
  • to keep our button small (to allow for multiple OAuth buttons), we only use the label "Facebook".

I suggested that Facebook helps the community by contributing their suggested changes / improvements to this component...

Update
@lipis in a reply, the Facebook support team indicates that only having "Facebook" as content is not a problem. It is the "branding", so I guess mainly the background color. I can submit a pull request for the background color change, would that be considered for merge?

Update 2
In summary, the requested changes are:

• change background color from #3b5998 to #4267B2
• the "F" of Facebook should be aligned to be on the down-right side of the button, and not centered as currently done.

[holtkamp]

Disclaimer: I am not a designer, but for the time being the following workaround might be viable:

.btn-social.btn-facebook {
    background-color: #4267B2;
}
.btn-social.btn-facebook > :first-child {
    color: #4267B2;
    background-color: white;
    border-radius: 1px;
    text-align: right;
    margin: 4px;
    border-right: none;
    width: 24px;
    padding-right: 2px;
    padding-top: 3px;
    line-height: normal;
}

• Left: Bootstrap Social 5.1.1 approach
• Middle: Facebook reference
• Right: workaround approach

Further improvements are welcome. Maybe this "alternative" can be adopted in this library?

[TheDevMinerTV]

Make a Pull Request and be happy 😄