如何在Facebook中嵌入iframe？ [英] How to embed iframe in facebook?

问题描述

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

Facebook的联系人不是一个程序员，所以他要我建立一些东西。

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

我们要使用iframe在Facebook上嵌入此页面。

首先，我们刚刚尝试输入不起作用的iframe，

然后我们找到了一个教程，并尝试嵌入iframe，如下所示：

 < a onClick =outside_location.setInnerFBML（link_1）; style =cursor：pointer;>我们来看看iframe ....< / a> 
< div id =outside_location>< / div> 
< fb：js-string var =link_1> 
< fb：iframe height =500allowTransparency =trueframeborder =0scrolling =nostyle =width：100％; border：nonesrc =http：// URL- TO-OUTSIDE-LOCATION>< / FB：IFRAME> 
< / fb：js-string> 
 
< script type =text / javascriptcharset =utf-8> 
 var outer_location = document.getElementById（'outside_location'）; 
< / script> 
  

似乎Facebook正在将事情附加到我们的变量，以便 link_1 变成类似 a325461252_link_1

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

未收到参考错误：
a325461252_link_1未定义

但是每隔一段时间它会工作，但99％的时间我们得到这个错误。

我从来没有为Facebook制作任何东西，我不知道那里是某种Facebook的做事方式。

有什么我做错了吗？我已经做了很多google搜索，试图找到答案，我发现的一切都有所不同，facebook不允许iframe到facebook推荐iframe，所以我真的不知道该怎么想。

解决方案

检查您的应用程序是否被设置为FBML应用程序，而不是Iframe应用程序。默认情况下，iframe应用程序不会扩展fb：...标签。还要检查DOM（Chrome或Firebug），以查看当您单击链接时，Dom是否正在更改，但是iframe不可见。

我刚刚测试了以下内容：

 小时/> 
< a onClick =outside_location.setInnerFBML（location_two）; style =cursor：pointer;>其他IFrame位置< / a> 
< div id =outer_locationwidth =540height =270> 
< fb：iframe width =540height =270frameborder =1src =http://www.yahoo.com/> 
< / div> 
 
< fb：js-string var =location_two> 
< fb：iframe width =540height =270frameborder ='1'src ='http：//www.google.com'/> 
< / fb：js-string> 
 
< script type =text / javascriptcharset =utf-8> 
 var outer_location = document.getElementById（'outside_location'）; 
< / script> 
  

如果您想要做的是将iFrame添加到应用程序画布中，那么可以直接使用此行：

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

或者只是将您的应用程序从FBML画布应用程序更改为iFrame应用程序，并指出您的Canvas回调和连接您当前页面或页面目录的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> 
  

祝你好运！

An associate of mine maintains a facebook page for the company we work for.

The company wants a widget to put on their facebook to allow users to enter their email and subscribe to our newsletter.

The associate who does facebook is not a programer so he asked me to build something.

I made a small page that uses jquery and ajax to allow you to enter your email address and it sends it to our server using ajax so you never leave the page you are on.

We want to embed this page on facebook using an iframe.

First we just tried entering the iframe, which did not work,

then we found a tutorial and tried to embed the iframe the way it says like this:

<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>

It seems like facebook is appending things to our variables so link_1 becomes something like a325461252_link_1

Then we get a JS error like this:

Uncaught reference error: a325461252_link_1 not defined

But every once in a while it will work but 99% of the time we get this error.

I have never built anything for facebook before, I am not sure there is is some sort of facebook way of doing things.

Is there something I am doing wrong? I have done many google searches trying to find answers and everything I find varies from "facebook does not allow iframes" to "facebook recommends iframes" so I really don't know what to think.

解决方案

Check to see that your application is setup as an FBML applicaiton and not an Iframe application. An iframe application will not expand fb:... tags by default. Also inspect the DOM (Chrome or Firebug) to see if the Dom is getting changed when you click the link, but the iframe just isn't visible.

I just tested the following and it worked:

<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> 

If all you wanted to do is add an iFrame to your application canvas then you can simply use this line:

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

Or just change your application from an FBML canvas application to an iFrame application and point your Canvas Callback and Connect URL to your current page or page's directory. If you aren't using Facebook's API or FBML elements then you may not need to be in an FBML application at all.

BTW: To programmatically add iframes in Facebook you can use JavaScript like so:

<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>

Good Luck!

这篇关于如何在Facebook中嵌入iframe？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！