Ajax加载FB“喜欢”按钮仅在第一次工作

I have a site where one part of the page (the #main-inner block) is loaded via AJAX, in order to speed up navigation. This page fragment can contain various social buttons (twitter, G+, facebook) which are initialized after the AJAX call has completed successfully and the HTML has been injected to the page.

我有一个网站,通过AJAX加载页面的一部分(#main-inner block),以加快导航速度。此页面片段可以包含各种社交按钮(twitter,G +,facebook),这些按钮在AJAX调用成功完成并且HTML已注入页面后初始化。

This AJAX loading can happen several times while the visitor is on the page: each time the #main-inner block is removed (via jQuery) and recreated when the AJAX call is successful.

当访问者在页面上时,这种AJAX加载可能会发生几次:每次#main-inner块被移除(通过jQuery)并在AJAX调用成功时重新创建。

My problem is that the facebook "like" button only initializes correctly after the first AJAX call. On the following calls, the facebook button doesn't appear any more, and after a while, the console shows this error message: fb:like failed to resize in 45s.

我的问题是facebook“like”按钮仅在第一次AJAX调用后正确初始化。在以下调用中,facebook按钮不再出现,过了一会儿,控制台显示以下错误消息:fb:就像在45s内无法调整大小一样。

The other social buttons work fine.

其他社交按钮工作正常。

Here's the function I use to initialize the facebook button after the content of the #main-inner block has changed:

这是我在#main-inner块的内容发生变化后用来初始化facebook按钮的功能:

var loadFacebook = function () {
    if ($('.fb-like').length){
        var options = {
            status: true,
            cookie: true,
            xfbml: true,
            appId: XXXXXXXXX
        };
        if (typeof (FB) != 'undefined') {
            // FB.init(options);
            FB.XFBML.parse(document.getElementById('main-inner'));
        } else {
            $.getScript('//connect.facebook.net/fr_FR/all.js', function () {
                FB.init(options);
            });
        }
    }
};

Why does it only work the first time?... Is there a way to reset, or unload the previous button before re-initializing the new one?

为什么它只在第一次工作?...有没有办法在重新初始化新按钮之前重置或卸载前一个按钮?

1 个解决方案

#1

I've managed to reset (and reload) the facebook button by emptying the FV variable each time it is re-initialized. So the function is now:

我已经设法通过在每次重新初始化时清空FV变量来重置(并重新加载)facebook按钮。所以功能现在是:

var loadFacebook = function () {
    if ($('.fb-like').length){
        var options = {
            status: true,
            cookie: true,
            xfbml: true,
            version: 'v2.3',
            appId: XXXXXXXXX
        };
        FB = null; // <- that's the key
        $.getScript('//connect.facebook.net/fr_FR/all.js', function () {
            FB.init(options);
        });
    }
};

I'm still curious to know if there's a better (cleaner?) way to do that.

我仍然很想知道是否有更好的(清洁?)方式。

However I'm not sure that's enough, because although the like button now correctly appears after each AJAX load, it appears that it's unable to read the newly ajax-injected data in the page, and therefore all the fields in the popup (that opens when clicking on the button) are empty... :-(

但是我不确定这是否足够,因为虽然现在在每个AJAX加载后正确显示了类似按钮,但它似乎无法读取页面中新注入ajax的数据,因此弹出窗口中的所有字段(打开)点击按钮时)是空的...... :-(

#1