Question

I have added Facebook’s like button inside the first tab of a JQuery Tools’ tabs.

When the page is loaded the first tab opens and Facebook’s like button appears, this works as expected, but when you click on the second/third/… tab and then return to the first tab, Facebook’s like button does not appear any more…

The following is what I added to the first tab for the addition of the like button:

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "http://connect.facebook.net/en_US/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

and placed the following code where I want the button to appear in the first tab:

<div class="fb-like" data-href="http://www.mysite.com/example/thisPage" data-send="false" data-layout="box_count" data-width="60" data-show-faces="false"></div>

Any idea what’s happening here, and how to reload the like button every time the first tab is loaded?

Answer 1

I’m guessing this has to do with AJAX and of course you need to reload the FB button after you call it in with AJAX. Add this to the end of your function to reinitialize Facebook and load the Like button:

FB.XFBML.parse();