iframe приложение facebook
Все чаще сайты и блоги использую для привлечения на сайт новых посетителей из социальных сетей, и данный способ неоспоримо имеет положительный результат. Создаются сообщества (группы) читателей блогов, а также страницы. В данной статье будет описана инструкция создания страницы с внедрением в нее Iframe приложения.
Для начала поговорим о том что такое страница в facebook - это созданная пользователем страница в facebook, которая может быть посвящена определенной теме, блогу, фирме, да чему угодно. И главной ее особенностью и отличием от групп, является то, что страницы позволяют встраивать в себя приложения. Используя эту возможность мы можем с помощю Iframe, приложения выводить на страницу нужный нам контент, а также используя Facebook API взаимодействовать с пользователями, посещающими страницу.
Теперь что же такое Iframe приложение для facebook - это приложение которое интегрируется с вашего сервера на страницу facebook через элемент Iframe, может быть написано на любом языке программирования для WEB, и отображать информацию с использованием технологий: HTML, CSS, Javascript, Flash и др. Это приложение на вашем сервере может иметь сколько угодно строк кода и принимать данные методами GET или POST.
С теорией закончено, переходим к практике, которая будет включать три основных этапа:
- Создание страницы facebook
- Создание приложения facebook
- Подключение приложения к странице facebook
Создание страницы facebook - для создания страницы facebook, в первую очередь вы должны иметь аккаунт в этой социальной сети. Если же у вас есть аккаунт, то переходим по ссылке из футера facebook - "Создать страницу", в открывшейся странице выбираем нужный нам тип страницы, указываем название страницы, ставим галку "Я принимаю Условия Facebook для страниц" и жмем "Начало работы",после чего открывается созданная страница facebok. Здесь вы можете указать изображение страницы и прочую информацию, а о настройках поговорим чуть позже, когда будем внедрять приложение в эту страницу.
Сейчас же приступим к созданию приложения facebook. Для создания собственного приложения для facebook, помимо аккаунта, требуется еще и подтверждение номера вашего мобильного телефона, указанного в профиле facebook. На ваш мобильный номер прийдет SMS собщение с кодом подтверждения и ссылкой, по которой следует ввести этот код. SMS приходит сразу после указания вашего мобильного номера в контактах аккаунта facebook, если вы еще этого не сделали, то укажите его. Все разработчики должны подтвердить свою личность перед созданием нового приложения.
После того как вы подтвердите свою личность, перейдите по ссылке в футере "Разработчикам", где переходим по ссылке в верхнем меню "Приложения" - как показывает скрин:
После нажатия на ссылку "Приложения" откроется "Запрос на разрешение" - это запрос разработчиков facebook к данным вашей учетной записи, куда входят данные : имя, изображение профиля, пол, сети, идентификатор пользователя, список друзей и другую информацию, доступную публично. Показано на скрине ниже:
Жмем "Разрешить", и после этого открывается страница "FACEBOOK DEVELOPERS" где нужно нажать кнопку + Создать новое приложение, как показано на скрине:
После нажатия на эту кнопку появится всплывающее окно в котором будут два поля "App Display Name" и "App Namespace" как показано на скриншоте:
В первом поле нужно указать Имя Приложения, которое будет видеть пользователь, а второе можете пропустить. Также следует поставить галку что вы согласны с условиями использования facebook. Затем ввести капчу, и вас перенаправят на страницу с созданным приложением facebook. На скриншоте ниже показана страница с приложением:
На этой странице в поле "App Domain" вам следует указать домен на котором будет размещено приложение, к примеру: cleverscript.ru Во вкладке "Сайт", в поле "Site URL" указать URL сайта на котором будет размещено приложение, к примеру: http://cleverscript.ru И на вкладке "Приложение на Facebook" в поле "Canvas URL" указать абсолютный путь к директории с приложением на вашем сервере, например вот так: http://cleverscript.ru/facebook/test/ После этого нажать "Изменить сохранения", и если все введено правильно, в итоге должно получится как на скриншоте ниже:
После этого если все получилось настроить и сохранить настройки, запишите где то App ID и App Secret. И по указанному в поле Canvas URL, создайте необходимую директорию (в случае с примером это папка facebook) и поместите в него файл index.php с текстом <h1>Hellow World</h1>
После этого ваше Iframe приложение будет доступно по адресу http://apps.facebook.com/App ID - где App ID, это идентификатор приложения, о котором было сказано выше.
Пройдя по этой ссылке вы должны увидеть свое Iframe приложение которое выведет в заголовке H1 текст Hellow World из файла index.php, как показано на скриншоте ниже:
Теперь переходим к третьему этапу, это Подключение приложения к странице facebook - для этого переходим по адресу https://www.facebook.com/add.php?api_key=App ID&pages, где App ID - это ID вашего приложения и в выпадающем списке выбираем страницу на которую нужно добавить приложение.
Выглядит это так:
Если вы все сделали правильно, на вашей странице в левой колонке, появится вкладка с Iframe приложением, нажав на которую на странице отобразится приветствие "Hellow World" которое выводится приложением. Для того чтобы сделать эту вкладку по умолчанию (т.е чтобы зайдя на страницу, пользователь видел не стену, а вкладку приложения. Вам необходимо настроить страницу - заходим в "Редактировать страницу" – "Управление разрешениями" – "Основная вкладка" – в выпадающем списке выбираем вкладку "Тестовое приложение" – нажимаем внизу кнопку "Сохранить".
А в этом видео показано как с помощю формы на одном сайте, добавить приложение к странице:
На этом все, ваше приложение может быть сколько угодно сложным, в следующей статье поговорим об использовании Facebook SDKs & Tools и взаимодействии приложений с пользователями.
PS. Читайте последние записи RSS Подписка на RSS
Комментарии