Как встроить iframe в фейсбук?

Question

У моего сотрудника есть страница в Facebook для компании, в которой мы работаем.

Компания хочет разместить на своем Facebook виджет, позволяющий пользователям вводить свою электронную почту и подписываться на нашу рассылку.

Сотрудник, который работает в Facebook, не является программистом, поэтому он попросил меня что-то создать.

Я сделал небольшую страницу, которая использует jquery и ajax, чтобы вы могли ввести свой адрес электронной почты, и он отправляет его на нашсервер, использующий ajax, чтобы вы никогда не покидали страницу, на которой находитесь.

Мы хотим встроить эту страницу в Facebook с помощью iframe.

Сначала мы просто попытались ввести 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.

Есть ли что-то, что я делаю не так?Я сделал много поисков в Google, пытаясь найти ответы, и все, что я нахожу, варьируется от «facebook не разрешает iframes» до «facebook рекомендует iframes», поэтому я действительно не знаю, что и думать.

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 на холст своего приложения, тогда вы можете просто использовать эту строку:

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

Или просто измените свое приложение с приложения холста FBML на приложение iFrame и укажите URL-адрес обратного вызова Canvas и Connect для текущей страницы или каталога страницы. Если вы не используете элементы API Facebook или FBML, вам, возможно, вообще не нужно быть в приложении FBML.

Кстати: для программного добавления фреймов в Facebook вы можете использовать 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>

Удачи!