facebook下,让iframe自适应content

1. 修改Widnows系统配置文件

在c:/windows/system32/drivers/etc/hosts, 增加一行(增加一个域名 www.abc.com)
125.39.164.102 www.abc.com

说明:由于facebook目前要求"Canvas Callback URL"必须是域名的方式,而我手上目前没有域名,在调试期只有先模拟一个了。如果你有域名就不用这步了。

2.修改facebook中的项目配置
(1)修改"Canvas Callback URL"地址
油画 --> Required URLs , 修改Canvas Callback URL为: http://www.abc.com:7070/myApp/

(2)修改"IFrame Size"
油画 --> Canvas Settings, 修改IFrame Size 为 Resizable

注意,一定要确认修改成功! 我在修改时,就因为其它项报错,导致修改"IFrame Size"没有成功,但在页面上却显示修改完成了。白白浪费了一天多时间


3.在页面的Body体内增加如下代码:
<div id="FB_HiddenIFrameContainer" style="display:none; position:absolute; left:-100px; top:-100px; width:0px; height: 200px;"></div>
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<script type="text/javascript">
FB_RequireFeatures(["CanvasUtil"], function(){
FB.XdComm.Server.init("/xd_receiver.htm?v=2");
FB.CanvasClient.setSizeToContent();
});
</script>


4.代理访问的问题
(1)我使用的是火狐的FoxyProxy代理, 在FoxyProxy中新建了一个模板,并且将www.abc.com加入黑名单(黑名单中的URL将不走代理)
(2)将Foxproxy设置为“使用基本其预定义模板的代理服务器”

如果你使用其它代理,将www.abc.com设为不走代理即可

5.facebook中对应的文档
http://wiki.developers.facebook.com/index.php/Resizable_IFrame

你可能感兴趣的:(Facebook)