Reload facebook like button after ajax call
Tue 17th May 2011
This is how to force the a facebook like button refreshes after an ajax call.
I had an issue. When calling an ajax function within a lightbox, if there was a facebook like button being called then it would not render the like button. The facebook like button needs to be rerendered or reloaded using jquery/javascript.
I took this xfbml like code:
<fb:like href="http://mysite" send="false" layout="button_count" width="450" show_faces="true" font="verdana"></fb:like>
and added a class to it like so:
<div class="facebook"><fb:like href="http://mysite" send="false" layout="button_count" width="450" show_faces="true" font="verdana" class="facebox-fblike></fb:like></div>
Notice that I also wrapped the button within another div of class facebook. I then created a function to reload the facebook like button:
function reloadSocial() $('.twitter a').each(function() var loadedTweetButton = new twttr.TweetButton($(this).get(0)); loadedTweetButton.render(); ); $('.facebox-fblike').each(function() $('.facebook').each(function() FB.XFBML.parse($(this).get(0)); ); );
This reloadSocial function needs to be called after the ajax load. For example, I wanted it to load once the facebox ajax call had completed using this:
$(document).bind('reveal.facebox', function() reloadSocial(); );
