Всем привет!
Сегодня я хочу рассказать вам о том, как я создавал iframe приложение под Фейсбук и Vkontakte. Вообще по этой теме уже существует туева хуча статей, но если с Вконтактом всё понятно, то при создании приложения под фейсбук я испытал дикую, нестерпимую боль в заднице. Но обо всём по порядку.
Была поставлена задача сделать единое приложение под FB и VK — обычный тест из 5-ти вопросов с вариантами ответов, в конце выдается результат — в нашем случае ссылку на одну из статей на сайте. И вроде бы всё просто:
- Делаем сам тест и размещаем его у себя на хостинге
- Делаем iframe приложение в ВК — по-сути просто включаем содержимое созданной нами страницы в окно приложения ВК (ну фрейм блин, все вы знаете что такое фрейм, че я тут рассказываю?)
- Делаем iframe приложение в Facebook
- ???
- PROFIT!
Ну а теперь по пунктам:
1. Делаем страницу у себя на хостинге/сервере
Я не буду расписывать создание самого скрипта, суть статьи не в этом. Давайте просто создадим у себя на серваке test.php с самым тупым содержимым:
<?php echo '<center><h1>Hello God damned world</h1></center>'; ?>
2. Создаем iframe приложение во Вконтакте и подключаем в него скрипт
С контактом всё просто. Создание приложения займет минут 10.
Делаем так:
Заходим на http://vk.com/apps?act=manage, жмем кнопку «Создать приложение».
Пишем название, выбираем «Iframe/Flash приложение» и ставим тип «Приложение»
Производим подтверждение приложеньки с помощью мобильного.
После этого заходим в раздел «Настройки» и выставляем «Состояние» на «Приложение включено и видно всем», выбираем «Тип приложения» — «Iframe» и прописываем адрес до скрипта.
Ну и всё. Готово. Проверить можно либо кликнув на иконку приложения в левом верхнем углу этой же страницы, либо найдя приложение в (да да, вы удивитесь, но вы не удивляйтесь) в «Моих приложениях».
Всё просто, интуитивно понятно.
3. Создание приложения в Facebook. Дикая резь в жопе.
Итак, сразу скажу, что может быть это просто я тупой. Я не исключаю этого. Но на то, чтобы сделать приложение в фейсбуке я угробил целый рабочий день. Во многом проблема усугублялась тем, что Фейсбук недавно обновил интерфейс в разделе для разработчиков, поэтому все статьи, которые я находил, были написаны еще по старому интерфейсу. А в новом у меня происходил жуткий тупняк. К тому же, никто не говорил в своих статьях, что для создания iframe приложения в Facebook у вас обязательно должен быть SSL сертификат! Но до этого мы еще дойдем. Итак, поехали!
Заходим на https://developers.facebook.com/, идем во вкладку «My Apps» и жмем «Add a New App».
В появившемся окне не нужно выбирать ни одну из этих огромных иконок, нужно перейти в «advanced setup»
Далее прописываем отображаемое название (Display Name), по желанию — уникальный урл приложения (Namespace), категорию приложения. Нажимаем «Create App ID».
Проходим проверку капчей.
Ок, создали.
Заходим в раздел «Settings», прописываем домен вашего сайта и какой-нибудь существующий email.
После чего нажимаем «Add Platform» и выбираем «Facebook Canvas» (данный момент для меня казался совершенно неочевидным, потому что есть тип приложения Website).
И теперь самое веселое: iframe приложение в Facebook НЕ БУДЕТ работать по обычному протоколу http://! Для работы приложения нужен доступ по протоколу https://, а значит, вам потребуется получить SSL сертификат для вашего сайта. У моего хостера сертификат стоил 2000 рублей на год. Так что придется задать себе вопрос — нужно ли оно вам?
Чтобы просто протестировать, что всё действительно будет работать по https, можно прописать в поля «Secure Canvas URL» и «Mobile Site URL» адрес какого-нибудь сайта, работающего по https. Например, https://www.google.com/chrome/. Соответственно, прописать в «App Domains» «google.com». И не забыть нажать «Save Changes» 🙂
Ну и наконец нужно включить приложение, зайдя в раздел «Status & Reviev» и потянуть ползунок рядом с надписью «Do you want to make this app and all its live features available to the general public?».
Иконка рядом с названием приложения станет зеленой. Теперь приложение можно увидеть по ссылке https://apps.facebook.com/УКАЗАННОЕ_ВАМИ_NAMESPACE/. Т.е. в моем случае по ссылке https://apps.facebook.com/maxkirpichevtestapp
Сейчас, когда я всё это писал, всё уже казалось относительно адекватным. Хотя шагов раза в 2 больше чем в ВК. Но когда я делал это в первый раз, это была просто какая-то жесть.
Мысли по окончанию разработки
Вконтакте был создан в 2006 году. Я в нем зарегался в 2008-м. Помню, тогда народ частенько говорил мол «да эти ваши контакты — просто клон фейсбука». Я уже тогда зашел на FB, посмотрел на него и в ужасе убежал — более ублюдошного, непонятного и кривого интерфейса я не видел.
Прошло 7 лет. На дворе конец 2015-ого. И ничего не изменилось. Многие люди говорят мол копия никогда не будет лучше оригинала. А вот БЛЯТЬ БУДЕТ!!! Чтобы сделать банальное приложение под ВК мне потребовалось около 10-ти минут (и то, потому что делал это в первый раз). Чтобы сделать приложение в Facebook мне пришлось пол дня ковыряться в этом кривом интерфейсе, потом выяснить, что без SSL нифига работать не будет и потратить 2 килорубля на SSL сертификат.
Это уже не первая моя бомбежка от фейсбука, в дальнейшем я расскажу еще всякие неприятные моменты. Для себя уже давно сделал вывод — если клиент говорит «Ну мы будем работать с фейсбуком», то у меня в голове мгновенно производится операция умножения ценника, который я хотел взять с клиента, на 2.