许多Facebook喜欢页面上的按钮,异步

时间:2011-02-09 18:06:17

标签: javascript asynchronous facebook-like

我正在建造一堵在我们网站上写过邮件的人。对于每条消息,我想要包含一个Facebook赞按钮。但Facebook的实现是在构建fb:like标签之前包含脚本标记。

 <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,就像这样BEFORE循环并将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文件。

更新:在每个实例中,我都可以看到&lt; fb:like ...标签已成功创建,但facebook all.js永远不会熄灭并实际构建按钮,就像它加载所有按钮一样在第一次加载时。

有没有人有任何想法?

谢谢, 斯科特

更新

回到这个页面之后的事实,但我最终做的是在点击项目时为每个人的图像动态构建一个类似的按钮。因此,我的onclick代码会检查它是否已经存在,如果没有,则使用上面的构建块构建它。

这样,我不必在页面加载时创建121个按钮。相反,我是按需创建的。

您可以在honeybunchesofoats.com

查看已完成的项目

1 个答案:

答案 0 :(得分:1)

您只需要包含一次facebook脚本,而不是每次都包含一次。它会在页面中搜索所有xfbml元素。