使用http访问我的facebook iframe页面时,如何获取Modal而不是弹出窗口？

Question

使用http访问我的facebook iframe页面时,如何获取Modal而不是弹出窗口？

当使用fb.UI时,https托管的iframe页面会给出一个正确的模态对话框,但是同一个页面通过http给出一个弹出窗口

这是我的代码,主要来自facebook对话框帮助页面:

<html xmlns="http://www.w3.org/1999/xhtml"
  xmlns:fb="https://www.facebook.com/2008/fbml">
  <head>
    <title>My Feed Dialog Page</title>
  </head>
  <body>
    <p>oh, hello.</p>
    <div id='fb-root'></div>
    <script src='//connect.facebook.net/en_US/all.js'></script>
    <p><a onclick='postToFeed(); return false;'>Post to Feed</a></p>
    <p id='msg'></p>

    <script> 
      FB.init({appId: "myappid", status: true, cookie: true});

      function postToFeed() {

        // calling the API ...
        var obj = {
          method: 'feed',
          link: 'http://www.facebook.com/testapp/app_myappid/',
          picture: 'http://fbrell.com/f8.jpg',
          name: 'Facebook Dialogs',
          caption: 'Reference Documentation',
          description: 'Using Dialogs to interact with users.',

        };

        function callback(response) {
          document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
        }

        FB.ui(obj, callback);
      }



    </script>
  </body>
</html>

Run Code Online (Sandbox Code Playgroud)

因此,当我通过https://www.facebook.com/testapp/app_myappid访问该页面时, 我得到了一个正确的模态对话框,但http://www.facebook.com/testapp/app_myappid 给出了一个可怕的弹出窗口.

Answer 1

Nit*_*mer 5

您是否尝试过添加display参数,如下所示:

var obj = {
    method: 'feed',
    link: 'http://www.facebook.com/testapp/app_myappid/',
    picture: 'http://fbrell.com/f8.jpg',
    name: 'Facebook Dialogs',
    caption: 'Reference Documentation',
    description: 'Using Dialogs to interact with users.',
    display: 'iframe'
};

...

FB.ui(obj, callback);

Run Code Online (Sandbox Code Playgroud)

参考:https://developers.facebook.com/docs/reference/dialogs/

编辑

正如我在同一份文件中所述:

如果指定iframe,则必须具有有效的access_token.

查看代码,您似乎确实跳过了身份验证过程.你看,你不能只调用FB.init然后开始使用api,你需要让SDK验证用户.

有一些方法可以执行此操作,您应该查看客户端身份验证文档以获取更多信息.这是你修改过的代码,我添加了SDK 的FB.login方法的使用,并声明:

调用FB.login会导致JS SDK尝试打开弹出窗口.因此,只应在用户单击事件后调用此方法,否则大多数浏览器都会阻止弹出窗口.

因此,您可能需要授权此弹出窗口才能工作,您实际上应该使用另一种方法(如客户端auth doc中所述)或者在用户单击某些内容后调用此方法.这只是为了给你一个正确的方向:

function callback(response) {
    document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
}

function postToFeed() {
    // calling the API ...
    var obj = {
        method: 'feed',
        link: 'http://www.facebook.com/testapp/app_myappid/',
        picture: 'http://fbrell.com/f8.jpg',
        name: 'Facebook Dialogs',
        caption: 'Reference Documentation',
        description: 'Using Dialogs to interact with users.',
    };

    FB.ui(obj, callback);
}

FB.init({
    appId: "myappid", 
    status: true, 
    cookie: true
});

FB.login(function(response) {
    if (response.authResponse) {
        postToFeed();
    }
    else {
        alert("user NOT logged in");
    }
});

Run Code Online (Sandbox Code Playgroud)

第二次编辑

由于它是一个画布应用程序,并且您希望避免登录弹出窗口,因此还有另一种解决方案.

如果您收到该错误消息,则表示您(可能)缺少客户端身份验证,您可以从服务器端传递访问令牌并在客户端中使用它,或者您可以执行以下操作:

window.fbAsyncInit = function() {
    FB.init({
        appId: "myappid", 
        status: true, 
        cookie: true
    });

    FB.getLoginStatus(function(response) {
        if (response.status === "connected") {
            postToFeed();
        }
        else {
            console.log("not logged in to facebook or hasn't authorized the app");
        }
    };
};

function postToFeed() {
    // calling the API ...
    var obj = {
        method: 'feed',
        link: 'http://www.facebook.com/testapp/app_myappid/',
        picture: 'http://fbrell.com/f8.jpg',
        name: 'Facebook Dialogs',
        caption: 'Reference Documentation',
        description: 'Using Dialogs to interact with users.',
    };

    function callback(response) {
        document.getElementById('msg').innerHTML = "Post ID: " + response['post_id'];
    }

    FB.ui(obj, callback);
}

Run Code Online (Sandbox Code Playgroud)

这不会打开弹出窗口或任何类似的东西,只会检查用户登录状态.您可以阅读有关FB.getLoginStatus方法的更多信息.

另外,我建议在初始化js sdk时使用Channel File参数.在这种情况下它不应该有任何区别,但它更安全.

归档时间：	13 年，7 月前
查看次数：	5367 次
最近记录：	13 年，7 月前