Facebook Connect在移动网站上扩展页面宽度
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Facebook Connect在移动网站上扩展页面宽度相关的知识，希望对你有一定的参考价值。
Facebook的移动示例使用脚本：http://connect.facebook.net/en_US/all.js。此脚本添加到div fb-root。我的移动网站是320px宽，我使用视口元设置。包括Facebook的脚本会在实际内容的右侧产生一个巨大的额外空间，因为它的内容设置为575px宽。我尝试用代码替换575px和320px（“＃fb-root”）。val（）。replace（“575px”，“320px”）;但这没有帮助 - 也许我做错了（使用jQuery）。
任何人都知道如何将其限制为320px？
更新：发现一个错误报告，有两个解决方法：
- 在FB.init中将状态设置为false。我可以验证这确实为我解决了问题，但却破坏了用户登录的能力。
- 在
<div id="fb-root"></div>下直接移动<body>。这不适合我。
资料来源：http://bugs.developers.facebook.net/show_bug.cgi?id=18528
我使用以下css样式规则来击败这个575px＃fb-root宽度问题：
#fb-root > div { left:-575px !important; }
这是有效的，因为如果你在Firebug的html树查看器中找到＃fb-root节点，你会发现它包含一个子div，其样式如下：
position: absolute; top: -10000px; height: 0pt; width: 0pt;
我只是默认在css中设置它
#fb-root{display:none}
当我需要使用FB对话框时（调用FB.ui时），我这样做：
$('#fb-root').show();
在FB.ui的回调中，我这样做
$('#fb-root').hide();
所以这是一个例子：
var inviteFriend = function (msg) {
$('#fb-root').show();
FB.ui({
method: 'apprequests',
message: msg
}, function (response) {
$('#fb-root').hide();
console.log('sendRequest response: ', response);
});
},
这适用于我，我已经在一些设备上测试过。
您提供的代码似乎只替换代码中的值，到目前为止，该代码已经被触发了。您可以尝试在fb-root上使用jquery's .css()方法设置宽度。确保在包含fb js sdk之后触发它，或者在异步加载时放入回调方法。
或者只是将它包装在另一个div中，设置它的高度和宽度，并将put overflow：hidden;
以上是关于Facebook Connect在移动网站上扩展页面宽度的主要内容，如果未能解决你的问题，请参考以下文章
使用Phonegap Facebook Connect Plugin API的离子框架无法使朋友分页工作
从我的移动网站使用 Facebook Messenger 发送 URL