Dynamically adding Facebook XFBML plug-in to your page using jQuery

I was trying to add some of the facebook social plug-ins to my home page at www.sandeeprawat.com which display a kind of splash screen at first (not a splash actually but a simple visible <div> and hidden content on the page) and then on clicking on the page, it renders the hidden content of the same page and adds some XFBML plug-ins and a twitter gadget. I didn’t want to download everything on the page load since it will never be shown to a user if she never click on the splash screen and it would  mean unnecessary load time. So I what i tried to was to add the content dynamically on the onClick handler. Now here is the problem.

facebook SDK parses the DOM only on the doc load, so when I dynamically add <fb:like /> button after that, it is inserted successfully but doesn’t do anything and no iframe is generated which is obvious. I’ve scratched my head for long, tried various options suggested over internet but none of them worked for me, so I went back and added them statically to the page and make those controls hidden which wasn’t a good solution but at least it worked.

Now here is what I was doing wrong, I was using FB.XFBML.host.ParseDomTree and I also used FB.XFBML.Parse() as suggested by Facebook but I still couldn’t get that to work. Now the error was very simple, my syntax was wrong I should have used parse in small case instead of Pascal casing which caused me a fair amount of time to discover but at least it was a good learning. Mind you I’m new to the jScript world :)

Here is the code snippet I’m using to insert the tags dynamically.

$(document).ready(function () {

    $("#divStarter").click(function () {
        oTweet.render().setUser('talksandy').start();
        $("#divStarter").hide();
        $(".container").css("visibility", "visible");
        var poetry = $("#autoFetch").html();
        $("#poetry").html(poetry);        
        $("#fbReco").html("<fb:recommendations />");
        $("#fbFriendPile").html("<fb:friendpile />");
        $("#fbLike").html("<fb:like />");
        FB.XFBML.parse();
    });
});