Кастомизация страниц фейсбук посредством Iframe

IFrame – это такой тэг языка разметки HTML, позволяющий вставить в заданную им область, полностью независимый web-документ. Получается как бы страница в странице.

Вот только файлы, которые мы захотим выводить в IFrame-блоке, необходимо где-то хранить, а для этого понадобится хостинг идомен. Уделив 5 минут поиску в интернете, вы без труда найдетебесплатный хостинг да еще и с доменом в придачу. Сейчас это не проблема. Главное иметь возможность размещать на хостинге свои файлы.

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

Предоставленные примеры полностью рабочие и взяв их за основу, можно без трудакастомизировать страницу Facebook.

Начнем с создания IFrame-приложения.

Переходим по ссылке http://www.facebook.com/developers/ и создаем новое приложение (в моем примере – это firstnewapp).

Переходим в раздел Facebook Integration

Обратите внимание на параметры AppId и AppSecret. Это идентификатор и секретный ключ приложения, соответственно. Позднее они нам понадобятся.

Заполняем следующие параметры:

Canvas Page – в поле ввода вбиваем имя нашего приложения (firstnewapp)
Canvas URL – прописываем путь к нашему будущему приложению на сервереhttp://allfacebook.com.ua/projects/firstnewapp/. Как видно из этой ссылки, я создал у себя на сервере в папке projects папку firstnewapp, где буду хранить все файлы, предназначенные для отображения в IFrame-блоке. Не забывайте про закрывающий слеш /.
Secure Canvas URL – тоже самое, что и в предыдущем разделе, только указываем защищенный протокол https
Canvas Type – выбираем IFrame
Размер IFrame – Auto-resize
Имя вкладки – это собственно и есть название нашей будущей кастомизированной вкладки на странице Facebook, где и будет отображаться IFrame приложение. Прописываем New Custom Tab
Page Tab Type – IFrame
URL-вкладка – это полный пусть к местоположению содержимого для нашей вкладки. У меня это полный пусть к файлу index.php (смотрите картинку ниже)

На стороне Facebook пока все. Создаем три файла: index.php, friends.html, guests.html и размещаем их у себя на сервере.

В моем примере – это http://allfacebook.com.ua/projects/firstnewapp/

Привожу содержимое файла index.php. Впишите только AppId и AppSecret созданного ранее приложения.

$app_id,

'secret' => $app_secret,

'cookie' => true

));

$signed_request = $facebook->getSignedRequest();

$like_status = $signed_request["page"]["liked"];

// поклонник страницы

if ($like_status) {

$a = file_get_contents("http://allfacebook.com.ua/projects/firstnewapp/friends.html");

echo ($a);

} else {

// гостевой вход

$a = file_get_contents("http://allfacebook.com.ua/projects/firstnewapp/guests.html");

echo ($a);

}

Как видно из первых строчек представленного кода, необходим еще файл facebook.php — это клиентская библиотека, которую можно взять на странице для разработчиков Facebook или скачайте отсюда. Файл facebook.php необходимо разместить в той же директории, где находится index.php.

Возвращаемся в Facebook, переходим на странице разработчиков http://www.facebook.com/developers/к нашему приложению firstnewapp и выбираем в меню справа Application Profile Page.

Попадаем на страницу приложения. Теперь необходимо добавить приложение на нужную нам страницу Facebook, если таковой еще нет, то создаем: http://www.facebook.com/pages/create.php

В меню слева нажимаем на ссылку добавить к моей странице. В появившемся списке страниц выбираем целевую (при желании можно добавить на несколько).

Переключаемся в режим управления страницами аккаунт – использовать в режиме страницы и выбираем страницу, на которую перед этим добавили приложение. В левом меню у вас должна появится новая вертикальная вкладка New Custom Tab.

Нажимаем на вкладку и видим содержимое файла guests.html. При нажатии кнопки Like, в IFrame отобразиться файл friends.html.

Сложно?

Да, несколько сложнее, чем со старым добрым Static FBML, но со временем вы оцените преимущества IFrame.

В следующих уроках попробуем поиграться с HTML5 и красиво разукрасить вкладку нашей страницы медиа-контентом.

Все исходные коды, множество примеров, готовые HTML5-шаблоны и подробное руководство по разработке страниц facebook можно взять по ссылке.

А пока подписывайтесь на RSS или Twitter, задавайте вопросы (да, кстати, спрашивать можно прямо через Twitter, если вам так удобнее).

Удачи!

Эта статья помогла вам?

Сервис поддержки клиентов работает на платформе UserEcho

​Кастомизация страниц фейсбук посредством Iframe

Кастомизация страниц фейсбук посредством Iframe