CODEWITHSUNDEEP
jqueryajaxfacebookdjango-templates
Akamad007
Akamad007

Reputation: 1601

Facebook like and share button on ajax

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.

Upvotes: 6

Views: 7031

Answers (2)

Haritsinh Gohil
Haritsinh Gohil

Reputation: 6272

If you are using multiple facebook share buttons and you also have multiple social media share buttons, then you can totally skip to include all related js which can only slows your page speed, instead of share button and its js, use only link to share your post,

And the best thing is using this method you do not have to do anything when you fetch html using ajax.

example of facebook share link:

https://www.facebook.com/sharer.php?u=[your-url]

You can use it as below:

<a href="https://www.facebook.com/sharer.php?u=[your-url]">Share on facebook</a>

You can also use css to make this link as facebook button look, or you can use image of facebook or svg for facebook.

Upvotes: 0

Juicy Scripter
Juicy Scripter

Reputation: 25918

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);

Upvotes: 21

Related Questions