Botón "me gusta" después de la llamada ajax

facebook facebook-like

Question

había algunas preguntas similares a las mías en la pila pero ninguna que respondiera mi pregunta, así que ...

Una llamada ajax devuelve el código html estándar para crear el botón me gusta:

<div class="fb-like" data-href="http://www.website.com" data-send="true" data-width="450" data-show-faces="true"></div>

Este html aparece en la fuente cuando se mira con ''inspeccionar elemento'', pero no está renderizado, es decir, el espacio donde debería estar el botón está en blanco. ¿Hay alguna función de representación que debería estar usando?

Cualquier consejo sería muy apreciado!

EDITAR: Aquí está la solicitud y el análisis de ajax: el botón "Me gusta" se coloca en "#thequestion" junto con algún otro texto (se repite desde question.php).

$("#thequestion").load("/thought/question.php", { ans: choice, id: questionId } );
    $("#graph").load("/thought/graph.php", { id: questionId } );
    $("#fbCommentsPlaceholder").html("<div class=''fb-comments'' data-href=''http://qanai.com/thought/#" + questionId + "'' data-num-posts=''2'' data-width=''470''></div>");
    FB.XFBML.parse();
    eval(document.getElementById(''thequestion'').innerHTML);
    eval(document.getElementById(''graph'').innerHTML);

(Sé que eval es malvado)

EDIT 2: el botón me gusta si FB.XFBML.parse(); Se ejecuta manualmente (en la consola) después de la llamada ajax. Gracias

Answer 1

No estoy seguro de que alguien lo necesite, pero mi código completo tiene este aspecto ahora y muestra tanto la página FB como el botón Me gusta (botón LikeLink creado con el ícono de material):

<i id="LikeLink" class="material-icons actionButton">&#xE8DC;</i>

var fbloaded = false; // if SDK is loaded, no need to do it again (though cache should do this?
var fbpageid = "myPageId"; // FB page id

// ajax call to FB SDK script
if (!fbloaded) {
    $.ajax({
        type: "GET",
        url: "//connect.facebook.net/en_US/sdk.js",
        dataType: "script",
        cache: true,
        success: function () {
            fbloaded = true;
            FB.init({
                appId: ''{myAppId}'',
                version: ''v2.3'' // or v2.0, v2.1, v2.0
            });
// parse button after success
            FB.XFBML.parse();
        }
    });
}

var FBDivAppended = false; // if already done, do not call and render again
PostUrl = window.location.href; // like button needs this... or not :)

// when LikeLink is clicked, add the divs needed and at the end fire the FB script ajax call (resetFB)

$("#LikeLink").click(function () {
if (!FBDivAppended) {
            var $pagediv = $("<div class=/"fb-page/" data-href=/"https://www.facebook.com/" + fbpageid + "/" />");
            var $fblikediv = $("<div class=/"fb-like/" data-href=/"" + PostUrl + "/" />");
            var $fbdiv = $("<div id=/"fbDiv/" />");
            var $fbroot = $("<div id=/"fb-root/" />");
            $fbdiv.append($pagediv).append($fblikediv);
            $(".Header").append($fbdiv).append($fbroot);
            FBDivAppended = true;
        }

resetFB();
}

Answer 2

Tienes que llamar a FB.XFBML.parse(); después de la llamada ajax.

Documentación: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

Edición: ahora veo que estás intentando cargar contenido en $(''#thequestion'') . .load toma una devolución de llamada que se ejecuta después de que se complete la solicitud. Deberías hacer algo como:

$(''#thequestion'').load(''/my/url'', { my: ''params'' }, function() {
    FB.XFBML.parse();
});

Documentación: http://api.jquery.com/load/