如何在facebook中嵌入iframe?

时间:2010-06-24 18:28:51

标签: facebook iframe

我的一名员工为我们工作的公司维护一个facebook页面。

该公司想要一个小部件放在他们的Facebook上,以允许用户输入他们的电子邮件并订阅我们的时事通讯。

做facebook的员工不是一个程序员,所以他让我建立一些东西。

我创建了一个使用jquery和ajax的小页面,允许您输入您的电子邮件地址,然后使用ajax将其发送到我们的服务器,这样您就不会离开您所在的页面。

我们希望使用iframe在facebook上嵌入此页面。

首先我们尝试输入iframe,但这不起作用,

然后我们找到了一个教程并尝试按照这样的方式嵌入iframe:

<a onClick="outside_location.setInnerFBML(link_1);" style="cursor: pointer;">Let's see that iframe....</a>
<div id="outside_location"></div>
<fb:js-string var="link_1">
<fb:iframe height="500" allowTransparency="true" frameborder="0" scrolling="no" style="width:100%; border:none" src="http://URL-TO-OUTSIDE-LOCATION"></fb:iframe>
</fb:js-string>

<script type="text/javascript" charset="utf-8">
var outside_location = document.getElementById('outside_location');
</script>

似乎facebook正在向我们的变量添加内容,因此link_1变为a325461252_link_1

然后我们得到一个像这样的JS错误:

  

未捕获的参考错误:   a325461252_link_1未定义

但是每隔一段时间它就会起作用,但99%的时间我们都会收到这个错误。

我之前从未为facebook制作任何东西,我不确定是否有某种facebook的做事方式。

我做错了吗?我做了很多谷歌搜索试图找到答案,我发现的一切从“facebook不允许iframes”到“facebook推荐iframes”,所以我真的不知道该怎么想。

1 个答案:

答案 0 :(得分:3)

检查您的应用程序是否设置为FBML应用程序而不是Iframe应用程序。默认情况下,iframe应用程序不会扩展fb:...标记。还要检查DOM(Chrome或Firebug)以查看单击链接时是否更改了Dom,但iframe只是不可见。

我刚刚测试了以下内容并且有效:

<hr/>
<a onClick="outside_location.setInnerFBML(location_two);" style="cursor: pointer;">Other IFrame Location</a>
<div id="outside_location" width="540" height="270" >
  <fb:iframe width="540" height="270" frameborder="1" src="http://www.yahoo.com" />
</div>

<fb:js-string var="location_two">
    <fb:iframe width="540" height="270" frameborder='1' src='http://www.google.com' />
</fb:js-string>

<script type="text/javascript" charset="utf-8">
  var outside_location = document.getElementById('outside_location');
</script> 

如果您只想将iFrame添加到应用程序画布中,那么您只需使用以下行:

<fb:iframe width="720" height="570" frameborder="1" src="http://www.yahoo.com" />

或者只是将您的应用程序从FBML画布应用程序更改为iFrame应用程序,并将Canvas Callback和Connect URL指向当前页面或页面的目录。如果您没有使用Facebook的API或FBML元素,那么您可能根本不需要使用FBML应用程序。

BTW:要以编程方式在Facebook中添加iframe,您可以像这样使用JavaScript:

<script type="text/javascript">

    var Iframe = document.createElement('iframe');
    Iframe.setStyle('smartsize','true');
    Iframe.setStyle('frameborder','yes');
    Iframe.setStyle('scrolling','no');
    Iframe.setStyle('include_fb_sig','true');
    Iframe.setStyle('width','500px');
    Iframe.setStyle('height','500px');
    Iframe.setSrc("http://www.msn.com");
    document.getRootElement().appendChild(Iframe);

</script>

祝你好运!