Пользователь
0,0
рейтинг
2 мая 2008 в 10:48

Разработка → Как создавать приложения для Facebook

Зачем писать приложения для Facebook


Случалось ли вам задумываться о том, что наиболее востребованные приложения на Facebook просты и похожи по сути? Все эти виртуальные объятья, поздравительные открытки, пожелания, симпатии, пинки, смайлы, карма-обмен и прочие психологические «поглаживания» отличаются лишь формой, в которой пользователь получает свою очередную порцию внимания. Таким образом, это ниша всегда открыта для желающих опробовать собственную идею. Особенно теперь, когда Facebook заговорил по-русски, и русскоязычные приложения особенно востребованы. Приложения Facebook набирают аудиторию на манер «сарафанного радио», подобно цепной реакции. Если у вас есть действительно стоящая идея, то реализовав ее, вы получаете потенциальную аудиторию в 20 млн. пользователей Facebook. При таком размахе не удивительно, что некоторые любительские приложения для Facebook продаются за десятки тысяч долларов.

Впрочем, скептики могут здесь справедливо заметить: «Если так просто заработать на Facebook, то почему же мы все еще не разбогатели на нем?!». Это как в лотерее — пробовать могут все, но удача улыбнется лишь единицам. С другой стороны вы можете предложить аудитории Facebook любое приложение на ваш вкус. Мне недавно попадался на глаза простой опросник на совместимость для тех, кто любит путешествовать. Сделайте что-нибудь подобное и разместите на страницах приложения логотип туроператора за оговоренную сумму. Впрочем, к чему фантазировать? Способы монетизации успешного приложения описаны на Facebook. Кроме того, имея за спиной пару-тройку популярных приложений, вы можете заявить себя на Facebook Marketplace и получить желаемые заказы. Или же, вы сами можете поискать заказчика на приложения для Facebook. Предложения типа «$50,000 — Super Developer Needed» — обычно дело на этой доске объявлений.

Что потребуется для того, чтобы написать приложение для Facebook


Прежде всего, нужен пользовательский аккаунт на Facebook. Если у вас все еще нет там аккаунта – завести его. Это отнимет у вас не более нескольких минут. Далее вам потребуется собственный сервер для размещения скриптов и прочих файлов приложения. В качестве языка программирования вы можете использовать любой пригодный для создания веб-приложений. В настоящее время в каталоге Facebook представлены приложения, написанные на ASP.NET, ASP (VBScript), ColdFusion, C, C#, D, Emacs Lisp, Java, JavaScript, Lisp, Perl, PHP, Python, Ruby on Rails, VB.NET. Для языков PHP и Java Facebook предоставляет клиентские библиотеки. Базу данных приложения следует также создать на собственном сервере.
Если все это у вас есть, вам останется, лишь изучить язык разметки FBML, скриптовый язык FBJS, язык запросов FQL и API Facebook… На самом деле все не так уже страшно как кажется. Позже мы рассмотрим эти языки и поговорим о том, как ими пользоваться.

Как устроены приложения для Facebook


Прежде чем начинать проектировать новое приложения для Facebook следует изучить анатомию приложений для этой платформы. Вкратце, вам предоставляется рабочая область (Facebook Canvas Pages) приложения и ссылка на него в левой панели навигации (Left Nav).

Анатомия приложения Facebook


Активность друзей пользователя в рамках данного приложения может отображаться на главной странице пользователя. Для этого приложение протоколирует активность пользователей, помещая записи в New Feed.

News Feed Facebook


Приложение в сокращенной форме может быть представлено в специальном блоке (Profile Box) на странице профиля пользователя. Приложение может добавлять в профиль пользователя ссылку на некоторое действие. Допустим, если ваше приложение предполагает взаимовосхваление пользователей, будет логично добавлять в профиль подписчиков приложения ссылку «Восхвалить пользователя».
Приложение может высылать уведомления на Email (Alert), а также высылать пользователям приглашения к принятию участия в каком либо событии. Скажем, ваше приложение предлагает всем участникам виртуально взяться за руки в знак поддержки Тибета. Вы можете предложить пользователям приложения высылать приглашение к этому мероприятию для случайных пользователей Facebook.

С чего начать


Заходим на страницу http://www.facebook.com/developers и кликаем на Add Developer, что бы добавить приложение Developer.


Добавление приложения Developer


Теперь, когда в левой навигационной панели появилось это приложение, мы можем открыть его. Там будет ссылка на клиентскую библиотеку и на пример приложения. Теперь нажимаем кнопку « Set Up New Application» и попадаем на страницу «New Application». Заполняем форму. В «Application Name» вписываем короткое, но интригующее название. В поле «Callback Url» указываем адрес приложения на нашем удаленном сервере. В «Canvas Page URL» сообщаем какой бы мы хотели адрес на Facebook. Устанавливаем чекбокс «Can your application be added on Facebook?» в позицию «Yes». При этом откроется секция «Installation Options». В ней на вопрос «Who can add your application to their Facebook account?» отвечаем «All pages» и выставляем галочку напротив «Users». В «Post-Add URL» указываем ожидаемый адрес на Facebook (http://apps.facebook.com/my_cool_app/). Не ленимся описать достойно приложение в «Application Description». В секции «Integration Points» в поле «Side Nav URL» еще раз указываем адрес на Facebook, чтобы получить ссылку на приложение в левой панели навигации. Жмем «Submit» и получаем домашнюю страницу приложения, где будут представлены API Key и Secret. Они потребуются нам в дальнейшем.


Настройки приложения



Как программировать приложение


Как я уже сказал, для создания приложения следует ознакомиться, как минимум, с языками FBML и FBJS. Впрочем, для серьезных задач вам не обойтись также и без FQL и Facebook API. Как вы, наверняка, догадались, при каждом обращении к странице вашего приложения Facebook будет брать код страницы с вашего сайта, затем преобразовывать его на свой лад и отображать пользователю. Если он походу встречает конструкции языка FBML, он следует им. Т.е. вам нет необходимости писать код ваших страниц на новом неизвестном вам языке. Вы вольны использовать (x)HTML, но расширять его посредством FBML. В этом плане FBML напоминает мне, столь близкий сердцу XML Sapiens. К примеру, корректную ссылку на профиль пользователя и его имя вы можете получить с помощью следующей конструкции:






В справочнике к языку FBML вы найдете множество инструментов получения информации о пользователях, группах и их статусах, представления профиля, использования различных медиа-форматов, отображения готовых виджетов для комментирования, рассылки запросов на выбранную группу, форм ввода данных, диалоговых окон, captcha и многое другое. Все в стиле Facebook, как вы понимаете. FBML также обслуживает и логические выражения (fb:if/fb:else, fb:switch и т.д.). Можно посмотреть как это происходит в «песочнице» Facebook. Во многих случаях использование FBML достаточно удобно, что едва ли можно сказать о FBJS. Все включения Java Script на страницах вашего приложения будут также преобразованы.
К примеру, функция:
function getWinSize() {
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
return {width:w,height:h};
}
Превращается во что-то вроде:
function a12345_getWinSize() {
a12345_w = a12345_document.documentElement.clientWidth;
a12345_h = a12345_document.documentElement.clientHeight;
return {width: a12345_w,height: a12345_h};
}
Вот и приехали. Можете расстаться со своими тщетными мечтами об использовании в приложении для Facebook своих личных JS-библиотек или любимых фреймворков. Придется писать все требуемые функции по новой, причем, сверяя каждый шаг с документацией. С другой стороны Facebook предоставляет простенький фреймворк, позволяющий обслуживать асинхронные запросы на контроллер (AJAX) и формировать диалоговые окна.
FBML и FBJS позволят вам построить несложное приложение. Однако если вам требуются, скажем, выборка пользователей Facebook согласно их интересам, готовые виджеты FBML едва ли смогут вам помочь. На этот случай имеется REST-сервер Facebook, обслуживающий широкий ряд удаленных процедур. Все они описаны в документации, а для пробы сил имеется «песочница». Но более того, вы можете получать выборки непосредственно из баз данных Facebook посредством запросов, весьма напоминающих привычный нам SQL. Все таблицы и поля тщательно описаны. Имеются различные примеры запросов. Все что требуется, это сформировать запрос, отослать его в параметрах REST-вызова facebook.fql.query и разобрать ответ сервера.

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


Как будет организована ваша программная часть не имеет особого значения, по крайней мере, для Facebook. Вы лишь должны отдавать (x)HTML внутри тега BODY при запросе страниц приложения. При этом следует инициировать класс, загруженной с Facebook клиентской библиотеки:
require_once 'vendors/facebook/facebook.php';
$appapikey = 'ваш API Key;
$appsecret = 'ваш Secret';
$facebook = new Facebook($appapikey, $appsecret);
$user_id = $facebook->require_login();
Единственное, что я могу здесь добавить – используйте пользовательский интерфейс Facebook там, где это уместно. К примеру, главное меню приложения можно поместить в табы:
<fb:tabs>
<fb:tab-item href=«apps.facebook.com/study_english» title=«Quizze» selected=«true» />
<fb:tab-item href=«apps.facebook.com/study_english/?page=course» title=«Course» />
<fb:tab-item href=«apps.facebook.com/study_english/?page=rating» title=«TOP 50 Users» />
<fb:tab-item href=«apps.facebook.com/study_english/?page=invite» title=«Invite friends» />
</fb:tabs>
Для формы приглашения друзей к использованию вашего приложения можно использовать готовый виджет:
<fb:fbml>
<fb:request-form action="" method=«POST» invite=«true» type=«new cute app» content=«If you have been learning English for long time, you know – one of the most confusing things in the language is phrasal verbs. Do you know them enough? Test yourself here.
<? print htmlentities(»<fb:req-choice url=«apps.facebook.com/study_english» label=«Add My APP!» />"); ?>">
<fb:multi-friend-selector showborder=«false» actiontext=«Invite your friends to use Brush Up Your English.»>
</fb:request-form>
</fb:fbml>
Зато относительно FBSJ мой опыт может сэкономить вам время. Пример использования AJAX предоставленный Facebook едва ли устроит вас. Он слишком упрощенный. Я сделал на его базе более универсальный вариант.
Java Script
function $(divName) { return document.getElementById(divName); }
function user_event(div_id) {
callRemoteProc(
{
«ctrl_action»:«user_event»,
«param1»:«param2 data»,
«param2»:«param3 data»
}, div_id);
return false;
}
function callRemoteProc(params, bind_id) {
var ajax = new Ajax();
ajax.responseType = Ajax.JSON;
ajax.ondone = function(data) {

if(data.ErrorMsg) {
// Показывает сообщение об ошибке
new Dialog().showMessage('Error', data.ErrorMsg);
} else {
if( data.ActionCode==1 ) {
// Пример:
// В случае запроса дейтвия типа 1
// поместить полученные данные в заданный DIV
$(«ex» bind_id).setInnerXHTML(data.Body);
}
}
}
ajax.requireLogin = 1;
ajax.post('http://мой_сервер/facebook.ctrl.php',params);
}
Функция callRemoteProc() обслуживает запросы к контроллеру и его ответы. Секция ajax.ondone = function(data) { } описывает то как мы поступим с ответом контроллера. Посредством атрибута ActionCode мы задаем в ответе контроллера, как именно следует обслуживать ответ. Если задан атрибут ErrorMsg, функция отобразит сообщение об ошибке. Атрибут Body содержит код ответа, к примеру (x)HTML. В данном случае содержание Body помещается в DIV с заданным идентификатором .
Вы можете назначать различным событиям в приложении функции аналогичные user_event() для выполнения запроса к контроллеру. К примеру, в моем приложении «Brush Up Your English» отображается список предложений, которые предложены к заполнению посредством фразовых глаголов. Когда пользователь кликает по кнопке проверки ответа отправляется запрос к контроллеру.
Контроллер facebook.ctrl.php
<?
//…
include(«libs/controller.lib.php»);
class RD extends controller {
function user_event() {
if(!isset($_REQUEST[«param1»])) { $this->ErrorMsg=«Param1 is not defined»; return false; }
//…
$this->ActionCode=1;
$this->Body = 'Correct sentence';
return false;
}
}
$rd = new RD();
if(isset($_REQUEST[«ctrl_action»])) {
$rd->$_REQUEST[«ctrl_action»]();
}
$rd->respond();
?>
Библиотека controller.inc.php
<?
class controller {

var $ActionCode=1;
var $ErrorMsg="";
var $Body="";

function respond($message="", $errormsg="") {
if($message) $this->Body = $message;
if($errormsg) $this->ErrorMsg = $errormsg;
$out = '{
«ActionCode»: "'.$this->ActionCode.'",
«ErrorMsg»: "'.($this->ErrorMsg?addslashes(preg_replace("/[rn]/", "", $this->ErrorMsg)):"").'",
«Body»: "'.($this->Body?addslashes(preg_replace("/[rn]/", "", $this->Body)):"").'"
}';
header(«Content-type: text/html; charset=UTF-8»);
print $out;
exit;
}
}
?>

В контроллере мы обращаемся к процедуре, запрошенной в параметре ctrl_action при вызове из JS функции callRemoteProc(). В данном случае это user_event(), в ходе выполнения которой назначаются атрибуты ErrorMsg, ActionCode, Body. Обратите внимание, что ответ Body помещен в теги span. Это сделано потому, что мы вынуждены использовать на стороне FBJS метод setInnerXHTML(), который требует XML-соответствия для входных параметров.
Теперь с большего у вас есть все для того, чтобы попробовать свои силы в создании приложений для Facebook. Разве что, может еще пригодиться список URL для различных действий над пользователем (посмотреть профиль, «пнуть» пользователя, отправить ему письмо и т.д.).

Приложение готово. Что дальше?


Как вы понимаете, сами собой пользователи не придут на ваше приложение. Они попросту не будут знать о его существовании. Вы скажете: «А как же каталог приложений Facebook?». Так вот для того, чтобы попасть в этот каталог вам потребуется обзавестись, по крайней мере, пятью пользователями. Впрочем, последняя позиция в каталоге, позади 20 тысяч прочих приложений тоже не способ обрести популярность.
Вы можете поискать пользователей Facebook, кому может быть интересно ваше приложение, по интересам или в группах. Пригласите их стать друзьями и отправьте им запрос на установку приложения. Если приложение им понравится, они отправят запрос своим друзьям. Если вы готовы инвестировать определенные средства в рекламу, переедите на страницу приложения Developer и нажмите ссылку «Advertise» выпадающего списка «more» напротив вашего приложения.


Оригинал статьи на http://blog.cmsdevelopment.com
Дмитрий Шейко @rglab
карма
89,9
рейтинг 0,0
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Разработка

Комментарии (32)

  • +1
    Куски кода оформить нормльно бы не мешало :)
    • 0
      На своем блоге http://blog.cmsdevelopment.com/0000414/ я таки нашел решение - поставил там Edit Area. Т.е. все примеры кода в оригинальном виде (можно копировать), к тому же еще и подсвечены.
      • 0
        Да, но в Опере работает не лучшим образом, когда что-нибудь выделяешь :(

        http://clip2net.com/clip/m3842/120971891…
        • 0
          Хм, действительно на http://www.cdolivet.net/editarea/editare… пишут "The Opera 9 full compatibility is nearly impossible due to some javascript implementation bugs in Opera". Удобная позиция. Ну да ладно.
  • 0
    Хорошая статья.
    Где-то чуть меньше года назад писал туда аппликуху.. Тогда не то что вики, даже документация была кусочная, поначалу было тяжко, потом втянулся. Несколько переписок с суппортом, пара найденных багов =) В целом получилось весело и, наверное, совершенно бесполезно. Аппликуха была линкатором соцсетей в фейсбук - линкедин, френдстер, хай5, ну и т.д., писалась под заказ.
    Сейчас даже пароль уже свой там не помню, регаться по-новой не хочется.. Если кому-то интересно, называется MySpork.
    Это я к чему. Была бы в своё время такая статья, хотя бы на английском - было бы мне гораздо проще. Плюс в карму.
  • –1
    На рит2008 Алекс Москалюк называл аудиторию в 67 000 000 пользователей. Так что приложения это не просто круто! ЭТО СУПЕР МЕГА КРУТО!
  • 0
    самое прикольное, это когда чтонить незаметно на фейсбуке поменяли. а потом чешешь репу почему не работает. потом появляются вопросы что за херня на форуме разработчиков, и совместными усилиями определяется что кое какой функционал подправлен)
    • 0
      Народ, так давайте ссылки на ваши приложения в Facebook
      • 0
        оно не моё )) оно заказчика)
        • +1
          Он только разместил объяву
  • 0
    Люди, а кто-нибудь не для заказчика, а т.с. "для души" приложения на Facebook делал? :)
    • +2
      Да, наша студия сделала парочку, одно из них запущено с месяц назад - называется LiveBook. Это попытка написать книгу силами пользователей Фейсбука - каждый может предложить свой вариант следующего предложения в книгу, сообщество голосует за него; вариант, который первым наберет "проходной балл" - попадает в книгу. После этого начинаем голосовать за следующее предложение - и так далее.

      Первым предложением мы задали только тему книги - она про девушку Хелен, которая только что зарегистрировалась на Фейсбуке. Дальше подключилась аудитория. Пока написана только одна страница - достаточно сложно найти новых пользователей, которым интересно поучаствовать в таком коллективном эксперименте, не опускаясь до банального спама. А спамить не хочется. Так что на данный момент просто наблюдаем над тем, что из этого выйдет.

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

      Для тех, у кого нет регистрации на Фейсбуке - немного о проекте рассказано на его сайте thelivebook.com. Ну и есть несколько неплохих обзоров в СМИ - например, на Webware и на ReadWriteWeb (кругом все по английски).

      Ну и если у кого-то есть идеи как помочь с привлечением новых пользователей – будем рады.
      • 0
        Я как раз думал, что игры в стиле "допиши хокку" должны быть востребованы на Facebook или что-то вроде вашей идеи, но боюсь что проходит все то что проще. Может быть что-то вроде игры в города
        • 0
          Теперь я думаю, что надо еще проще - города не потянут :)
          Буйным цветом расцветают примитивные приложения, которые дают возможность одному юзеру хоть как-то подействовать на другого. И никакого интеллекта - сообщество это не воспринимает.
          А придумать такое "тупое" развлекалово как показывает практика не так уж и легко.
          • 0
            Согласен - основная масса пользователей предпочитает такие интеллектуальные игры как "квач" - виртуально швырни все что угодно в пользователя :)
    • 0
      Я делал. Not a Secret Anymore...
  • +2
    Кстати, некоторое время назад я сделал блог Facebook на Хабре - можно перенести этот топик туда. Вообще, тема Facebook не раскрыта, многие до сих пор думают что это такой ВКонтакте, только по английски :) С этим заблуждением надо бороться, и вот как раз такие статьи как эта помогают понять, что аналога системе разработки приложений для социальной сети на данный момент в мире нет. И грех этим не пользоваться, особенно в свете русификации Фейсбука.
  • 0
    спасибо автору.

    было интресно
  • 0
    ээээ.... где именно facebook заговорил по русски ? (не считая пользователей из россии =)
    • 0
      Я вовсе не из России и тем не менее Facebook предложил мне на 1 мая добавить приложение Translator. Собственно то чего не хватало теперь есть - люди, кто привык к русскому языку могут пользоваться основными возможностями Facebook. И все располагает к тому, чтобы там появились русскоязычные приложения
  • 0
    http://apps.facebook.com/dailyhorror/ приложение с поддержкой русского! Сделано мной для моей компании.
  • 0
    Объясните плиз немного механику процесса.

    Если я написал приложение "отправляющее виртуальные подарки", то чтобы отправить
    подарок юзеру надо его сначала заинтересовать установкой приложения?
    • 0
      Во первых первых есть стандартная форма уведомить друзей. Уведосмьте своих, дайти им возможность вовлекать их друзей и т.д. Еще когда попадете в каталог на Facebook оттуда будут люди приходить
  • 0
    Скажите пожалуйста, какой надо добавить функционал в приложение, что бы добавить его в профиль юзеру? Т.е. что бы френды мои видели мой список покупок, например.
  • 0
  • 0
    Насколько я понимаю есть два способа встроить приложение в FaceBook — это FBML и iFrame
    wiki.developers.facebook.com/index.php/Choosing_between_an_FBML_or_IFrame_Application

    В случае iFrame можно использовать свои js библиотеки.
  • НЛО прилетело и опубликовало эту надпись здесь
  • 0
    vquzev, это чушь, он отличается от остальных, но если вы с ним хоть раз работали, то эффект от него стоит времени потраченного на код.
  • 0
    у FB есть особенность периодически делать Platform Updates.

    К примеру подарок перед Новым 2011 годом — developers.facebook.com/blog/post/442, тот же facebook.php официальный перестал работать. Апдейтимся постоянно.
  • 0
    Спасибо за статью! Очень познавательно.
    Хотел бы уточнить вопрос попадания приложения в каталог Facebook. Достаточно просто иметь 5 активных пользователей и приложение станет видно в каталоге или нужно набрать 5 пользователей и подать какую-нибудь заявку, как ВКонтакте, чтобы его промодерировали и добавили в каталог?
  • 0
    Ребят, подскажите, чтобы сделать простое приложение-ссылку на внешний ресурс, можно просто ограничится тем, что прописать <a href=”http://www. vk.com/bars”> ?
  • 0
    Народ, подскажите, а как можно зареггать компанию-разработчика в FB, чтобы выкладывать приложения от имени компании?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.