how to dynamically load facebook like button?

Question

im building an application which loads some products on main page with search.also after click on each product item after load it'll show small popup and shows like button and comment feed for specific product i wrote a code like this.

function renderFBWidgets() {
        window.fbAsyncInit = function () {
            FB.init({ appId: '165987850132000', 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);
        } ());
        var u = //get product url
        $('.productlist').append('<div style="margin-left: 30px;"><fb:like href="' + u + '" send="true" layout="standard" width="430" show_faces="false" action="like" colorscheme="light"></fb:like></div>');
}

but each time when i click on the product facebook initialized all script is there any good way to load like button dynamically?

thanks

Answer 1

All Like Buttons are rendered in iframes. If you use the XFBML approach, Facebook's all.js script finds the <fb:like> tags on the page and creates an iframe for each one. If you add an <fb:like> tag after the script has run, you need to run FB.XFBML.parse to process that tag and generate its iframe.

Another option is to append the new Like Button as an iframe. Be sure to uncheck the Send Button option in Facebook's button generator. However, with this approach you lose the Send Button and you only get Comments with a standard layout at least 400px wide.