Having some issue with facebook's share button

Question

The issues are 2 and I believe 1 is HTML/CSS related and the other one is JavaScript related.

The first one is this - I'm having some troubles positioning it correctly (it's out of alignment). When I set it to display: inline-block; it relocated a bit below the other share buttons that are also set as inline-block. All 3 buttons are aligned correctly except Facebook's.

The second problem seems JavaScript related. The button loads maybe a second later after everything else on the page has loaded and I have absolutely no idea why.

Here's some of the code:

My share button:

<div class="fb-share-button" data-href="http://onyx.space/image/41" data-layout="button" data-size="small" data-mobile-iframe="true"></div>

javascript.js

(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0';
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

CSS that makes them inline-block;

.twitter-share-button {
    display: inline-block !important;
}
.fb-share-button {
    display: inline-block !important;
}

Answer 1

Both problems are because of the css. I think your HTML DOM is misbehaving. For a clarification and a different hover effects to the share button and check whether if the button blink on hover. Different hover effects - If your button has a background color , change it on hover with the text color. If it blinks you need to properly arrange the DOM first.

Your javascript seems clear