Facebook Like Box not loading on Ember app

Question

I'm trying to get the like box to work inside our ember app, in a template called about. The problem is that if I enter the ember app from another route (instead of about route), then navigate to the about route with link-to helpers, then the like box is not rendered. Instead, if I enter/refresh the about route directly, it renders just fine. Any ideas on how to make it render even if somebody navigates to that route from another route ?

templates/about.hbs:

...
<div class = "fb-like-box" data-href = "https://www.facebook.com/app-link" data-width = "250"
                 data-height = "313" data-colorscheme = "light" data-show-faces = "true" data-header = "false"
                 data-stream = "false" data-show-border = "true"></div>
...

views/application.js:

export default Ember.View.extend({

  facebook_app_id: config.APP.facebook_app_id,

  initLibs: function ()
            {
              // initialize Facebook SDK
              var facebook_id = this.facebook_app_id;
              window.fbAsyncInit = function ()
              {
                FB.init({
                  appId:   facebook_id,
                  xfbml:   true,
                  version: 'v2.1'
                });
              };
              (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/sdk.js";
                fjs.parentNode.insertBefore(js, fjs);
              }(document, 'script', 'facebook-jssdk'));
            }.on('didInsertElement')
});

Answer 1

By default the Facebook JS SDK “goes through” your document once when it is initialized, and looks for elements to parse and convert into FB social plugins. But if you only load and add those elements later, that of course doesn’t work.

But the SDk offers a method to re-parse the document for such elements, FB.XFBML.parse – so call that after your new elements are added to the DOM. (You can either let it look through the whole document again, or pass in a reference to a specific DOM element, so that it will only evaluate a “sub-tree” of the document, for better performance.)

Answer 2

The problem I see is that your script is manipulating the DOM outside of Ember. This will make it impossible for ember to track the state of the DOM and manipulate it.

Your logic assumes that the script tag will be first, which you have no guarantee of since Ember is creating and removing script tags.

Rather than creating the element through code, you can simply include the script tag directly.

Put this in app/index.html:

<script src="//connect.facebook.net/en_US/sdk.js"></script>

Remove your logic from application.js and implement the following in views/about.js:

export default Ember.View.extend({

    facebook_app_id: config.APP.facebook_app_id,

    didInsertElement : function(){
        this._super();
        Ember.run.scheduleOnce('afterRender', this, function(){
              // initialize Facebook SDK
              var facebook_id = this.facebook_app_id;
              window.fbAsyncInit = function ()
              {
                FB.init({
                  appId:   facebook_id,
                  xfbml:   true,
                  version: 'v2.1'
                });
              };                    
        });
    }
});

You can also extract this functionality into a component, since it seems like a perfect candidate.