html - Conceal div 中的 Facebook 分享按钮

Question

我需要在 div 中显示一个 fb-share-button。此 div 最初由 display:none css 属性 Conceal 。在IE中，当fb-share-button在 Conceal 的div中时，按钮不显示，而当div显示时按钮继续 Conceal 。

我尝试等待按钮加载完毕并在之后 Conceal div，但我没有成功。

这是我的代码: 主页:

<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>

显示内容和按钮的代码:

<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>

显示或 Conceal 的div样式:

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

最后是显示或 Conceal 的代码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

此外，请确保您使用社交插件的页面是公开的，而不是仅在密码保护区域后可用。