Facebook sign-in branding not compliant

holtkamp commented 5 years ago

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: https://github.com/lipis/bootstrap-social/blob/8f51880a761bc3d3dfdff748f83edaf038ebf18f/bootstrap-social.less#L98
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 commented 5 years ago

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 commented 5 years ago

Make a Pull Request and be happy 😄

lipis / bootstrap-social

Facebook sign-in branding not compliant #178