Facebook share button in hidden div

Question

I need to show a fb-share-button in div. This div initially are hidden by display:none css property. In IE when the fb-share-button are in a hidden div, the button doesn't show, and when the div is showed the button continues hidden.

I try to wait the button are loaded and hide the div after, but I have no success.

This is my code: 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>

The code for show content and buttons:

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

The styles for divs showing o hidding:

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

Finally the code JS for show or hide:

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

You probably need to parse the button after making it visible:

FB.XFBML.parse();

More information: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse

Also, make sure the pages where you are using Social Plugins are public and not only available behind password protected areas.