facebook like button using unobtrusive js in rails
I've just put a facebook like button on my rails app by adding the following tag into an html.erb page:
<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>
And ... that works OK but I get a big white开发者_StackOverflow space on the page as the facebook sdk is loading. So, I thought I'd try putting this in my application.js file and running the function after the page is loaded. The only problem is that I can't get this to work at all :)
So far, I've kept the "fb-root" div in the html and I've placed the following function into 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>');
});
However, this is not working for me and I can't figure out why (I'm a js newb). Any help would be greatly appreciated. Thanks!
You should load the javascript function 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>
Then once the javascript library has loaded, it will convert your fbml like button into the appropriate html iframe code. If it is showing a white space until it loads, put the like button fbml code inside a div and style that div with css.
Here is a full example which doesn't have the issue you are talking about (I load the javascript library asynchronously, on a timed delay to simulate a slow load. Notice that there is no white while the load button is loading.
<!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>
OK, I figured this out. First, I put the following tags in the html:
home.html.erb
<div id="fb-root"></div><div id="facebook">[Facebook]</div>
The important tag here is "fb-root" as that is what Facebook's javascript will look for. Then, in my js file I add this function:
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);
});
});
And, no more white box, if he client doesn't have JS enabled they just see "[Facebook]" and my code is nice and maintainable. :)
加载中,请稍侯......
精彩评论