Facebook comments don't appear in extjs container

Question

I want to add Facebook comments to an extjs container. I created a view that is a container with a div inside:

Ext.define('recovery.view.FacebookComment', {

    extend: 'Ext.container.Container',
    xtype: 'facebook-comments',

    requires: [
        'Ext.container.Container'
    ],

    items: [{
        xtype: 'container',
        width: '100%',
        height: 300,
        style: {
            borderColor  : 'green',
            borderStyle  : 'dotted'
        },
        autoScroll: true,
        listeners: {
            beforerender: function (container) {
                // Facebook SDK

                var html = '<div class="fb-comments" data-href="https://recovery.twindb.com" data-width="600" data-numposts="5"></div>';

                (function(d, s, id) {
                    var js, fjs = d.getElementsByTagName(s)[0];
                    if (d.getElementById(id)) {
                        console.log('SDK is already created:');
                        console.log(d.getElementById(id));
                        return;
                    }
                    js = d.createElement(s); js.id = id;
                    js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.5";
                    fjs.parentNode.insertBefore(js, fjs);
                    // container.update(html);
                }(document, 'script', 'facebook-jssdk'));
                Ext.Function.defer(function () {
                    container.update(html);
                }, 1000);
            },
        }
    }]

});

I see the SDK is loaded:

A <script> tag is created as well:

A <div> is created, too:

But the comments don't show up:

The problem is transient, sometimes the comments do show up, somehow it depends on when the SDK is loaded.

What's a problem here? Any workarounds?

Answer 1

After writing some fiddles to simulate your problem I noticed that I had the same problem. After some checking and trying I noticed an error in my console that was caused by the facebook sdk js.

Error: invalid version specified

After some research I found a solution on SO:

I made a simple tweak and changed the path:

From:   //connect.facebook.net/en_GB/sdk.js  
To:     //connect.facebook.net/en_GB/all.js

Here you can found a working Sencha Fiddle:
https://fiddle.sencha.com/#fiddle/11p2
https://fiddle.sencha.com/fiddle/11p2/preview

The code from the Sencha Fiddle:

/*
 * I wrote this example using the Ext.Loader object
 */
Ext.Loader.setConfig({
    enabled: true,
    disableCaching: true
});

/*
 * NOTE: I changed sdk.js to all.js to make it work
 * 
 * I was getting an error from facebook sdk: Error: invalid version specified
 * See: https://stackoverflow.com/a/28578154/408487
 */
Ext.Loader.loadScript('//connect.facebook.net/en_GB/all.js#xfbml=1&version=v2.5');

Ext.application({
    name : 'Fiddle',

    launch : function() {
        Ext.create('Ext.Container', {
            xtype: 'container',
            height: 300,
            style: {
                borderColor  : 'green',
                borderStyle  : 'dotted'
            },

            /* I hate it that I can't use autoEl, but have to add another div through the html property */
            /*autoEl: {
                tag: 'div',
                'data-href': 'https://recovery.twindb.com',
                'data-width': '600',
                'data-numposts': '5'
            },
            componentCls: 'fb-comments',*/
            html: '<div class="fb-comments" data-href="https://recovery.twindb.com" data-width="600" data-numposts="5"></div>',

            autoScroll: true,
            renderTo: Ext.getBody()
        });
    }
});