Facebook 댓글이 extjs 컨테이너에 표시되지 않습니다. (Facebook comments don't appear in extjs container)

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);
            },
        }
    }]

});

도 생성됩니다.

하지만 댓글이 표시되지 않습니다.

문제는 일시적이며 때로는 주석이 표시되기도 합니다. 어떻게든 SDK가 로드되는 시점에 따라 다릅니다.

여기 뭐가 문제야? 해결 방법이 있습니까?

하지만 댓글이 표시되지 않습니다.

문제는 일시적이며 때로는 주석이 표시됩니다. SDK가 로드되었습니다.

여기에 무엇이 문제입니까? 해결 방법이 있습니까?

하지만 댓글이 표시되지 않습니다.

문제는 일시적이며 때로는 주석이 표시됩니다. SDK가 로드되었습니다.

여기에 무엇이 문제입니까? 해결 방법이 있습니까?

여기서 문제가? 해결 방법이 있습니까?

여기서 문제가? 해결 방법이 있습니까?

---

참조 솔루션

방법 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()
        });
    }
});

(by akuzminsky、Tarabass)

참조 문서

1. Facebook comments don't appear in extjs container (CC BY‑SA 2.5/3.0/4.0)