admin管理员组文章数量:1414605
When using fb.UI https hosted iframe pages give a proper modal dialog, but the same page via http gives a popup
here is my code, largely from the facebook dialogs help page:
<html xmlns=""
xmlns:fb="">
<head>
<title>My Feed Dialog Page</title>
</head>
<body>
<p>oh, hello.</p>
<div id='fb-root'></div>
<script src='//connect.facebook/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: '/',
picture: '.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>
So when i go to the page via I get a proper modal dialog but gives a horrid pop up.
When using fb.UI https hosted iframe pages give a proper modal dialog, but the same page via http gives a popup
here is my code, largely from the facebook dialogs help page:
<html xmlns="http://www.w3/1999/xhtml"
xmlns:fb="https://www.facebook./2008/fbml">
<head>
<title>My Feed Dialog Page</title>
</head>
<body>
<p>oh, hello.</p>
<div id='fb-root'></div>
<script src='//connect.facebook/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./testapp/app_myappid/',
picture: 'http://fbrell./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>
So when i go to the page via https://www.facebook./testapp/app_myappid I get a proper modal dialog but http://www.facebook./testapp/app_myappid gives a horrid pop up.
Share Improve this question asked Apr 3, 2012 at 11:38 WillWill 4,7443 gold badges40 silver badges70 bronze badges1 Answer
Reset to default 5Have you tried adding the display parameter, like so:
var obj = {
method: 'feed',
link: 'http://www.facebook./testapp/app_myappid/',
picture: 'http://fbrell./f8.jpg',
name: 'Facebook Dialogs',
caption: 'Reference Documentation',
description: 'Using Dialogs to interact with users.',
display: 'iframe'
};
...
FB.ui(obj, callback);
Reference: https://developers.facebook./docs/reference/dialogs/
Edit
As it says in the same document I posted:
If you specify iframe, you must have a valid access_token.
Looking at your code, you did seem to skip the authentication process. You see, you can't just call FB.init and then start using the api, you need to ask the SDK to authenticate the user.
There are some ways to do so, you should check the Client-Side Authentication document for more info. Here's your modified code, I added the use of the FB.login method of the SDK, and it states that:
Calling FB.login results in the JS SDK attempting to open a popup window. As such, this method should only be called after a user click event, otherwise the popup window will be blocked by most browsers.
So you might need to authorize this popup for it to work, you should in reality use another approach (as discussed in that client side auth doc) or just call this method after a user clicked something. This is just to give you a nudge to the right direction:
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./testapp/app_myappid/',
picture: 'http://fbrell./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");
}
});
2nd Edit
Since it's a canvas app, and you would like to avoid the login popup, there's another solution.
If you get that error message it means that you're (probably) missing a client side auth, you can pass along the access token you have from the server side and use it in the client, or you can do something like this:
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./testapp/app_myappid/',
picture: 'http://fbrell./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);
}
This won't open a popup or anything of that sort, and will just check the user login status. You can read more about the FB.getLoginStatus method.
Also, I remend using the Channel File parameter when initializing the js sdk. It should not make any difference in this case, but it's safer.
本文标签：
版权声明：本文标题：javascript - How can I get a Modal rather than a pop up when using http to access my facebook iframe page? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745194624a2647077.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论