Создаем iframe приложение в новом интерфейсе Facebook (2015 года) и Вконтакте

Эта статья была просмотрена
Warning: count(): Parameter must be an array or an object that implements Countable in /home/users/g/gangster-club/domains/maxkirpichev.ru/wp-content/themes/maxkirpichev/functions.php on line 88
4657 раз

Создаем iframe приложение в новом интерфейсе Facebook (2015 года) и Вконтакте

Всем привет!

Сегодня я хочу рассказать вам о том, как я создавал iframe приложение под Фейсбук и Vkontakte. Вообще по этой теме уже существует туева хуча статей, но если с Вконтактом всё понятно, то при создании приложения под фейсбук я испытал дикую, нестерпимую боль в заднице. Но обо всём по порядку.

Была поставлена задача сделать единое приложение под FB и VK — обычный тест из 5-ти вопросов с вариантами ответов, в конце выдается результат — в нашем случае ссылку на одну из статей на сайте. И вроде бы всё просто:

  1. Делаем сам тест и размещаем его у себя на хостинге
  2. Делаем iframe приложение в ВК — по-сути просто включаем содержимое созданной нами страницы в окно приложения ВК (ну фрейм блин, все вы знаете что такое фрейм, че я тут рассказываю?)
  3. Делаем iframe приложение в Facebook
  4. ???
  5. 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» и прописываем адрес до скрипта.

Создание iframe приложения для Вконтакте - включение приложения

Ну и всё. Готово. Проверить можно либо кликнув на иконку приложения в левом верхнем углу этой же страницы, либо найдя приложение в (да да, вы удивитесь, но вы не удивляйтесь) в «Моих приложениях».

Создание iframe приложения вконтакте: результат - работающее приложение

Всё просто, интуитивно понятно.

3. Создание приложения в Facebook. Дикая резь в жопе.

Итак, сразу скажу, что может быть это просто я тупой. Я не исключаю этого. Но на то, чтобы сделать приложение в фейсбуке я угробил целый рабочий день. Во многом проблема усугублялась тем, что Фейсбук недавно обновил интерфейс в разделе для разработчиков, поэтому все статьи, которые я находил, были написаны еще по старому интерфейсу. А в новом у меня происходил жуткий тупняк. К тому же, никто не говорил в своих статьях, что для создания iframe приложения в Facebook у вас обязательно должен быть SSL сертификат! Но до этого мы еще дойдем. Итак, поехали!

Заходим на https://developers.facebook.com/, идем во вкладку «My Apps» и жмем «Add a New App».

Создаем iframe приложение в новом интерфейсе фейсбук (2015 года)

В появившемся окне не нужно выбирать ни одну из этих огромных иконок, нужно перейти в «advanced setup»

Создаем iframe приложение в новом интерфейсе facebook - выбираем тип приложения

Далее прописываем отображаемое название (Display Name), по желанию — уникальный урл приложения (Namespace), категорию приложения. Нажимаем «Create App ID».

Проходим проверку капчей.

Ок, создали.

Заходим в раздел «Settings», прописываем домен вашего сайта и какой-нибудь существующий email.

Создаем iframe приложение в новом интерфейсе facebook - прописываем настройки

После чего нажимаем «Add Platform» и выбираем «Facebook Canvas» (данный момент для меня казался совершенно неочевидным, потому что есть тип приложения Website).

Создаем iframe приложение в новом интерфейсе facebook - выбираем тип приложения

И теперь самое веселое: 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» 🙂

Создаем iframe приложение в новом интерфейсе facebook - добавляем адрес iframe

Ну и наконец нужно включить приложение, зайдя в раздел «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.