Question

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...&amp;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 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...&amp;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!

Answer 1

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. 🙂