Facebook button is different from Firefox and Chrome

Question

I get inconsistent results when using "widgets" on social networks, in particular, the "Facebook Like" button. It is shown differently in different browsers.

I am trying to use the "large" version of both widgets. While Chromium can display large and small versions of the twitter widget without any problems, a completely different facebook button appears.

At first glance, this does not seem to be a rendering problem, since, apparently, facebook uses different source assets for the widget - it notices a white “f” and a bar counter.

What causes this and how can I solve it?

Code

<span class="fb-like" data-size="large" data-href="http://www.google.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span> <a href="https://twitter.com/share" class="twitter-share-button" data-size="large" data-text="TEXT" data-url="http://www.google.com" data-via="username" data-related="username" data-lang="pt" data-show-count="false"></a> <br> <span class="fb-like" data-size="small" data-href="http://www.google.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></span> <a href="https://twitter.com/share" class="twitter-share-button" data-size="small" data-text="TEXT" data-url="http://www.google.com" data-via="username" data-related="username" data-lang="pt" data-show-count="false"></a> <script type='text/javascript' src='//platform.twitter.com/widgets.js?ver=4.6.1'></script> <script type='text/javascript' src='//connect.facebook.net/pt_BR/sdk.js#xfbml=1&version=v2.8'></script> 

Result

Firefox (50.1.0 Linux):

Chromium (51.0.2704.103 64-bit Fedora 64):

Answer 1

Facebook has released new updates for registered users and is not logged in. That is why you see different buttons. Changing this is not possible, another thing that comes to my mind is clearly changing the default values ​​and overriding CSS, namely CSS Reset.

Default: https://developers.facebook.com/docs/plugins/share-button/

Also this: Why the jquery ui button is different from Firefox and Chrome .

Answer 2

They are not displayed differently in different browsers, they are displayed differently if the user is not logged in (you are probably logged into the Chrome browser, so this happens).

For some reason, Facebook now uses different styles for its buttons when a user logs in or not. And all this around this input:

 <input type="hidden" autocomplete="off" name="new_ui" value="true"> 

This is not a customizable feature , they just release things as they arrive. :)