Блог

Создание приложения для Facebook

02.05.11   |   facebook,
+1 (9)

Недавно писал приложение для Facebook. Тема актуальная, решил составить небольшую шпору(основные моменты), пригодится как мне, так и другим.

Отдельно хочу поблагодарить Hillel, за помощь с Facebook API, без него мне было бы намного сложнее.


Приложение

Для создания приложения идем сюда.

http://www.facebook.com/apps/application.php?id=[APPLICATION_ID] - Ссылка на приложение.

http://apps.facebook.com/[MY_APP_NAME] -  Ссылка на само приложение

http://www.facebook.com/[MY_APP_NAME] - После того как у приложения будет 25 фанов

Вкладка "Web Site"
Aдрес сайта где будет осуществляться аутентификация, базовый домен - чтобы позволить аутентификацию во всех его под доменов.

Вкладка "Facebook Integration"
Для интеграции приложения как iframe. Бронируем желаемый урл, указываем адрес для iframe(место нахождения приложения)

в "Advanced":

  • Deauthorize Callback - при удалении приложения будет послан POST запрос, но в новом API могут быть проблемы.
  • JSON Encoding Empty Arrays - Enabled
  • Canvas Session Parameter - Enabled. Чтобы Graph API работал.


Ссылки


Дополнительно

Ширины iframe не должна быть больше 760px. Это стандарт Facebook!

По дефолту высота iframe-а маленька, чтобы по высоте не было ограничение, необходимо использовать FB.Canvas.setAutoResize:

window.fbAsyncInit = function() { // ... FB.Canvas.setAutoResize(1); // обновлять каждую X секунд };

Но могут быть проблемы в некоторых браузерах, что бы их обойти:


function sizeChangeCallback(heightLength) {
    FB.Canvas.setSize({width: 760, height: heightLength});
}
 
$(document).ready(function() {
    setTimeout(function() {
        sizeChangeCallback($.getDocHeight());
    }, 1);
});
 
$.getDocHeight = function(){
    return Math.max(
        $(document).height(),
        $(window).height(),
        /* For opera: */
        document.documentElement.clientHeight
    );
};

Важно, когда работаешь с iframe, то во всех ссылках должен быть атрибут target со значением _top!

Очень осторожно с длинными ID!


$fbId = 100000926675492;
$id = (int) $fbId;
echo $id; // outputs 1203122724;

Поддержка fbml в соответствии определенному dtd:


<html xmlns:fb="http://www.facebook.com/2008/fbml">

Инициализация JS SDK:


<div id="fb-root"></div>
<script type="text/javascript">
      window.fbAsyncInit = function() {
          FB.init({
              appId   : 'getAppId(); ?>',
              session : , // don't refetch the session when PHP already has it
              status  : true, // check login status
              cookie  : true, // enable cookies to allow the server to access the session
              xfbml   : true // parse XFBML
          });
          // whenever the user logs in, we refresh the page
          FB.Event.subscribe('auth.login', function() {
              window.location.reload();
          });
          FB.Canvas.setAutoResize(1);
      };
      (function() {
          var e = document.createElement('script');
          e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
          e.async = true;
          document.getElementById('fb-root').appendChild(e);
      }());
  </script>
 

Альтернативное подключение jQuery


<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1"); // 1.4.3
</script>

На Faceboo есть проблема с синхронизацией между серверами и с обновлением информации! Это необходимо учесть.
Так же API часто обновляется и что то может ломаться.

Есть проблема с cookies внутри iframe - решение на хабре


Следующая статья

Оставить комментарий

Имя*
E-mail* (не публикуется)
Текст сообщения*
Код*