I'm using infinite scroll, and inside the elements I load at runtime I have a Facebook like button. Everything works the first time I call the script, however, it seems as if I can't load it more than once, and therefore the elements created when scrolling wont have a working Facebook button due to not existing when the script was loaded. Nothing happens if I do this after more content is loaded.
Looking at the script ( http://connect.facebook.net/en_GB/all.js ), it looks like the script will only run once per page, is there any way around this?
My code:
var js, fjs = d.getElementsByTagName(s)[0];
js = d.createElement(s); js.id = id;
js.async=true;
js.src = "http://connect.facebook.net/en_GB/all.js#xfbml=1&appId=xxxxxxxxxxxxx";
fjs.parentNode.insertBefore(js, fjs);
I am aware that a simple solution is The JavaScript SDK that gives us a function called FB.XFBML.parse.
FB.XFBML.parse
Once the infinite scroll function is called, I could load more data by simply calling this function again to render the new plugins. But this parse's all the previously loaded like buttons on page. So if I have existing 20 like buttons, after the scroll and calling the Parse function, 10 more are like buttons are created but the previous once are parsed too.
So how do I work around this?
according to documentation, you can do FB.XFBML.parse on specific element
FB.XFBML.parse(document.getElementById('foo'));
http://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/