隐藏div中的Facebook分享按钮

Question

我需要在div中显示fb分享按钮。此div最初被display:none css属性隐藏。在IE当fb-分享按钮处于隐藏div时，该按钮不显示，并且当显示div时按钮继续隐藏。

我试图等待按钮加载后隐藏div但我没有成功。

这是我的代码： Master.Page：

<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/sdk.js#xfbml=1&appId=536816803117001&version=v2.1"; 
     fjs.parentNode.insertBefore(js, fjs); 
    } (document, 'script', 'facebook-jssdk')); 
</script> 

的节目内容和按钮的代码：

.SP_PublicacionesSeccionOff 
{ 
    display:none; 
    float:left; 
    width:529px; 
} 
.SP_PublicacionesSeccionOn 
{ 
    display:block; 
    float:left; 
    width:529px; 
} 

：

<div id="SP_PublicacionesCapsula1" class="SP_PublicacionesSeccionOff"> 
       <ul class="SinTipo SinMarginSinPadding"> 
        <% for (Int16 i = 0; i < drInformes.Count; i++) 
         {%> 
        <li class="SP_PublicacionesSeccionItem"> 
         <dl class="SP_PublicacionesSeccionItemTexto"> 
          <dt><a class="SP_PublicacionesTitulo" href="../SalaPrensa/PublicacionesEstudioCasos.aspx?Est_Id=<%=drInformes[i]["Est_Id"].GetInt()%>&Est_Tipo=1" title="enlace a <%=drInformes[i]["Est_Titulo"].GetPublishString(40)%>"> 
           <%=drInformes[i]["Est_Titulo"].GetPublishString()%></a></dt> 
          <dd class="SinMarginSinPadding"> 
           <%=drInformes[i]["Est_Resumen"].GetPublishHtml()%></dd> 
         </dl> 
         <a href="../SalaPrensa/PublicacionesEstudioCasos.aspx?Est_Id=<%=drInformes[i]["Est_Id"].GetInt()%>&Est_Tipo=1" title="acceder a la información completa de <%=drInformes[i]["Est_Titulo"].GetPublishString(40)%>"> 
          <img alt="icono de acceso a la información completa de <%=drInformes[i]["Est_Titulo"].GetPublishString(40)%>" src="../_img/<%=Tools.RecursosCarpeta(this)%>Flecha.png" class="SP_PublicacionesEstudiosFlecha" /></a> 
         <div style="clear: both"> 
          &nbsp;</div> 
         <!--twitter--> 
         <div style="float: left; width: 90px;"> 
          <a href="https://twitter.com/share" class="twitter-share-button" data-lang="en" data-url="<%= GetUrl(drInformes[i]["Est_Id"].GetInt(), 1)%>" data-counturl="<%= GetUrl(drInformes[i]["Est_Id"].GetInt(), 1)%>" data-text="<%=drInformes[i]["Est_Titulo"].GetPublishString()%>">Tweet</a> 
         </div> 
         <!--facebook--> 
         <div style="height: 20px!important; float: left; margin-top: 1px; display: block!important;"> 
          <div class="fb-share-button" data-href="<%= GetUrl(drInformes[i]["Est_Id"].GetInt(), 1)%>" data-type="button_count"> 
          </div> 
         </div> 
        </li> 
        <% }%> 
       </ul> 
      </div> 

的申报单显示Øhidding的风格

最后显示或隐藏代码JS：

function AbrirDesplegable(Contenedor, SeccionEnlace, Identificador, Flecha) { 

var contenedor = new Object(); 
var desplegable = new Object(); 
var flecha = new Object(); 
var seccion = new Object(); 

contenedor = document.getElementById(Contenedor); 
desplegable = document.getElementById(Identificador); 
flecha = document.getElementById(Flecha); 
seccion = document.getElementById(SeccionEnlace); 

if (desplegable.className == 'SP_PublicacionesSeccionOn') { 
    seccion.className = 'SP_PublicacionesSeccionTextoLinkOff'; 
    flecha.src = '../_img/Flecha[Off].gif'; 
    desplegable.className = 'SP_PublicacionesSeccionOff'; 
} 
else { 
    seccion.className = 'SP_PublicacionesSeccionTextoLinkOn'; 
    flecha.src = '../_img/Flecha[On].gif'; 
    desplegable.className = 'SP_PublicacionesSeccionOn'; 
} 

} 

Answer 1

你可能需要使其可见后解析按钮：

FB.XFBML.parse(); 

的更多信息：https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse

此外，还要确保你在哪里使用社交插件的网页是公开的，不仅可在密码保护区后面使用。