Question

Possible Duplicate:
How to render a plugin added dynamically?

This is my code :

HTML

<div id="fb-root">
<fb:like href="www.google.it" send="false" layout="button_count" width="auto" show_faces="true"></fb:like>
<div id="newFB"></div>
<a href="#" id="showFacebook">Add new "I Like" and refresh</a>

jQuery

function renderFB() {
    (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/it_IT/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs); } (document, 'script', 'facebook-jssdk'));
}

renderFB();

$("#showFacebook").click(function() {
    $('#newFB').html('<fb:like href="www.google.it" send="false" layout="button_count" width="auto" show_faces="true"></fb:like>');
    
    renderFB();
});

what I’d like to do is load every FB plugins on page load; then, in some moments, append a new plugins and re-render them all. Or, if possible, only the last inserted.

Is it possible? And how can I do it?

Answer 1

Just try IFRAME instead of XFBML..

like,

$('#newFB').html('<iframe src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.google.it&amp;send=false&amp;layout=button_count&amp;width=450&amp;show_faces=false&amp;action=like&amp;colorscheme=light&amp;font&amp;height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>');