Reputation: 3382
I have a page with a kind of infinite scrolling. That means the homepage loads n posts everytime the user reach the bottom of the page. Every post has facebook comments loaded with the XFMBL way: after AJAX had loaded the post, the following script will parse the facebook plugin:
$( document ).ready(function() {
FB.XFBML.parse(document.getElementById("<?php echo $_id ?>"), function() {});
});
Actually the "infinite scrolling" does not give me any problems but a the beginning. In fact when I load the whole page, supposing the site will firstly load 5 posts to fill the screen, every facebook comments will be refreshed 5 times. After that I have no other problems (every post loaded later doesn't give any problems).
Can you help me? Thanks in advance
Upvotes: 2
Views: 240
Reputation: 9084
Based on this answer:
FB.XFBML.parse() on individual element does nothing
What you can do is the following:
On your success callback (when requesting new posts), first, create an unique id for those posts. In the above example, you can use:
newDivName = "d" + String(new Date().valueOf());
Then cache the newly requested post (again, same example):
var $newhtml = $("<div id='" + newDivName + "'>" + html + "</div>");
Append it to wherever you have to; and finally, using that unique id, you can do:
FB.XFBML.parse($newhtml[0]);
Basically, the previous mentioned question should solve your question.
Now, it depends on which infinite scroll plugin you are using, but sure it will have a success callback where you can place this code. I don't know if you will access to every post individually or your AJAX request will return all posts in a row. You have to reach the point where you can identify each single of your post, so you can refresh them individually, and the parse the XFBML markup on the fly but individually, so it wont load more times than needed.
Hope it helps !
Upvotes: 1