iframe приложение facebook

Среда, 21 Декабрь 2011

 

Все чаще сайты и блоги использую для привлечения на сайт новых посетителей из социальных сетей, и данный способ неоспоримо имеет положительный результат. Создаются сообщества (группы) читателей блогов, а также страницы. В данной статье будет описана инструкция создания страницы с внедрением в нее Iframe приложения.

 

Для начала поговорим о том что такое страница в facebook - это созданная пользователем страница в facebook, которая может быть посвящена определенной теме, блогу, фирме, да чему угодно. И главной ее особенностью и отличием от групп, является то, что страницы позволяют встраивать в себя приложения. Используя эту возможность мы можем с помощю Iframe, приложения выводить на страницу нужный нам контент, а также используя Facebook API взаимодействовать с пользователями, посещающими страницу.

 

А тем кому надоело писать код, разбиратся во всех тонкостях web программирования и охота отдохнуть, а также еще и заработать на этом, предлагаю играть в игровой автомат гном

 

Теперь что же такое Iframe приложение для facebook - это приложение которое интегрируется с вашего сервера на страницу facebook через элемент Iframe, может быть написано на любом языке программирования для WEB, и отображать информацию с использованием технологий: HTML, CSS, Javascript, Flash и др. Это приложение на вашем сервере может иметь сколько угодно строк кода и принимать данные методами GET или POST.

 

С теорией закончено, переходим к практике, которая будет включать три основных этапа:

 

 

Создание страницы facebook - для создания страницы facebook, в первую очередь вы должны иметь аккаунт в этой социальной сети. Если же у вас есть аккаунт, то переходим по ссылке из футера facebook - "Создать страницу", в открывшейся странице выбираем нужный нам тип страницы, указываем название страницы, ставим галку "Я принимаю Условия Facebook для страниц" и жмем "Начало работы",после чего открывается созданная страница facebok. Здесь вы можете указать изображение страницы и прочую информацию, а о настройках поговорим чуть позже, когда будем внедрять приложение в эту страницу.

 

Сейчас же приступим к созданию приложения facebook. Для создания собственного приложения для facebook, помимо аккаунта, требуется еще и подтверждение номера вашего мобильного телефона, указанного в профиле facebook. На ваш мобильный номер прийдет SMS собщение с кодом подтверждения и ссылкой, по которой следует ввести этот код. SMS приходит сразу после указания вашего мобильного номера в контактах аккаунта facebook, если вы еще этого не сделали, то укажите его. Все разработчики должны подтвердить свою личность перед созданием нового приложения.

 

После того как вы подтвердите свою личность, перейдите по ссылке в футере "Разработчикам", где переходим по ссылке в верхнем меню "Приложения" - как показывает скрин:

 

iframe приложение facebook - Приложения

 

После нажатия на ссылку "Приложения" откроется "Запрос на разрешение" - это запрос разработчиков facebook к данным вашей учетной записи, куда входят данные : имя, изображение профиля, пол, сети, идентификатор пользователя, список друзей и другую информацию, доступную публично. Показано на скрине ниже:

 

iframe приложение facebook - Запрос на разрешение

 

Жмем "Разрешить", и после этого открывается страница "FACEBOOK DEVELOPERS" где нужно нажать кнопку + Создать новое приложение, как показано на скрине:

 

iframe приложение facebook - Apps on Facebook

 

После нажатия на эту кнопку появится всплывающее окно в котором будут два поля "App Display Name" и "App Namespace" как показано на скриншоте:

 

iframe приложение facebook - создание приложения Facebook

 

В первом поле нужно указать Имя Приложения, которое будет видеть пользователь, а второе можете пропустить. Также следует поставить галку что вы согласны с условиями использования facebook. Затем ввести капчу, и вас перенаправят на страницу с созданным приложением facebook. На скриншоте ниже показана страница с приложением:

 

iframe приложение facebook - Настройки приложения Facebook

 

На этой странице в поле "App Domain" вам следует указать домен на котором будет размещено приложение, к примеру: cleverscript.ru Во вкладке "Сайт", в поле "Site URL" указать URL сайта на котором будет размещено приложение, к примеру: http://cleverscript.ru И на вкладке "Приложение на Facebook" в поле "Canvas URL" указать абсолютный путь к директории с приложением на вашем сервере, например вот так: http://cleverscript.ru/facebook/test/ После этого нажать "Изменить сохранения", и если все введено правильно, в итоге должно получится как на скриншоте ниже:

 

iframe приложение facebook - Настройки приложения Facebook - true

 

После этого если все получилось настроить и сохранить настройки, запишите где то 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, как показано на скриншоте ниже:

 

iframe приложение facebook - Новое приложения Facebook

 

Теперь переходим к третьему этапу, это Подключение приложения к странице facebook - для этого переходим по адресу https://www.facebook.com/add.php?api_key=App ID&pages, где App ID - это ID вашего приложения и в выпадающем списке выбираем страницу на которую нужно добавить приложение.

 

Выглядит это так:

 

iframe приложение facebook - Новое приложения Facebook

 

Если вы все сделали правильно, на вашей странице в левой колонке, появится вкладка с Iframe приложением, нажав на которую на странице отобразится приветствие "Hellow World" которое выводится приложением. Для того чтобы сделать эту вкладку по умолчанию (т.е чтобы зайдя на страницу, пользователь видел не стену, а вкладку приложения. Вам необходимо настроить страницу - заходим в "Редактировать страницу""Управление разрешениями""Основная вкладка" – в выпадающем списке выбираем вкладку "Тестовое приложение" – нажимаем внизу кнопку "Сохранить".

 

А в этом видео показано как с помощю формы на одном сайте, добавить приложение к странице:

 

На этом все, ваше приложение может быть сколько угодно сложным, в следующей статье поговорим об использовании Facebook SDKs & Tools и взаимодействии приложений с пользователями.

 

PS. Читайте последние записи RSS Подписка на RSS

 

Метки:

Комментарии 

 
anonim Четверг, 05 Январь 2012

На странице вместо iframe выводится "Начало работы" и вводная информация "Приветствуем". (?)

 

 
 
anonim Суббота, 07 Январь 2012

Это где, ссылку плз

 

 
 
anonim Вторник, 12 Июнь 2012

Мне не приходит смс с кодом подтверждения, когда подтверждаю личность. Пробовал разные операторы - не помогает. Может Вы сможете что-нибудь посоветовать?

 

 
 
Станисав Суббота, 16 Январь 2016

подскажите - как подключить приложение фейсбука на сайт, как на этом примере http://ru.cooltest.me/

 

 

Добавить комментарий