Facebook Like Button refresh after AJAX-Load [duplicate]

Answer 1

If you're using fbml, you can create and parse the element on the fly, see this answer for details:

How to add a Facebook "Like" button to an AJAX driven page

If you're using iframes, you don't need to build the url all over again, just refresh the iframe. For example, to refresh all the iframes on the page:

$("iframe").each(function(){
  $(this).attr('src', $(this).attr('src'));
});

Answer 2

If you're using XFBML, I don't know of a way to change the URL. However, if you're using an iframe, this code snippet should work:

HTML

<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.google.com&amp;layout=standard&amp;show_faces=true&amp;width=450&amp;action=like&amp;font&amp;colorscheme=light&amp;height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true" id="theiframe"></iframe>
<br />
<input id="url" />
<input id="btn" value="Change" type="button">

jQuery

$('#btn').click(function(){
    url = "";

    url += 'http://www.facebook.com/plugins/like.php?';
    url += 'href=' + $('#url').val() + '&layout=standard&';
    url += 'show_faces=true&width=450&action=like&';
    url += 'font&colorscheme=light&height=80';

    $('#theiframe').attr({'src': url});
});

Answer 3

If you’re using jQuery, there’s a really easy and slick solution to this problem:

$(document).ajaxComplete(function(){
    try{
        FB.XFBML.parse(); 
    }catch(ex){}
});

Answer 4

If using XFBML, than you should wrap your like button code, eg.

<fb:like href="http://example.com" send="true" width="450" show_faces="true"></fb:like>

into a div or span, eg:

<span class="fb-like">    
  <fb:like href="http://example.com" send="true" width="450" show_faces="true"></fb:like>
</span>

Than, after gaining new URL via ajax, you have to clear already generated facebook like widget, and replace it with new fb:like code

jQuery('.fb-like').html('<fb:like href="http://example.com" send="true" width="450" show_faces="true"></fb:like>');

And than you have to initialize facebook like button again

FB.XFBML.parse();

Final code could looks like this one. Assume that response contains pure new URL

<span class="fb-like">    
  <fb:like send="true" width="450" show_faces="true"></fb:like>
</span>
<script type="text/javascript">
$.ajax({
  url: "getMeUrl.php",
  success: function(url){
    $('.fb-like').html('<fb:like href="'+url+'" send="true" width="450" show_faces="true"></fb:like>');
    FB.XFBML.parse();
  }
});
</script>

Summary:

To refresh facebook like button (or any other facebook XFBML) you have to:
1) destroy existing initialized widget (clear the content of XFBML code wrapper)
2) add new XFBML code into wrapper
3) initialize new code via FB.XFBML.parse();