Facebook like and share button on ajax

Question

Background: - Am using ajax to get a entity called as "foo_posts". In this post am using facebook share and like 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 %} Now these posts are being populated using Ajax.

Problem: - The facebook like and share gets initialized by

$(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 is not working. How can I call this function, so that the like and share get populated properly ? Should it be called in the ajax success function. (Right now am calling it on on page itself)

P.S :- I tried it in the success function. I guess am doing it wrong.

Answer 1

XFBML tags are only parsed on Facebook JS-SDK initialization by default.

You should call FB.XFBML.parse() method once you add social plugin to DOM after page is rendered.

You may call it for all document or by specifying element to search XFBML elements within:

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