How to add a Facebook "Like" button to an AJAX driven page
SIMPLE SOLUTION
Just parse trigger the parse function when load complete.
If you’re using jQuery, there’s a real easy and slick solution to this problem:
$(document).ajaxComplete(function(){ try{ FB.XFBML.parse(); }catch(ex){}});
This is the solution I ended up going with:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <script src="JS/jquery/jquery.js" type="text/javascript"></script> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <script language="javascript" type="text/javascript"> $("document").ready ( function () { CreateNewLikeButton("http://www.yahoo.com") $("#ChangeToGoogle").click ( function (e) { e.preventDefault(); CreateNewLikeButton("http://www.google.ca") } ); } ); function CreateNewLikeButton(url) { var elem = $(document.createElement("fb:like")); elem.attr("href", url); $("#Container").empty().append(elem); FB.XFBML.parse($("#Container").get(0)); } </script></head><body> <form id="form1" runat="server"> <a id="ChangeToGoogle" href="#">Change To Google</a> <div id="Container"> <fb:like href="http://www.NEVER_LINK_TO_THIS_12345.com"></fb:like> </div> </form></body></html>
You're making this hard on yourself - just render a new iframe-based one.
<html><head> <title>Test Page</title> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(function() { $( '#ChangeToGoogle' ).click( function( event ) { event.preventDefault(); $( '#Container' ).empty().append( $('<iframe />') .attr( 'src', 'http://www.facebook.com/plugins/like.php?href=www.google.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80' ) .attr( 'scrolling', 'no' ) .attr( 'frameborder', 'no' ) .attr( 'style', 'border:none; overflow:hidden; width:450px; height:80px;' ) .attr( 'allowTransparency', 'true' ) ); }); }); </script></head><body> <form id="form1" runat="server"> <a id="ChangeToGoogle" href="#">Change To Google</a> <div id="Container"> <iframe src="http://www.facebook.com/plugins/like.php?href=www.yahoo.com&layout=standard&show_faces=true&width=450&action=like&colorscheme=light&height=80" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:80px;" allowTransparency="true"> </iframe> </div> </form></body>