Блог
Создание приложения для Facebook
Недавно писал приложение для 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 работал.
Ссылки
- Старт 1
- Старт 2
- Сайт разработчиков
- Facebook PHP SDK - можно найти пример по работе с Facebook API: аутентификация, инсталляция, получение данных и т.д.
- Graph API - без него некуда
- Facebook Query Language (FQL) - пригодится
- Основа + Видео
- Консоль для тестирования
- Примеры
- Интернационализация
- Офф. форум (англ. яз)
- Очень полезные статьи для разработки под Facebook.
- FBJS
- И куда без Roadmap
Дополнительно
- Для реализации комментариев
- Для реализации кнопки Share
- Список запрашиваемых у пользователя разрешений
- Like button
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 - решение на хабре
