Facebook button renders differently on Firefox vs Chrome

Question

I'm having inconsistent results when using social media "widgets", more specifically the Facebook Like button. It is shown differently on different browsers.

I'm trying to use the "large" version of both widgets. Whereas Chromium can display the large and small versions of the twitter widget without any issues, a quite different facebook button shows up.

At a first glance, it doesn't seem to be a rendering issue, as apparently facebook is using different source assets for the widget -- notice the white "f" and the baloon counter.

What's causing 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 Russian Fedora 64-bit):

Answer 1

Facebook has rolled out new updates for logged in users and not logged in users. That is why you are seeing different buttons. While changing that an be impossible, another thing that comes to my mind is explicitly changing the default values and overriding the CSS aka CSS Reset.

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

Also this: Why jquery ui button looks different in Firefox and Chrome

Answer 2

They're not shown differently on different browsers, they're shown differently if the user is not logged in (you're probably logged in Chrome browser, that's why this happens).

For some reason, Facebook is now using different styles for its buttons when user is logged in or not. And the whole thing is around this input:

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

It's not a configurable feature, they just release things as they go. :)