Facebook registration plugin – within a lightbox

I don’t know what I was thinking when I decided that users registering on my page must see the register form in a lightbox. As if it isn’t hard enough already to deal with Facebooks social plugins. I claim temporary insanity on this one.

The lightbox plugin of my choice is ColorBox, for it is highly customizable and has everything I need (in this case – a onComplete function). So in my header script tag I call this:

$(document).ready(function(){
$.colorbox({href: ‘register.html’, opacity:0.6, onComplete: function(){ FB.XFBML.parse(); } });
});

This makes ColorBox called on loading the page, showing the contents of register.html, which looks like this:

        <div id="register">
            <div width="500" height="300" fb_only="true" onvalidate="validate"
                        data-fields="[{'name':'name'}, {'name':'email'},
                          {'name':'agb', 'description':'Ich akzeptiere die AGB', 'type':'checkbox'}]" 
                        data-redirect-uri="/register.php">
            </div>
        </div>

Don’t forget about FB.XFBML.parse, or else the register form might not show up all the time.

PS: figuring this out took me several hours.