HTML-如何在一个页面上高效地执行多个类似Facebook的按钮

我有一个页面，我需要有大约30个类似Facebook的按钮。他们都喜欢相同的url。基本上就是到处重复HTML代码

无论如何，当你加载页面时，每一个像Facebook一样的按钮div都会来回打电话给Facebook。您可以在开发工具中看到它。大大降低了页面加载速度

这个问题有没有更有效的解决办法

更新

---

让我问另一个问题：是否有任何方法可以按需将每个Facebook div-like按钮动态连接到Facebook服务器？因此，基本上，当页面加载时，没有一个Facebook div连接到Facebook，脚本能够通过每个按钮，按需运行连接它的脚本。这可能吗？现在，它的工作方式似乎是我的页面从Facebook下载all.js。这个脚本会在页面上找到所有facebook div，并将它们连接到facebook，使它们成为类似的按钮。如果有一种方法可以在您想要的任何div上选择性地运行此脚本，这将帮助我更接近解决方案…

如果您使用类似iFrame的按钮，那么类似XFBML的按钮可能不会进行这些调用

---

您必须合并FacebookJDK，包括身份验证脚本，对于一些类似的按钮来说，这似乎太多了。只有在关键是要有许多类似按钮而不是只有一个按钮的情况下，我才会尝试这种方法。

这只是一种糟糕的设计。每个like按钮都将创建自己的iFrame，对此您无能为力。

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

如果有一种方法可以在任何div上选择性地运行此脚本 我想，这将帮助我更接近一个解决方案

是的，您可以运行FB.XFBML.parse；在特定的DOM对象上。因此，动态地将like按钮代码添加到div中，然后调用FB.XFBML.parse；在上面。见：

---

FB.XFBML.parsedocument.getElementById'foo'

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

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

两种解决方案：

加载SDK，页面上不要有任何类似Facebook的按钮。然后，只要屏幕上有一个Like按钮，就加载Like按钮html/fbxml，然后使用SDK解析标记。我没有测试这个

根本不要加载SDK。只需使用AJAX在任何您想加载的地方动态添加Facebook iframe。我同意这个解决方案

---

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

如果你有大量的facebook小部件，例如搜索结果页面上的每个结果一个小部件，你想让它们都呈现出来，但又不想同时用大量的连接打到你的用户，那么你可以使用它来限制呈现

代码： 正如Jakobud提到的，最好通过在fb.init中关闭xfbml来关闭FBJSAPI对小部件的自动呈现

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

---

如果是同一个URL，那么只有一个按钮有什么错呢？这是页面设计的一部分。我只是开发者，不是设计师。我只是好奇；从外部的角度来看，将同一条信息复制30次似乎很愚蠢，但这当然超出了您的控制：-但如果我有30个iFrame，每个iFrame都必须加载相同的HTML。我想它也会很慢。这就是为什么我说，如果你使用类似iFrame的按钮。所以我认为您使用的是XFBML？不，我使用的是HTML5选项。它似乎和XFBML一样慢。嗯。。。。如果你使用HTML5选项，你必须通过facebook进行身份验证，对吗？您是否有可能正在为每个按钮运行身份验证代码？我认为它下载的Facebook的all.js会查看每个相似按钮的数据href url，并确定它有多少相似按钮，以便显示该数字。我使用的“喜欢”按钮不会显示您喜欢该url的朋友，因此我不确定它是否使用我的Facebook cookies来确定该信息。我不认为这有什么办法…是的，我确实看到了。试图避免使用XFBML标记，而是使用HTML5实现。对于非XFBML有类似的解析方法吗？我认为同样的解析方法甚至会出现，并找到HTML5版本的新实例。啊，我明白你的意思了。每个有自己iFrame的like按钮都是Facebook的糟糕设计。@iStodal Facebook的糟糕设计？否则他们怎么读你的会话cookies呢？一个好的设计是他们不做这样的事情；没有阅读会话cookie或类似的内容我很想看到html5版本的like按钮有这样的内容这对增加会话数量有什么帮助 连接？

// 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);

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