Не так давно на конференции F8 Facebook предствил новые возможности OpenGraph Beta. С помощью новых типов “actions” и “object” для сайтов и приложений появилась новая возможность сообщать о действиях пользователя. Например, в тикере и в таймkайле можно написать такую запись: “Irek Khasyanov watched Нереальная история on ivi.ru”, или “Irek Khasyanov listened The Magician - Magic Tape Fifteen on soundcloud.com”. Для сайтов очень удобно сразу показывать что пользователь делал.
Хороший пример интеграции - Spotify. Сервис работает только в Англии и Франции, и чтобы попробовать все возможности придется использовать прокси или VPN соединение. Когда мы откроем приложение, Spotify предложит подключить аккаунт Facebook. После этого при прослушивании песни, вы увидите у себя в таймлайн что вы слушали. При этом вы видите кнопки “плэй” которые открывают эту самую песню в приложении spotify. То есть вы можете увидеть у друга какую-то песню и сразу ее послушать.
Когда Facebook “видит” что вы из Англии, у вас появляется приложение Music слева в панели приложений. Если его открыть, то можно увидеть песни любимых групп и сразу их послушать. Забавно, что пользователь из России не увидит вашу активность, и даже вы, отключив прокси или vpn, ничего не увидите.
К сожалению, пример Spotify это глубокая интеграция с facebook, обычные сайты не смогут поставить свои кнопки и управлять внешним приложением.
Я решил попробовать воспользоваться новым API и сделал пример с прослушиванием музыки. Сначала хотел попробовать для фильмов, чтобы в будущем сделать такой функционал для ivi.ru, но по какой-то причине для “watch” и “movie” facebook очень не хотел создавать настройки и постоянно выдавал ошибки.
Главное что нужно сделать в начале - это выбрать namespace приложения, оно должно быть уникальным для разных приложений.
Заходим в настройки нашего приложения, слева выбираем пункт меню и открываем OpenGraph Beta. Хочу сразу сказать, у меня интерфейс английский, русских названий ссылок я не знаю.
Создадим новое действие “listen”. Наши пользователи будут слушать музыку. Сейчас принимаются названия только на английском, в дальнейшем их можно будет перевести. Не понятно так же как быть с обработкой пола пользователя. Кто-то говорит что после перевода все будет нормально, я же пока не могу подтвердить. Далее нам надо написать Connected Object Type. Для нас это будет “Song”, в вашем случае может быть что угодно, благо создавать новые не сложно.
Так же можно увидеть что есть возможность менять склонения глаголов, обработка ситуаций когда вы слушаете с друзьями одну песню и тп. Вы можете поменять что-то, но меня устроил выбор facebook.
Теперь начнем формировать код страницы. Так как мы будем использовать FBML, нам надо добавить в тег <html> параметры и объявить namespace в <head>
Подключим js api, лучше это делать в конце страницы
Теперь самое главное, нам необходимо рассказать фейсбуку что у нас страница с поддержкой экшенов, для этого надо добавить OpenGraph мета теги. Все как раньше, но теперь в type надо написать имя неймспейса и действие. Вот как сделано у меня
У facebook есть очень удобный инструмент для проверки тегов - https://developers.facebook.com/tools/debug Просто введите адрес вашего сайта и посмотрите есть ли какие-то ошибки.
Если ошибок нет, то можно добавить кнопку авторизации с поддержкой actions. Без этого отправка события не будет работать и скрипт выдаст ошибку.
А теперь самая вкусная часть - отправка события что пользователь послушал песню на нашем сайте.
Здесь самое главное добавить namespace, action и ссылку на страницу.
В принципе все, можно открыть сайт в браузере (главное чтобы он уже был выложен в интернет и фейсбук смог найти эту страницу), залогиниться и нажать кнопку “Отправить”. Если все настроено как надо, выскочит alert с номером записи.
А если посмотреть на свой страницу в фейсбуке, увидим такое:
И в таймлайне:
Все исходники с примером второй страницы можно найти у меня в github - facebook-timeline-example
