Facebook Timeline

Не так давно Facebook анонсировал масштабное нововведение - timeline. По сути, это та же стена, только все события располагаются на ней в хронологическом порядке, а похожие активности группируются в единые блоки, чтобы занимать меньше места.

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

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

Прежде всего, стоит сказать, что в данный момент Facebook timeline находится в beta и доступна только разработчикам, поэтому первое, что необходимо сделать, это активировать timeline для своего аккаунта. На эту тему написано множество инструкций.

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

Шаг 1. Настраиваем Facebook-приложение

Это самый важный шаг, именно на нём могут возникнуть непредвиденные осложнения. Создав приложение, первым делом указываем "App Domain" в виде test.com или news.test.com. Далее, в разделе "Website" нужно заполнить ссылку на ваш сайт, уже в виде http://news.test.com. Затем переходим в "Advanced" настройки и убеждаемся, что "Sandbox Mode" выставлен в "Disabled". Если не отключить режим песочницы, то возникнут ошибки с логином, например при вызове API функции getLoginStatus с запросом прав на публикацию, не сработает callback.

Перейдём в раздел "Open Graph" и добавим действие read article. Нажав "get started", мы перейдём к настройке глагола read, тут всё интуитивно понятно, и нет подводных камней. Сохраняем и переходим к настройке объекта. Следующей страницей будет настройка "Aggregations" - достаточно важная настройка, так как для каждого созданного глагола, должен быть настроен aggregation. В противном случае, Facebook отреагирует немного неочевидно - при попытке запросить разрешение на publish_actions, откроется диалог, который предложит залогиниться в ваше приложение, однако в нём не будет ни слова о публикациях в timeline, и соответствующие разрешения не будут получены. Настроив агрегацию, необходимо убедиться, что для неё есть "превьюшки", без них может повториться ошибка с auth диалогом. В настройках Open graph -> Aggregations нажмите preview и убедитесь, что агрегация имеет превьюшку (если таковой нет, её можно добавить в открывшемся диалоге). Для создания превьюшек Facebook'у нужно скормить ссылку на пример статьи. Как создать правильную "статью", рассмотрим ниже.

Шаг 2. Создаём объект, который будем публиковать на timeline

Под объектом имеется ввиду обычная web-страничка, доступная из интернета. Допустим, мы хотим опубликовать информацию о прочитанной пользователем статье, то есть, поместить на timeline заметку о "read article", значит, наша страничка будет статьёй. Как происходит процесс публикации? С помощью Facebook API в timeline отправляется ссылка на объект (web-страничку со статьёй), затем Facebook обрабатывает эту страницу и создаёт объект в своём графе. Для того, чтобы Facebook нормально обработал нашу статью, она должна содержать правильные open graph тэги. Вот пример "правильной страницы":

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 <meta property="fb:app_id" content="{id вашего приложения}"/>
 <meta property="og:type" content="{namespace приложения}:article"/>
 <meta property="og:url" content="http://{путь до этого файла}/Article.html"/>
 <meta property="og:title" content="article about article"/>
 <meta property="og:description" content="cool article"/>
 <meta property="og:image" content="{путь до подходящей картинки}"/>
 <title>Article</title>
</head>
<body>
 <h2>just article about article</h2>
 Some text ...
</body>
</html>

Проверить страницу на правильность open graph тэгов можно с помощью утилиты Facebook debugger.

Создав правильный объект, который может быть опубликован в timeline, настроим preview для агрегаций (инструкцию см. в предыдущем пункте).

Зайдя в настройки open graph и настроим preview, мы увидим диалог добавления превьюшек, который будет выглядеть примерно так:

Шаг 3. Запрашиваем права на публикацию в timeline

Вот минимальный код, чтобы подключить FB API и запросить права на публикацию в timeline:

<html>
<head>
<title>log in</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
 type="text/javascript"></script>
</head>
<body>

<!-- Fb API Initialisation -->
<div id="fb-root"></div>
<script>
 window.fbAsyncInit = function () {
  FB.init({
   appId: '{fb app id}', // App ID
   status: true, // check login status
   cookie: true, // enable cookies to allow the server to access the session
   oauth: true, // enable OAuth 2.0
   xfbml: true // parse XFBML
  });
 };

// Load the SDK Asynchronously
(function (d) {
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js";
 d.getElementsByTagName('head')[0].appendChild(js);
} (document));
</script>
<script type="text/javascript">
 $(document).ready(function () {
  $("#post").click(function () {
   FB.login(function (response) {
    if (response.authResponse) {
     console.log('logged in');
    } else {
     console.log('failed.');
    }
   }, { scope: 'publish_actions' });
  });
 });
</script>
<input id="post" type='button' value='post' />
</body>
</html>

По нажатию на кнопку откроется диалог, в котором будет написано, что данное приложение собирается писать в ваш timeline, вот пример:

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

Удалить приложение можно в Account Settings -> Apps, там же можно проверить и права, которые выданы приложению.

Шаг 4. Публикуем в timeline

Допишем необходимый вызов API:

<html>
<head>
<title>log in</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"
 type="text/javascript"></script>
</head>
<body>

<!-- Fb API Initialisation -->
<div id="fb-root"></div>
<script>
 window.fbAsyncInit = function () {
  FB.init({
   appId: '{your fb app id}', // App ID
   status: true, // check login status
   cookie: true, // enable cookies to allow the server to access the session
   oauth: true, // enable OAuth 2.0
   xfbml: true // parse XFBML
  });
 };

// Load the SDK Asynchronously
(function (d) {
 var js, id = 'facebook-jssdk'; if (d.getElementById(id)) { return; }
 js = d.createElement('script'); js.id = id; js.async = true;
 js.src = "//connect.facebook.net/en_US/all.js";
 d.getElementsByTagName('head')[0].appendChild(js);
} (document));
</script>
<script type="text/javascript">
 $(document).ready(function () {
  $("#post").click(function () {
   FB.login(function (response) {
    if (response.authResponse) {
     console.log('logged in. Try to publish in timeline');
     var verb = '{your_app_namespace}:read';
     var objectType = 'article';
     var permalink = link to article';
     FB.api('/me/' + verb + '?' + objectType + '=' + permalink,
      'post', function (result) {
        console.log('published with id = ' + result.id);
      });
    } else {
     console.log('failed.');
    }
   }, { scope: 'publish_actions' });
  });
});
</script>
<input id="post" type='button' value='post' />
</body>
</html>

В callback приходит результат публикации, с id в Facebook graph (созданную запись можно будет удалить, например). Если в консоль браузера вывелась надпись "'published with id...", значит, всё настроено верно. Чтобы увидеть публикацию, нужно кликнуть по своему логину (сверху справа), откроется timeline, затем можно нажать Activity log (для более удобного просмотра добавленных действий). При очередной публикации несколько "read article" сгруппируются в одну агрегацию. На самом timeline это выглядит вот так:

В FB API вызове фигурирует глагол - verb, в данном случае это namespace вашего приложения, затем двоеточие и глагол. Если при создании нового глагола (например watch) Facebook предложит выбрать из существующих, то создастся оригинальный глагол, не привязанный к вашему приложению, в таком случае verb должен быть равен ни "namespace:watch" а "video.watches", это можно узнать, нажав get code в настройках open graph приложения.

Если всё работает, то следует проверить работу в IE, хотя бы в IE 8. Удивительно, но даже этот код, взятый из инструкций Facebook, отказывался работать в IE (с закомментированными console.log). На момент написания статьи ошибка в подключаемом FB скрипте в IE не воспроизвелась, но если у вас возникнет проблема с permissions в IE, то вот полезная ссылка.

Возможно, я забыл упомянуть какие-то грабли, на которые становился сам, но в основном все они решаются очень просто - вбиваем в Гугл ошибку и ищем ответ на Stackoverflow. Если вызывается fb.getloginstatus, и дальше ничего не происходит (даже ошибок нету), лезем во вкладку "Сеть", смотрим ответ от Facebook и снова вбиваем в Гугл.

Кроме того, следует не забывать, что запрашивать publish_action можно только у администраторов/разработчиков/тестеров вашего приложения, эта ситуация будет продолжаться пока Facebook timeline находится в demo. Отправить кому-либо приглашение стать админом/разработчиком вашего приложения можно из настроек "ролей" в самом приложении.

Никита МАНЬКО,
DjComandos@gmail.com