Кастомизация страниц 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 – прописываем путь к нашему будущему приложению на сервере //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 и размещаем их у себя на сервере.

В моем примере – это //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, если вам так удобнее).

Удачи!

32
Оставить комментарий

avatar
  Подписаться  
Уведомление о
Pavel
Гость
Pavel

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

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

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

fintal
Гость

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

Pavel
Гость
Pavel

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

fintal
Гость

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

Vlad Weblab
Гость
Vlad Weblab

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

fintal
Гость

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

Ирина
Гость
Ирина

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

fintal
Гость

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

Ирина
Гость
Ирина

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

Ирина
Гость
Ирина

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

fintal
Гость

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

Ирина
Гость
Ирина

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

fintal
Гость

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

Ирина
Гость
Ирина

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

fintal
Гость

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

Ирина
Гость
Ирина

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

Lerok
Гость
Lerok

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

fintal
Гость

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

Dmitrij Sheremetjev
Гость
Dmitrij Sheremetjev

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

Riffle2
Гость
Riffle2

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

Riffle2
Гость
Riffle2

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

Perffectto
Гость
Perffectto

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

fintal
Гость

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

Cardist
Гость
Cardist

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

fintal
Гость

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

Stasdesign
Гость

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

николай
Гость
николай

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

fintal
Гость

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

Thames
Гость
Thames

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

trackback

[…] Первый вариант подразумевает создание и настройку вкладок вручную, если интересно – отправляю вас сюда и сюда. […]

Михаил
Гость
Михаил

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