Question

我只是通过在html.erb页面中添加以下标记，在我的rails应用程序上添加了一个类似facebook的按钮：

<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=1419...&amp;xfbml=1"></script><fb:like href="" send="" width="100" show_faces="" font="" layout="button_count" action="recommend"></fb:like>

而且......工作正常但我在facebook sdk加载时在页面上有一个很大的空白区域。所以，我想我会尝试将它放在我的application.js文件中并在加载页面后运行该函数。唯一的问题是我根本无法解决这个问题：）

到目前为止，我在html中保留了“fb-root”div，并将以下函数放入application.js

$(function() {
    $('#fb-root').after('<script src="http://connect.facebook.net/en_US/all.js#appId=1419...&amp;xfbml=1"></script><fb:like href="" send="" width="100" show_faces="" font="" layout="button_count" action="recommend"></fb:like>');
});

但是，这对我不起作用，我无法弄清楚为什么（我是js newb）。任何帮助将不胜感激。谢谢！

Answer 1

您应该加载javascript函数asynchronously：

<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

然后，一旦加载了javascript库，它就会将你的fbml like按钮转换为相应的html iframe代码。如果它在加载之前显示一个空白区域，请将类似按钮的fbml代码放在div中并使用css设置div格式。

这是一个完整的示例，它没有您正在讨论的问题（我在异常延迟时加载javascript库以模拟缓慢加载。请注意，加载按钮加载时没有白色。

<!DOCTYPE html>
<html>
<body bgcolor="#000">
<div id="fb-root"></div>
<fb:like href="http://stackoverflow.com" send="" width="100" layout="button_count" action="recommend"></fb:like>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true, xfbml: true});
  };
  (function() {
    // delay to simulate slow loading of Facebook library - remove this setTimeout!!
    var t = setTimeout(function() {
        alert('loading fb');
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
        }, 3000);
  }());

</script>
</body>
</html>

Answer 2

好的，我想出来了。首先，我在html中添加了以下标记：

home.html.erb

<div id="fb-root"></div><div id="facebook">[Facebook]</div>

这里重要的标签是“fb-root”，因为这是Facebook的javascript所寻求的。然后，在我的js文件中添加此函数：

的application.js

// facebook recommend button                                                    
$(function() {
        likebutton =
            '<fb:like href="" send="" width="100" show_faces="" ' +
            'font="" layout="button_count" action="recommend">' +
            '</fb:like>';
        $.getScript('http://connect.facebook.net/en_US/all.js', function() {
                FB.init({appId: 141936272547391,
                            status: true,
                            cookie: true,
                            xfbml: true
                            });
                $('#facebook').replaceWith(likebutton);
        });
    });

并且，没有更多白盒，如果他的客户端没有启用JS，他们只看到“[Facebook]”，我的代码很好，可维护。：）

facebook喜欢按钮在轨道中使用不显眼的js

2 个答案: