sencha 架构师中的 Facebook 点赞按钮答案

【问题标题】：Facebook like button in sencha architectsencha 架构师中的 Facebook 点赞按钮
【发布时间】：2014-11-01 18:30:26
【问题描述】：

我在使用 facebook like 按钮时遇到问题。在 facebook 开发者中，facebook 为我们提供了 3 种不同的方法来在我们的应用程序中集成点赞按钮。在本例中，我使用了所有 3 种方法。

我在 sencha architect touch (Ext.Button) 中创建了 3 个按钮。在我创建了一个基本函数后，我将 3 个方法传递给 HTML 按钮配置：

var me = this, htmlStrBase, htmlStr, htmlStrBase1, htmlStr1, htmlStrBase2, htmlStr2;

htmlStrBase = '<div class="fb-like" data-href="https://www.facebook.com/tecnitalia?ref=ts&fref=ts" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>';
htmlStrBase1 = '<iframe src="//www.facebook.com/plugins/like.php?href=https://www.facebook.com/tecnitalia?ref=ts&fref=ts&amp;width&amp;layout=button&amp;action=like&amp;show_faces=false&amp;share=false&amp;height=35&amp;appId=838403862859130" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:35px;" allowTransparency="true"></iframe>';
htmlStrBase2 = '<html xmlns:fb="http://ogp.me/ns/fb#"><fb:like href="https://www.facebook.com/tecnitalia?ref=ts&fref=ts" layout="button" action="like" show_faces="false" share="false"></fb:like>';

me.getLikebutton().setHtml(htmlStrBase);
me.getLikebutton1().setHtml(htm

lStrBase1);
me.getLikebutton2().setHtml(htmlStrBase2);

当然，我首先启动了 FB.Init（用于桌面和应用程序）：

if(Ext.os.is.Android || Ext.os.is.iOS) {

    FB.init({
        appId      : 'xxxxxxxxxxxxx',
        status     : true,
        nativeInterface: CDV.FB,
        useCachedDialog: false,
        xfbml      : true
    });

    //alert('dopo FB.init');
    FB.Event.subscribe('auth.statusChange', function(response) {
        //alert('status changed');
    });

(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/it_IT/sdk.js#xfbml=1&appId=XXXXXXXXX&version=v2.0";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

}
//Otherwise let's use the the web version
else
    {
        //Wait for sdk to load
        //alert('eseguo fbAsyncInit');
        window.fbAsyncInit = function() {

            FB.init({
                appId      : 'XXXXXXXXXX',
                status     : true,
                xfbml      : true
            });

            FB.Event.subscribe('auth.statusChange', function(response) {
                //alert('status changed');
            });
        };

        //alert(' after fbAsyncInit e now include SDK');
        //Include SDK

        (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/all.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    }

最终的结果是，在桌面上，它可以完美运行，但在我的 android App 上还没有……我没有看到任何类似的按钮。

我说你最后一件事....如果我直接在 html 按钮配置中复制这 3 种方法之一，我可以在我的应用程序上看到类似按钮。但我不能直接在 HTML 配置按钮中复制此方法，因为每次用户登录我的应用程序时我都需要更改 facebook 地址。

有人可以帮助我并且知道一种方法可以在我的应用程序中动态地集成喜欢按钮吗？谢谢你卡罗

嗨，吉拉德。谢谢。它的功能，但我有另一个问题。在android中点赞登录后它显示一个空白页面！！！！不能在桌面上使用 Mozilla 或 Firefox。谢谢卡罗

【问题讨论】：

标签： facebook extjs sencha-touch-2 facebook-like sencha-architect

【解决方案1】：

对我产生影响的一件事是在我的具有fb-root id 的面板已经到位之后添加 Facebook 脚本。

在这里，我创建了一个带有底部工具栏的Container 和另一个容器 (fb-root)，该容器具有 Sencha 页面的 Like 按钮。

Ext.create('Ext.Container', {
    fullscreen: true,
    html : 'My Sencha touch panel',
    items: [
        {
            docked: 'top',
            xtype: 'titlebar',
            title: 'Sencha Touch',
        },{
            docked: 'bottom',
            xtype: 'toolbar',
            ui: 'light',
            items: [{
                xtype: 'container',
                id: 'fb-root',
                width: 50,
                height: 20
            }]
        }
    ],
    listeners: {
        initialize : function (container) {
            (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#xfbml=1&version=v2.0";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));

            var html = '<div class="fb-like" data-href="https://www.facebook.com/senchainc" data-layout="button" data-action="like" data-show-faces="false" data-share="false"></div>';
            container.query('toolbar container')[0].setHtml(html);
        }
    }
});

小提琴：https://fiddle.sencha.com/#fiddle/cmm

【讨论】：

感谢 Guilherme...您能在回复下方看到我的帖子吗？我有问题
不需要查询你的组件。只需将最后一行更改为：container.setHtml(html);。请抹掉你的答案，这不是你应该问更多问题的方式。
嗨吉拉德。谢谢。它的功能，但我有另一个问题。在android中点赞登录后它显示一个空白页面！！！！不能在桌面上使用 Mozilla 或 Firefox。谢谢卡洛