Search code examples
ajaxfacebookfacebook-social-plugins

Rendering Facebook social plugin using ajax

I've included the JavaScript API codes (below) just below the <body> tag.

<div id="fb-root"></div>
<script>(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_US/all.js#xfbml=1&appId=<APP_ID>";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

I've also added the respective markup for like and comment box.

The social plugins rendered fine when loaded directly from the browser but not on the pages loaded using ajax.

What do I need to do to make sure the social plugins are rendered in the pages loaded through ajax?

Solution

  • Facebook searches for fbml tags once the page is loaded, which is why the social plugins render on load. If you add new ones after the load, you have to tell Facebook to render FBML again. You can go the easy route of just calling FB.XFBML.parse(), or include a DOM element reference to have Facebook scan/render just a part of the page.

    https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/