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


Как вы уже наверное слышали, 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://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 созданного ранее приложения.

<!--?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://allfacebook.com.ua/projects/firstnewapp/friends.html");
echo ($a);
} else {
// гостевой вход
$a = file_get_contents("http://allfacebook.com.ua/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

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

      • http://allfacebook.com.ua fintal

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

        • Pavel

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

          • http://allfacebook.com.ua fintal

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

  • Vlad Weblab

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

    • http://allfacebook.com.ua fintal

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

      • Ирина

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

        • http://allfacebook.com.ua fintal

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

          • Ирина

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

          • Ирина

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

          • http://allfacebook.com.ua fintal

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

          • Ирина

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

          • http://allfacebook.com.ua fintal

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

          • Ирина

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

          • http://allfacebook.com.ua fintal

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

          • Ирина

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

          • Lerok

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

          • http://allfacebook.com.ua fintal

            @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

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

    • http://allfacebook.com.ua fintal

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

  • Cardist

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

    • http://allfacebook.com.ua fintal

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

  • http://www.facebook.com/StasDesign Stasdesign

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

  • николай

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

    • http://allfacebook.com.ua fintal

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

  • Thames

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

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

 
rss
Карта