facebook - 如何在 Facebook 中嵌入 iframe？

Question

我的一位同事为我们工作的公司维护着一个 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 错误:

Uncaught reference error: a325461252_link_1 not defined

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

我以前从未为 Facebook 构建过任何东西，我不确定 Facebook 是否有某种做事的方式。

我是不是做错了什么？我在谷歌上进行了多次搜索，试图找到答案，但我发现的所有内容都各不相同，从“facebook 不允许 iframe”到“facebook 推荐 iframe”，所以我真的不知道该怎么想。

Answer 1

检查您的应用程序是否设置为 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 添加到应用程序 Canvas ，那么您只需使用此行即可:

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

或者只是将您的应用程序从 FBML Canvas 应用程序更改为 iFrame 应用程序，并将您的 Canvas 回调和连接 URL 指向当前页面或页面目录。如果您不使用 Facebook 的 API 或 FBML 元素，那么您可能根本不需要使用 FBML 应用程序。

顺便说一句:要以编程方式在 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>

祝你好运!