Facebook Logo doesn't comply with current branding guidelines

[greenweeds]

The default icons used for Facebook in social sharing don't comply with current branding guidelines. A screensnip of the out of date icon being served is attached [1], along with the preferred icon [2].

Up to date branding can be accessed at https://en.facebookbrand.com/

[1]

[2]

[jeherve]

For reference, the logo comes from here:
https://github.com/Automattic/social-logos

Once it is updated in that repo, we can update our copy of social logos here in Jetpack, and adjust the CSS of the sharing buttons to make an exception for the Facebook icon so it can come until the edge of the circle vs. being in the center like all the others today.

We'll also need to update the SVG and the CSS used in the Social Menus and Social Icons widget:
https://github.com/Automattic/jetpack/blob/63fee0f63b8cb1e7909d8b98a50519f9a12eb800/modules/theme-tools/social-menu/social-menu.svg

Internal discussion:
p1590665359354000-slack-jetpack

[keoshi]

Thanks for bringing this up, @greenweeds !

Yeah, it seems FB's guidelines have become really restrictive in terms of the logo options they offer (which is now just one).

Ditto on what @jeherve said above on creating an exception for FB, even though the circle should ideally be part of the logo. It should look like this in relation to other logos:

This brings up the question of revising all social logos and their latest guidelines and, eventually and more importantly, decide if we still offer multiple options in terms of social icon styling for this block.

[folletto]

I think the quick fix for this is:

Mostly because of what you mentioned it would create and exception for Facebook, and it would also not work with the other styles for social sharing.

[keoshi]

Great point, @folletto — that would allow us to stay in line with their guidelines while still offering various styling flavors.

[jeherve]

I'm adding the Needs Design label on this one again, as I am not quite sure how to go about updating the Social Logos repo with an updated SVG and icon in the font family, that would reflect the design changes above. @keoshi Do you think you could take a look at this?

Thank you!

[folletto]

I am not quite sure how to go about updating the Social Logos repo with an updated SVG and icon in the font family, that would reflect the design changes above

The logo seems already updated there: Automattic/social-logos#94

You probably just need to pull the latest version?

[jeherve]

Reopening as there are still a few places where we'd need to update things:

• Publicize in wp-admin (and soon Social Previews in wp-admin)

• Publicize in Calypso

• The comment form on WordPress.com and Jetpack

[mdrovdahl]

Noting a related issue...when using the Jetpack Social Media Icons Widget (https://jetpack.com/support/extra-sidebar-widgets/social-icons-widget/) AND the Jetpack Social Sharing (https://jetpack.com/support/sharing/) set to "icon only" we end up with two different Facebook icons...

[jeherve]

@mdrovdahl Are you referring to the fact that the sharing button has the logo inside a circle? If so, that's something we discussed here:
#15954 (comment)

[mdrovdahl]

@jeherve I think...yes? I read the comments but I'm not clear if the screenshot I provided is indeed the expected behavior. It seems odd that Jetpack places two different Facebook icons on that page (the first a blue circle with a white circle inside with a white f on the inside and the second a red circle with a white f on the inside).

[jeherve]

That is indeed the expected behaviour, due to the limitations of the sharing button design.

[Robertght]

I can see we had this added to TOB, but since this so old, I run some tests and this is how I see the icon now:

Marketing > Connections:

Twentyninteen's social menu:

Social icons widget with 2019 and social icons block with 2024:

@jeherve is this still relevant?

[jeherve]

Yes, it's still relevant. The logo's color has been updated, but not its shape, as discussed above:
#15954 (comment)