HTML - 如何在一个页面上高效地完成多个Facebook Like按钮

Question

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

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

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

UPDATE

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

Answer 1

多的测试之后，这是我的最终解决方案：

载入Facebook的all.js SDK自动解析页面上所有的Facebook如按钮。不幸的是没有选择加载SDK而没有解析现有的Facebook Like按钮。

两个解决方案：

1. 加载SDK和没有你的页面上的任何Facebook的赞按钮。然后，每当屏幕上出现一个Like按钮时，加载Like按钮html/fbxml，然后使用SDK分析标记。我没有测试这个。

2. 根本不加载SDK。只需使用AJAX即可在需要加载的位置动态添加Facebook iframe。我去了这个解决方案。

Answer 2

如果您使用iFrame like按钮，也许XFBML Like按钮不会打这些电话。

你必须合并包括验证脚本的facebook jdk，这看起来像很多像按钮一样。我只会尝试这一点，如果有很多像按钮而不是一个按钮是至关重要的。

Answer 3

这只是糟糕的设计。每个类似的按钮都会创建自己的iFrame，并且你无能为力。

Answer 4

您可以使用参数使您的URL略有不同，并设置每个像一个不同的ref属性。

Answer 5

如果有一种方法，你 想，这将有助于我更接近解决任何DIV选择运行此脚本...

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

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

Answer 6

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

如果您在搜索结果页面上有每吨结果的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

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