Menu
I have trawled the net and Stack Overflow and have not found an adequate answer to this question. Before I start the trial and error process of finding my own solution, I thought I would turn to the Stack Overflow braintrust and see if there was already a successful implementation.
I have an AJAX powered page that degrades properly for non-javascript browsers and SEO. Each click in the AJAX version can be represented by a unique URL.
What I want to do is to dynamically change the HREF of the button. I do understand that this tag is converted to standard HTML at runtime (namely into a nasty table / iframe layout).
I was just wondering if anyone had any insight as to how to implement this FB like button onto AJAX powered pages?
Cheers in advance :)
EDIT:
What do you think of this method I just hacked together? See any huge problems with it?
<!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") $("a#ChangeToGoogle").click ( function (e) { e.preventDefault(); CreateNewLikeButton("http://www.google.ca") } ); } ); function CreateNewLikeButton(url) { var elem = $(document.createElement("fb:like")); elem.attr("href", url); $("div#Container").empty().append(elem); FB.XFBML.parse($("div#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> 
692
When a user clicks the like button, the content appears in the News Feeds of that user's friends. The button also displays the number of users who liked each piece of content, and may show a full or partial list of those users.
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){} }); http://developers.facebook.com/docs/reference/plugins/like/
169
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> If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With