Кастомизация страниц 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 можно взять по ссылке.

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

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

  • Спасибо за статью!

    вот такое у нас получилось — http://www.facebook.com/pages/Live-Photo/192427344135676

    напишите, пожалуйста, что думаете по этому поводу. Что можно было бы улучшить для большего юзер-френдли интерфейса и понимания нашей цели?

    • @facebook-1131541839:disqus  — простите, что так долго не отвечал. Оставьте мне ваши координаты, я напишу некоторые соображения.

      • Ukrpsycho

        ukrpsycho(a)gmail.com
        :)

  • Очень доступно, спасибо

  • Cattytwi

    А куда вставлять код для комментирования? В файл friends.html? 

    • @Cattytwi — скрипт можно вставлять куда захотите, в любую страничку. В данном случае да, я вставил во friends.html