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

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

Как вы уже наверное слышали, Facebook отказался от поддержки Static FBML, сделав ставку на IFrame. А как же теперь быть со страницами? Раньше было все довольно просто, создавай новую вкладку и выводи туда свой контент, при помощи HTML/FBML/JS.

Сейчас же, суть та же, только теперь вкладку формировать нам будет не стороннее приложение, а наше собственное, на основе IFrame.

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

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

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

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

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

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

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

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

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

  • Canvas Page – в поле ввода вбиваем имя нашего приложения (firstnewapp)
  • Canvas URL – прописываем путь к нашему будущему приложению на сервере http://magdamagla.com/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://magdamagla.com/projects/firstnewapp/

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

<!--?php require 'facebook.php'; $app_id = "141674732568375"; $app_secret = "757a6d94334588455ae65586adc00422"; $facebook = new Facebook(array( 'appId' =--> $app_id,
        'secret' =&gt; $app_secret,
        'cookie' =&gt; true
));
 
$signed_request = $facebook-&gt;getSignedRequest();
 
$like_status = $signed_request["page"]["liked"];
 
// поклонник страницы
if ($like_status) {
$a = file_get_contents("http://magdamagla.com/projects/firstnewapp/friends.html");
echo ($a);
} else {
// гостевой вход
$a = file_get_contents("http://magdamagla.com/projects/firstnewapp/guests.html");
echo ($a);
}
 
?&gt;

Как видно из первых строчек представленного кода, необходим еще файл 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, если вам так удобнее).

Удачи!

  • Pavel

    Кстати, эта фишка не работает, возможно, что где-то вы дали не полный код..

    • Pavel

      Fatal error: Uncaught exception ‘Exception’ with message ‘Facebook needs the JSON PHP extension.’ in /data/home/pleiada/htdocs/project/facebook.php:23 Stack trace: #0 /data/home/pleiada/htdocs/project/index.php(1): require() #1 {main} thrown in /data/home/pleiada/htdocs/project/facebook.php on line 23

      Выдает эту ошибку.

      • Павел, проблема в том, что на вашем хостинге отсутствует JSON расширение для PHP.

        • Pavel

          Спасибо. но в коде действительно есть ошибки: в Index.php некоторые символы «>» заменились на &gt.

          • Ага, спасибо что заметили!

  • Vlad Weblab

    http://www.facebook.com/developers/createapp.php
    — эта страница не работает — что делать , а ведь без неё нельзя создать вкладку с iframe ???

    • Как не работает? Всё открывается. Какая у вас ошибка?

      • Ирина

        Ошибка такова, пишет:
        Обнаружена ошибка в Developer. Пожалуйста, попробуйте ещё раз позже.

        • @c8b15d28b2eb01ed571ae55e59c00e4b:disqus , а где конкретно возникает ошибка?

          • Ирина

            При переходе по ссылке http://www. facebook. com/developers

          • Ирина

            Уже все работает ))

          • @c8b15d28b2eb01ed571ae55e59c00e4b:disqus , ну у Фейсбука такое бывает :)

          • Ирина

            Что то не работает. Сделала все как написано, но когда открываю приложение на странице вообще ничего не отображается.
            И что теперь делать?

          • @Ирина, проверьте доступность файла facebook.php на вашем сервере. И вообще попробуйте не заходя в фейсбук, обратиться к файлу index.php, ну типа: «http://ваш_домен/полный_путь/index.php… и посмотрите, есть ли ошибка

          • Ирина

            При переходе http://ваш_домен/полный_путь/index.php
            тоже пустая белая страница

          • а файл facebook.php есть? с ID-шниками вы не могли ничего напутать? appId и appSecret

          • Ирина

            Да файл facebook.php есть. appId и appSecret перепроверила несколько раз

          • Lerok

            Чтобы создать приложение необходимо привязать к номеру мобильного телефона. выбор оператора только life:) но смс с кодом не приходит на протяжении часа. это нормально? или я что-то неправильно сделала?

          • @Lerok — не пойму, зачем вы это делаете? просто заходите по ссылке http://www.facebook.com/developers/ и создайте новое приложение, ни к какому телефону ничего привязывать не нужно

          • Dmitrij Sheremetjev

            При попытке создать приложение появляется надпись в красной рамке: «Прежде чем разрешить Вам сделать это, нам надо проверить Вашу учётную запись. Пожалуйста, удостоверьте её подлинность, введя свой мобильный телефон или credit card.». Подтвердить телефонный номер не получается, т.к. в списке стран тупо нет Беларуси. Есть еще варианты? 

  • Riffle2

    У меня при заходе на страницу вот такое сообщение об ошибке:Parse error: parse error, unexpected T_NEW in /home/m/адрес хоста/facebook.php on line4

  • Riffle2

    Вроде разобрался: надо заливать файлы на хостинг с поддержкой именно php 5, а на моем php4. Щас зарегестрировал новый -залил все работает:) Спасибо за статью большое!:)

  • Perffectto

    Здравствуйте! А Вы не подскажете почему фейсбук не пускает по ссылке из приложения на заметку, опубликованную от имени страницы? Что-то раньше я такого не замечал…

    • @879c9272f73902eb69c3d3ada22a3383:disqus  — хм, да вроде все пускает. Может я не понял вопроса? Приведите пример, если возможно.

  • Cardist

    Спасибо, все очень подробно, все работает. guests.html не дописан.
    Про файл  facebook.php только поясните, пожалуйста. На сайте разработчика ничего подобного не нашел, это ты сам его собрал, или где-то есть исходник на самом facebooke?

    • @59469d1b859e4a3fd3298d22286b3882:disqus — ну то что guests.html не дописан, это не так важно… основную суть решения вопроса я передал, всем вроде-бы понятно и это радует. Теперь по поводу facebook.php — посмотрите внимательнее на facebook.com в разделе для разработчиков, брал оттуда

  • по поводу facebook.php  можете дать ссылку на facebook.com где он там, а то по той что здесь его нет.

  • николай

    Здравствуйте!
    Можно ли сделать еще проще? Есть сайт с емейл подпиской на главной странице. Возможно ли без долгих манипуляций сразу сделать так что бы эта страница отображалась как моя отдельная страница( партнеры, друзья, спонсоры и т.п.) на моей facebook страничке? Например ссылку «сайт»(партнера, друга) вставить туда то и опубликовать на свой «такой то» страничке facebook?

    • @николай — в iframe вы можете выводить все что пожелаете.

  • Thames

    По какой-то причине контент не отображается и после регистрации.

  • Pingback: Suhrob Niyazov » Welcome Applet – создать вкладку для Facebook в два клика()

  • Михаил

    Сейчаc вообще все не так, начиная с раздела разработчиков в FB/ Vj;yj j,yjdbnm ‘ne byajhvfwb.&