Facebook and share button on ajax

Question

Background: - I use ajax to get an object called "foo_posts". In this post I use facebook sharing and as a button

{% for post in foo_posts %}
    <div class="foo">
        {{ post }}
        <div class="fb-like" data-send="true" data-width="450" data-href="http://foo/foo/detail/{{ foo.id }}/" data-show-faces="true"></div>
</div>

{% endfor%} These messages are now populated using Ajax.

Problem: - facebook like and share initialized

$(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_GB/all.js#xfbml=1&appId=245185848840630";
              fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));

This does not work. How can I call this function so that similar and general data is populated correctly? Should it be called in ajax success function. (Now I call it on the page itself)

PS: - I tried it as a function of success. I guess I'm doing it wrong.

Answer 1

XFBML tags are only processed upon initialization of the Facebook default JS-SDK.

FB.XFBML.parse() DOM .

XFBML :

FB.XFBML.parse();
// OR
FB.XFBML.parse(DOM_ELEMENT_WHERE_AJAX_CONTENT_IS_PLACED);