Facebook share HTML5 TypeError: getComputedStyle (...) is null

Question

I am trying to add a facebook share to a page. My problem is with several sharing buttons, it works well at first, but others do not appear on the page. Note, the first sharing button is visible, but the others are in the container with the display: none css is not applied.

I have this code at the top of the page (I changed the facebook app id to FacebookAppID):

<div id="fb-root"></div> <script>(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 = "//connect.facebook.net/es_ES/all.js#xfbml=1&appId=FacebookAppID"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));</script> 

This is each section of the div on the page:

 <div class="fb-share-button" data-href="@url" data-type="button_count" data-width="450"></div> 

This issue can be reproduced in IE.

thanks

Answer 1

Display: none is what causes the problem.

You will need to hide it using opacity, height and overflow

 .fb-share-button { opacity: 0; height: 0px; overflow: hidden; } 

and show it (the height can obviously be changed to whatever you like

 .showfb.fb-share-button { opacity: 1.0; height: 21px; overflow: visible; }