Question

If you go to here you will see a facepile half way down the page:
http://www.flirtwithme.co/main.php#home

Then if you click on another tab (across the top) like profile or mail and then go back to the ‘Home Tab’ the facepile doesn’t appear again.

The page is using AJAX to replace the middle DIV.

This is the facepile code that is on the DIV that is being replaced:

 <div id="fb-root"><fb:like-box href="facebook.com/seemeagaindating" width="237" height="498" show_faces="true" stream="false" header="true"></fb:like-box></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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=192869610731913";
   fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Can anyone give me advise on how to get the facepile to appear after I move between Tabs/DIV’s.

thankyou

Answer 1

Hum .. Maybe you should insert the FB script and the #fb-root div on your main page (with no ajax) :

<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 = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=192869610731913";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div id="fb-root"></div>

And then add the likebox in your ajax content.

<fb:like-box href="facebook.com/seemeagaindating" width="237" height="498" show_faces="true" stream="false" header="true"></fb:like-box>

To be honest, I haven’t tested this, so I don’t know if it’ll work but I think it could be a solution or at least a way to the solution.

(you don’t have to put your like-box in the #fb-root div. It’ll just be used to load stuff from facebook.)