Facebook Like Button refresh after AJAX-Load [duplicate]

This question already has answers here: 开发者_如何学C How to add a Facebook "Like" button to an AJAX driven page (7 answers) Closed 8 years ago.

I have to implement a Facebook-Likebutton where the url is taken from an ajax request... that means i set the "href"-attribute after page-load. unfortunately, at this time the url is already set, so when liking it, it will take the actual page-url as url... is there a way to refresh the likebutton?

---

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){}
});

---

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});
});

---

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();

---

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'));
});