页面上有许多类似 facebook 的异步按钮

Question

我正在为在我们网站上留言的人们建造一堵墙。对于每条消息，我想包含一个 Facebook Like 按钮。但 Facebook 的实现是在构建 fb:like 标签之前包含 script 标签。

 <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
      <fb:like href="http://example.com/MessageWall.aspx/Fan/222" 
            show_faces="false" width="250">
 </fb:like>

我尝试过这种方法，但因为我一次在页面上显示 121 个人，所以可以说，页面性能低于标准。我不敢相信我每次都必须包含脚本标签。

我现在正在尝试实现一种异步方式来执行此操作。

我已经尝试过：

    (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(e, s);
    }());

    var firstHalfOfLikeButton = '<fb:like href="http://example.com/MessageWall.aspx/Fan/';
    var secondHalfOfLikeButton = '" layout="button_count" show_faces="false" width="250"></fb:like>';
    var userId, divId;
    for (var x=0; x<listOfIdsOfActiveTiles.length; x++) {
        userId = listOfIdsOfActiveTiles[x][0];
        divId= listOfIdsOfActiveTiles[x][1];
        $("div#" + divId+ " .hbo-message").append(firstHalfOfLikeButton + userId + secondHalfOfLikeButton);
    }

我还尝试像这样将 all.js 异步附加到 fb-root，然后再循环并将 fb:like 标记附加到每个位置。

 (function() {
    var e = document.createElement('script'); e.async = true;
     e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js#xfbml=1';
         document.getElementById('fb-root').appendChild(e);
 }());

我还尝试循环并创建 fb:like 标签，然后附加 all.js 文件。

更新：在每个实例中，我都可以看到

有人有什么想法吗？

谢谢， 斯科特

更新

事后回到此页面，但我最终所做的是在单击该项目时为每个人的图像动态构建一个“喜欢”按钮。因此，我的 onclick 代码检查它是否不存在，如果不存在，则使用上面的构建块构建它。

这样，我就不必在页面加载时创建 121 个类似的按钮。相反，我按需创建它们。

您可以在 honeybunchesofoats.com 上查看完成的项目

Answer 1

您只需要包含 facebook 脚本一次，而不是每个喜欢按钮一次。然后它将在页面中搜索所有 xfbml 元素。