如何将Facebook对话框放在自定义模式/ html中

时间:2014-03-03 01:09:39

标签: javascript jquery html facebook twitter-bootstrap-3

我有一个Facebook模式对话框,我想放在一个自定义模式对话框中(作为html元素)。这就是我到目前为止所做的:

对于Facebook对话:

$(document).ready(function(){
window.fbAsyncInit = function () {
    FB.init({ appId: '***************', cookie: true, xfbml: true, oauth: true });

    // *** here is my code ***
    if (typeof facebookInit == 'function') {
        facebookInit();
    }
};

(function(d){
    var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
    js = d.createElement('script'); js.id = id; js.async = true;
    js.src = "//connect.facebook.net/en_US/all.js";
    d.getElementsByTagName('head')[0].appendChild(js);
}(document));

function facebookInit() {
   FB.ui({
    url : 'http://www.google.com',
    method: 'feed',
    name: 'The name',
    link: 'crowd.com',
    caption: 'An example caption',
}, function (response) {
    if (response && response.post_id) {
        alert('Post was published.');
    } else {
        alert('Post was not published.');
    }
}); 
}
});

对于模态:

<div id="myModal1new" class="modal1 hide welcome-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
</div>

<div class="modal-header"></div>
            <div class="modal-body">
                <div id="fb-root"></div>
            </div>

无论如何我可以将这两者结合起来(将FB对话放在自定义模态中)?也许有各种各样的iframe?提前谢谢。

1 个答案:

答案 0 :(得分:3)

坏消息你不能这样做,所有的网址都有像sharer.php分享的网址和网址的提要对话框,如下所示:

https://www.facebook.com/dialog/feed?
  app_id=145634995501895
  &display=page&caption=An%20example%20caption 
  &link=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fdialogs%2F
  &redirect_uri=https://developers.facebook.com/tools/explorer

不会在iframe内部渲染,因为facebook会阻止所有内容在一个内部呈现。这是当您尝试使用facebook内容创建iframe时引发的错误:

Refused to display 'https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fwww.google.com' in a frame because it set 'X-Frame-Options' to 'DENY'.

由于您无法使用iframe,并且Feed对话框每次都会打开一个新窗口,您可以创建自己的“共享对话框”的唯一方法就是创建自己的“共享对话框”,但请记住,要实现此目的,您必须要求用户授权代表他们发帖。