Как написать базовый код для собственной iframe-вкладки Приветствия?


Код для вкладки Facebook

В одной из предыдущих статей я рассказал, как создать и установить iframe-вкладку для фан-страницы. Благодаря iframe вы можете использовать любой код (HTML, JavaScript, PHP и другие), который будет храниться на вашем хостинге. Преимущества метода iframe: на вкладке Приветствия может быть тот же функционал, что и на любом сайте. В этой статье я покажу пример кода, который является базой для каждой iframe-вкладки, и на основе которого можно добавлять код для вашего контент (текст, фото, видео), не волнуясь о каких-либо технических особенностях Facebook, потому что они будут учтены в этом примере базового кода.

Шаг 1. Создать приложение на Facebook

Перед тем, как приступить к написанию самого кода, надо создать приложение на Facebook, которое потом подключить к фан-странице (это и будет вкладка). Как это сделать, по шагам описано в статье «Как создать вкладку Приветствия? (Понимание фан-страниц. Часть 4)». Если вы хотите наглядно всё увидеть, как это делать, то подпишитесь на видеокурс, заполнив форму подписки в правой колонке. Если вы создали приложение, переходим к следующему шагу.

Шаг 2. Создать базовый код для PHP-файла (или HTML-файла)

Переходим к написанию кода. Создайте на компьютере файл index.php или index.html. (Сейчас принципиальной разницы нет php или html. Выбирайте тот формат, который вам удобен. На будущее могу сказать, что Facebook больше любит файлы php, и также на основе кода php создаётся скрывающая вкладка. Но об этом в следующей статье.) Так-с, открываем файл index.html и вставляем в него этот код.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>ЗАГОЛОВОК СТРАНИЦЫ</title>
  
  <base target='_blank' />
 
 </head>

<body>

 <div id="container">
   
   НАЧНИТЕ ПИСАТЬ КОД ЗДЕСЬ
 
 </div>

</body>
</html>

Это самая основная часть кода — «скелет». Я объясню некоторые «косточки». (Если вы знаете HTML, то уже сами разобрались.) Сперва мы задаём стандарт html, чтобы все браузеры правильно воспринимали наш код. Затем мы указываем «Заголовок» файла, кодировку текста UTF-8. Следующий параметр <base target=’_blank’ /> можно оставить, а можно убрать. Что он делает? Он говорит, что все ссылки по умолчанию будут открываться в новом окне браузера. Если ссылка на внешний сайт откроется прямо во фрейме, это будет ошибкой. Если вам всё-таки необходимо открыть ссылку внутри вкладки, то код ссылки прописываете так:

<a href="ССЫЛКА" target="_self">ЛЮБОЙ ТЕКСТ_или_КАРТИНКА</a>

Затем в коде начинается его тело, где вы пишите свой код. А в конце — теги закрывающие тело и весь html-код. Обращаю ваше внимание, что всё тело должно быть обязательно заключено в общий <div> контейнер, иначе у вас возникнут проблемы с вёрсткой.

Шаг 3. Подключить библиотеку JavaScript Facebook и одновременно убрать полосы прокрутки

Начинаем на наши «косточки» наращивать «мышцы». Первое, что надо сделать — добавить библиотеку JavaScript SDK Facebook, чтобы наш файл index.html смог «общаться» с приложением Facebook, которое мы создали в Шаге №1. Это нужно для того, чтобы убрать полосы прокрутки, а также реализовать на вкладке всевозможные плагины Facebook. Код JS SDK вставляйте сразу после тега <body>.


<div id="fb-root">
<script src="https://connect.facebook.net/ru_RU/all.js#xfbml=1"></script>
</div>
 <script>
  window.fbAsyncInit = function() {
   FB.init({
            appId: 'ID ВАШЕГО ПРИЛОЖЕНИЯ', //вставьте ID своего приложения
            status: true, //проверка статуса логина
            cookie: true, //разрешает куки для доступа серверу к сессии
            xfbml: true,  //парсинг XFBML
            oauth: true   //разрешает аутентификацию по стандарту OAuth 2.0
           });
   FB.Canvas.setAutoGrow(91);
  };
  (function() {
  var e = document.createElement('script'); e.async = true;
  e.src = document.location.protocol +
  '//connect.facebook.net/ru_RU/all.js';
  document.getElementById('fb-root').appendChild(e);
  }());
</script>

В этом коде вам нужно поменять только значение ID приложения (его надо взять из настроек вашего приложения). За удаление полос прокрутки отвечает код FB.Canvas.setAutoGrow(91). Значение в скобках — это период обновления фрейма в миллисекундах.

Шаг 4. Настроить стили CSS

Обязательно в стилях надо убрать все отступы по умолчанию. В противном случае могут появиться нежелательные сдвиги контента. Другими словами, чтобы всё стояло на своих местах. Шаблонный код CSS для всех iframe-вкладок такой.


<style>
* {
   margin: 0px;
   padding: 0px;
  }

img { border: none; }
a img { border: none; }

body {
      width: 520px;     
      overflow: hidden;
      overflow-x: hidden;
     }

#container {
            width: 520px;
            overflow: hidden;
            overflow-x: hidden;
            position: relative;
           }
</style>

Звёздочка (*) указывает на то, что мы убираем отступы и поля у всех элементов. Затем обязательно убрать границы у всех картинок и границы у картинок-ссылок. Следующий стиль относиться к телу (body). Необходимо указать ширину 520 пикселей (это максимально допустимая ширина вкладки на фан-страницах), скрыть полосы прокрутки даже при просмотре файла на компьютере и на хостинге (это важно для некоторых браузеров). Последний стиль для контейнера <div>, в который мы помещаем всё тело нашего кода.

Шаг 5. Загрузить, протестировать и начать писать основной код

Теперь файл index.html готов к работе. Загрузите его на хостинг. В настройках вашего приложения на Facebook пропишите путь к этому файлу. Добавьте приложение на фан-страницу. Зайдите на неё и откройте добавленную вкладку. Если всё сделано правильно, вы должны увидеть «НАЧНИТЕ ПИСАТЬ КОД ЗДЕСЬ». После этого можете приступать к написанию кода для вёрстки основных элементов вкладки, добавлению плагинов Facebook и других нужных элементов.

Полный шаблонный код для файла index.html.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
  
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>ЗАГОЛОВОК СТРАНИЦЫ</title>
  
  <style>
  * {
     margin: 0px;
     padding: 0px;
    }

  img { border: none; }
  a img { border: none; }

  body {
        width: 520px;     
        overflow: hidden;
        overflow-x: hidden;
       }

  #container {
              width: 520px;
              overflow: hidden;
              overflow-x: hidden;
              position: relative;
             }
  </style>  
  
  <base target='_blank' />
 
 </head>

<body>
 <div id="fb-root">
 <script src="https://connect.facebook.net/ru_RU/all.js#xfbml=1"></script>
 </div>
  <script>
   window.fbAsyncInit = function() {
    FB.init({
             appId: 'ID ВАШЕГО ПРИЛОЖЕНИЯ', //вставьте ID своего приложения
             status: true, //проверка статуса логина
             cookie: true, //разрешает куки для доступа серверу к сессии
             xfbml: true,  //парсинг XFBML
             oauth: true   //разрешает аутентификацию по стандарту OAuth 2.0
            });
    FB.Canvas.setAutoGrow(91);
   };
   (function() {
   var e = document.createElement('script'); e.async = true;
   e.src = document.location.protocol +
   '//connect.facebook.net/ru_RU/all.js';
   document.getElementById('fb-root').appendChild(e);
   }());
 </script>

 <div id="container">
   
   НАЧНИТЕ ПИСАТЬ КОД ЗДЕСЬ
 
 </div>

</body>
</html>

Если вы хотите своими глазами увидеть, как создается iframe-вкладка, подпишитесь на бесплатный видеокурс, заполнив форму подписки в правой колонке.

Комментарии Facebook: