$.getScript loading facebook like script, button not displaying

I only want one js link and one div on the html page.

Inside the js file I'm loading scripts and divs for twitter button, Google +1 and the buttons are displaying and working correctly.

The facebook like button script alerts that it's loaded, but the button doesn't display - any ideas why? It's a text/ecmascript, should this开发者_如何学Python make a difference?

$.getScript("http://connect.facebook.net/en_US/all.js#appId=211332918913418&xfbml=1", function() {
    alert ("script executed");
});


$("#social-media").append('<div id="fb-root"></div><fb:like href="http://ourworldlive.tv/index.html" send="false" layout="box_count" width="55" show_faces="false" font=""></fb:like>');

If script is in head of document, button renders.

---

On our docs we have a little snippet about how to load the JS sdk asynchronously.

https://developers.facebook.com/docs/reference/javascript/

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

---

Do you have and the FB:like button so it can actually create it? Those things need to be on the page as well