spi*_*ock 2 ruby facebook ruby-on-rails unobtrusive-javascript facebook-like
我只是通过在html.erb页面中添加以下标记,在我的rails应用程序上添加了一个像facebook一样的按钮:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=1419...&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...&xfbml=1"></script><fb:like href="" send="" width="100" show_faces="" font="" layout="button_count" action="recommend"></fb:like>');
});
但是,这对我不起作用,我无法弄清楚为什么(我是js newb).任何帮助将不胜感激.谢谢!
你应该异步加载javascript函数:
<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>
| 归档时间： |
|
| 查看次数： |
2833 次 |
| 最近记录： |