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 (inste

Answer 1

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:

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.