Станислав Куракин Разработка приложений под Facebook (основы)

Пошаговое руководство по созданию простых приложений для персональных и бизнес-страниц

Актуально на 28 июня 2014 года

Ты держиш в руках шестую книгу серии «Секреты Фейсбук» посвящённую разработке простых приложений, которые ты с её помощью научишся создавать в социальной сети Facebook. С помощью первых пяти книг, ты получил достаточные базовые знания как пользователь, теперь настало время присоединяться к команде независимых разработчиков приложений для Фейсбук.

Для начала давай сделаем на бизнес-странице вкладку “Привет”, которая будет отображать баннер с приглашением присоединиться к твоему сообществу или страницу привествия из твоего внешнего сайта в виде встроенного в Фейсбук фрейма.

Шаг 1. Регистрация нового приложения

Как ты знаешь, в языке Html – тег <iframe> служит для создания фрейма, который находится внутри обычного документа, он позволяет загружать в область заданных размеров любые другие сайты, картинки, видео и так далее. Так ты быстрее поймёшь суть iframes приложений.

Для начала нужно иметь акаунт в Фейсбук с подтверждённым номером телефона, иначе тебя не запишут в разработчики. Что собственно, у тебя уже имеется.

Итак, чтобы создать новое приложение, введи в строке браузера http://developers.facebook.com и зайти в пункт меню Apps – Register as a Developer

Далее нажми на кнопку «Да»

Д

альше жми кнопку Зарегистрироваться и становись Разработчиком приложений для Фейсбук

Для начала ты перейдёшь на страницу с документацией

Снова заходи в меню Apps и здесь тебе предложат пункт Create a New App

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

Не забывай о системе поиска и подбирай сочетания нужных тебе ключевиков в названии

При этом идентификатор должен быть уникальным в системе, а также:

• Не может содержать заглавные буквы

• Длина должна быть меньше или равна 20

• Может содержать только строчные буквы, тире и подчеркивания

После этого нужно будет ввести код в поле

Название нового приложения появиться в меню Apps

И тебе предоставят инструментарий для работы с ним

Перейди к ссылке Settings

Здесь ты можешь добавить домен приложения и ввести контактный E-mail, а также добавить платформу разработки

При выборе платформы Website тебе нужно добавить адрес сайта и его мобильной версии

Можно добавить несколько платформ разработки

Адрес нашего приложения будет следующим: https://apps.facebook.com/book_for_children/

Адрес разработки https://developers.facebook.com/apps/1510033089208250/summary

Теперь немного отвлечёмся от инструментария Фейсбук и познакомимся с интересным приложением, которое позволит тебе быстро создавать встроенные фреймы в закладках.

Static HTML iframe Tab by Woobox

Для начала переходи на сайт http://woobox.com/statichtml и жми большую зелёную кнопку

Д

ля продолжения нужно подтвердить пару запросов

В

общем, если их не одобрить, дальше не пустят. Можешь использовать, специально созданный для этого аккаунт, подключив его через Роли к управлению страницей.

П

осле одобрения, попадаешь на страницу админа

Здесь тебе нужна вкладка HTML Fangate Tab

К

стати, есть ещё один вариант загрузки приложения Static HTML Iframe Tab by Woobox

Зайди на страничку https://apps.facebook.com/iframehost-c/

Выбери в списке свою страничку и жми синюю кнопку

У тебя появится новая вкладка с названием Welcome

Само приложение также появилось в настройках

З

десь нажав на ссылку Изменить настройки можно добавить миниатюру изображения и изменить название приложения.

Если нажать на ссылку Перейти к приложению то ты увидишь, что можно создать ещё 10 таких вкладок.

Размеры файла миниатюры должны быть 111 на 74 пиксела

Вобщем, получится где-то вот-так

Как и в первом варианте тебе нужно авторизоваться

М

ожешь использовать для этого специально созданный аккаунт

При согласии тебя пустят в настройки приложения

Как видишь, здесь всё довольно просто и понятно

Теперь добавь в одно из полей с флажком URL любой https сайт и перейди на вкладку твоего нового приложения.

З

десь ты увидишь ссылки View as Non-Fan Stats Settings

Ссылка View as Non-Fan покажет тебе страницу как её будут видеть пользователи вначале

Stats – отображает статистику