提问人：spinlock 提问时间：7/1/2011 最后编辑：bkaidspinlock 更新时间：7/3/2011 访问量：2851
Facebook Like 按钮在 Rails 中使用不显眼的 JS
facebook like button using unobtrusive js in rails
问：
我刚刚在我的 rails 应用程序上放置了一个 facebook like 按钮，将以下标签添加到 html.erb 页面中：
<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 加载时，我在页面上得到了一个很大的空白。所以，我想我会尝试将其放在我的应用程序.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 新手）。任何帮助将不胜感激。谢谢！
答：
5赞
bkaid
7/1/2011
#1
您应该异步加载 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 代码。如果它在加载之前显示一个空格，请将 like 按钮 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>
评论
0赞
spinlock
7/3/2011
这几乎就是我要找的。但是，我想将 javascript 排除在 html.erb 文件之外，以符合不显眼的 javascript 约定。谢谢！
0赞
bkaid
7/3/2011
只需将整个脚本的内容移动到外部 .js 文件即可。
1赞
spinlock
7/3/2011
#2
好的，我想通了。首先，我在 html 中放置了以下标签：
home.html.erb
<div id="fb-root"></div><div id="facebook">[Facebook]</div>
这里的重要标签是“fb-root”，因为这是 Facebook 的 javascript 将要寻找的。然后，在我的js文件中，我添加了这个函数：
应用程序.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]”，我的代码很好且可维护。:)
评论