Facebook Как кнопка, которая не отображается после скрытого элемента, загружается

Question

Я использую CSS Hover для отображения/скрытия элемента Div с помощью «mouseover» и «mouseout».

Моя проблема заключается в том, что кнопка Fb не отображается с событием «mouseover» в браузере Firefox и IE, но работает в Chrome.

Я также вижу более ту же проблему, но сейчас я не могу исправить.

Вот мой CSS:

div#show-social, .subscribe:hover>div#div-social { 
display: none; 
} 

.subscribe:hover>div#show-social { 
display: block; 
} 

HTML:

<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/en_US/all.js#xfbml=1"; 
fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 
</script> 
<div class="subscribe"> 
    <div id="div-social">Show is avaible</div> 
    <div id="show-social"> 
    <!-- FB like button not Showing while Hover on this (problem with Firefox and IE) --> 
     <span class="fb-like" data-href="my-URL" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></span> 
    </div> 
</div> 

Вот DEMO (.. Вы можете проверить на Google Chorme Он работает сделано Но Firefox не делает) http://jsfiddle.net/happi/D52j2/

Как это исправить. Спасибо за помощь.

Answer 1

Вам нужно повторно визуализировать кнопку facebook, когда вы показываете элемент (или, может быть, только первый раз).

var subscribe = document.getElementsByClassName("subscribe")[0], 
    showSocial = document.getElementById("show-social"), 
    rendered = false; 

// Wait that facebook script has been loaded 
window.fbAsyncInit = function() { 
    // FB variable is now accessible 
    subscribe.onmouseover = function() { 
     if (!rendered) { 
      // Re-render the Facebook like button. 
      FB.XFBML.parse(showSocial); 
      rendered = true; 
     } 
    }; 
}; 

Edit: мой код был один баг, это getElementById и не getElementsById и я его улучшить, как я уже говорил в круглых скобках, вам нужно сделать кнопку facebook только в первый раз.