代码：

Question

我有一个页面，我需要有大约30个Facebook赞按钮。他们都喜欢相同的网址。基本上只是在任何地方复制HTML代码。

无论如何，当您加载页面时，每个Facebook Like Button div都会在Facebook上来回拨打电话。你可以在dev工具中来回看到它。减慢了页面加载速度。

这个问题是否有更有效的解决方案？

更新

让我问另一个问题：有没有办法按需动态连接每个Facebook div按钮到Facebook服务器？所以基本上，当页面加载时，没有Facebook div与Facebook建立连接，并且脚本能够通过每个按钮并（按需）运行连接它的脚本。这可能吗？现在看来，它的工作方式是我的页面从Facebook下载all.js。这个脚本找到页面上的所有facebook div并将它们连接到Facebook并将它们变成Like按钮。如果有办法在你想要的任何div上有选择地运行这个脚本，那将有助于我更接近解决方案......

Answer 1

如果有办法在任何div上有选择地运行此脚本我想，这会帮助我更接近解决方案...

是的，您可以在特定的DOM对象上运行FB.XFBML.parse();。因此，动态地将类似按钮代码添加到div，然后在其上调用FB.XFBML.parse();。请参阅：http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/

FB.XFBML.parse(document.getElementById('foo'));

Answer 2

我知道这是一个古老的话题，但对于遇到同样问题的其他人来说，这可能会派上用场。

如果您有大量的facebook小部件，例如搜索结果页面上每个结果一个，并且您希望它们全部呈现但又不想让您的用户同时拥有大量的连接，您可以使用它来节流渲染。

代码：

var fbThrottle = (function () {
    var settings = {
        // how many widgets can be rendering at any one time
        simultaneousRenders: 3,
        // how often to add a new widget to the queue, if the queue is not full
        renderInterval: 100,
        // max amount of time we will wait until marking a widget as rendered
        // this is in place so as not to block the queue if a widget takes too long
        maxRenderWaitFailsafe: 5000,
        // how long to wait before calling the callback function (if supplied)
        // after a widget finishes rendering. can be used to say set the area visible after render if you had it hidden to prevent fout.
        callbackDelay: 250,
    };

    var fbWidgets = [];
    var activeRenders = 0;

    setInterval(function () {
        if (fbWidgets.length == 0)
            return;

        if (!window.FB)
            return;

        if (activeRenders < settings.simultaneousRenders) {
            var obj = fbWidgets.shift();

            if (typeof obj !== 'undefined') {
                activeRenders++;

                (function () {
                    var currentRenderDone = false;

                    setTimeout(function () {
                        if (!currentRenderDone) {
                            activeRenders--;
                            currentRenderDone = true;
                        }
                    }, settings.maxRenderWaitFailsafe);

                    window.FB.XFBML.parse(obj.widget, function () {
                        if (!currentRenderDone) {
                            activeRenders--;
                            currentRenderDone = true;
                        }

                        if (typeof obj.callback === 'function') {
                            setTimeout(function () {
                                obj.callback();
                            }, settings.callbackDelay);
                        }
                    });
                })();
            }
        }
    }, settings.renderInterval);

    return {
    add: function (widget, callback, top) {
        if (typeof widget === 'undefined')
            return;

        if (typeof widget === 'string')
            widget = document.getElementById(widget);

        var obj = {
            widget: widget,
            callback: callback
        };

        if (top) 
            fbWidgets.unshift(obj);
        else {
            fbWidgets.push(obj);
        }
    },
    };
})();

用法：

您可以一次性将所有元素添加到油门，或让声纳在它们变得可见时传递它们。

// add in the element to be rendered to the end of the list   
fbThrottle.add(element);

// or you can pass in just the id
fbThrottle.add("idOfElement");

// you can pass in a callback as well
fbThrottle.add(element, function(){  
    // do something after
});

// you can add an element to the top of the list by setting the third parameter to true
fbThrottle.add(element, callback, true);

正如Jakobud所说，最好通过在FB.init中关闭xfbml来关闭fb js api自动渲染小部件

window.FB.init({
    xfbml: false
});

Answer 3

如果你正在使用类似iFrame的按钮，那么XFBML Like按钮可能不会进行这些调用。

你必须整合facebook jdk，包括身份验证脚本，对于一些像按钮来说似乎很多。我只会尝试这个，如果有许多像按钮而不是一个按钮是至关重要的。

Answer 4

那只是糟糕的设计。每个喜欢按钮都会创建自己的iFrame，而你无能为力。

Answer 5

经过多次测试，这是我的最终解决方案：

加载Facebook all.js SDK会自动解析页面上的所有Facebook赞按钮。遗憾的是，如果不解析现有的Facebook Like按钮，就无法加载SDK。

两种解决方案：

加载SDK，页面上没有任何Facebook赞按钮。然后，只要屏幕上显示Like按钮，就可以加载Like按钮html / fbxml，然后使用SDK解析标记。我没有测试过这个。
根本不加载SDK。只需使用AJAX即可在任何想要加载的地方动态添加Facebook iframe。我选择了这个解决方案。

Answer 6

您可以使用参数使您的网址略有不同，并将每个参数设置为不同的ref属性。

HTML - 如何在一个页面上有效地执行多个Facebook Like按钮

6 个答案:

代码：

用法：