Кастомизация страниц Facebook посредством IFrame (часть 2)

Кастомизация страниц Facebook посредством IFrame (часть 2)
27.04.2011 Алексей Малыгин

Из-за недостатка времени мало того что сильно затянул с продолжением, так еще и значительно сократить пришлось материал. Ну ничего, нагоню в скором времени. Вернемся к страницам, вопросов по которым становится только больше и больше. :)

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

iframe_part2Итак, у нас на странице есть собственная вкладка, в которой выводится простой статический текст. На сервере лежат две заготовки страниц — гостевая (guests.html) и главная (friends.html).

Страницы отображаются в iframe в зависимости от статуса пользователя. Для подписчиков страницы (нажали на кнопку мне нравится) – это friends.html, а для всех остальных – guests.html.

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

Сейчас модно делать гостевую страницу цельной картинкой, разместив там, к примеру, логотип бренда или что-то в этом роде. Сделать нечто подобное ни у кого не составит труда.

Создаем на своем сервере папку img, куда размещаем заготовленную картинку с приветствием. А в коде guests.html выводим картинку так, как нам нравится:

Зато в оформлении главной страницы можно развернуться на все сто. Вот что получилось у меня (перейдите по ссылке на страницу и кликните sample page 1).

mypage

Сделать нужный фон на странице и выбрать шрифты – это не должно стать проблемой, достаточно начальных знаний CSS и HTML.

Я лишь хочу остановить на интеграции системы комментирования Facebook в страницу. Для этого достаточно таких строчек кода:

 

Все что можно здесь менять – это конечно вставить свой AppId, установить ширину блока комментирования width и количество выводимых записей numposts.

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

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

Возникли сложности и вопросы по этой теме – задавайте в комментариях.