Facebook like button won't work when initialised with jQuery?

Question

I'm following this guide to load and initialise the facebook SDK. I checked console, and no errors were found.

$(document).ready(function(){
  $.ajaxSetup({ cache: true });
  $.getScript('//connect.facebook.net/en_US/all.js', function(){
    FB.init({
      appId: 'xxxx'
    });     
  });
});

Then I want to add a like button, as told here

<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>

This fails to display anything on the my website, which is a bare canvas with <div id="fb-root"></div>being the only other element. However, if I initialise the JS SDK via pure javascript, the button works.

Why won't it work when loaded up using the jQuery above? Do I need to add something else?

Answer 1

If you read the FB.init documentation, there are some parameters that can be used while defining FB.init. One of the parameter is xfbml which-

Determines whether XFBML tags used by social plugins are parsed, and therefore whether the plugins are rendered or not. Defaults to false.

You said that in case of pure javascript the like plugin worked that's beacause you must have set xfbml to true. To get your jquery code to work simply define this paramter to true which is false by default-

$.getScript('//connect.facebook.net/en_US/all.js', function(){
    FB.init({
      appId: 'xxxx',
      xfbml: true
    });     

and it shall work. Good luck!