Как сделать скрывающую вкладку, чтобы показывать контент только тем, кто нажал «Мне нравится»?


Скрывающая вкладка фан-страницы

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

На английском это называется reveal tab, или fan gate (что переводится как «скрывающая вкладка», или «ворота для фанов»).Эта статья вам пригодится и будет понятна, если вы владеете навыками работы с HTML и, у вас есть свой хостинг. Потому что мы будем работать с файлами формата PHP.

Перед началом

Для создания «скрывающего эффекта» у вас уже должна быть полностью установлена iframe-вкладка на Странице. У если вы этого еще не сделали, тогда прочитайте эти 2 руководства: «Как создать вкладку Приветствия?» и «Как написать базовый код для собственной iframe-вкладки Приветствия?». После выполнения этих действий у вас должна быть работающая iframe-вкладка и ваш код должен выглядеть вот так:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
  
  <meta 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
            });
   };
   (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>

  <script>
    FB.init({
             appId: 'ID ВАШЕГО ПРИЛОЖЕНИЯ', //вставьте ID своего приложения
             status: true, //проверка статуса логина
             cookie: true, //разрешает куки для доступа серверу к сессии
             xfbml: true,  //парсинг XFBML
             oauth: true   //разрешает аутентификацию по стандарту OAuth 2.0
            });
    FB.Canvas.setAutoGrow(91);
 </script>
</body>
</html>

Только в этот раз я буду использовать формат php. Если у вас файл для вкладки index.html, то откройте его в программе Notepad++ и сохраните в формате php (например, index.php).

Шаг 1. Скачайте и подключите Facebook PHP SDK

Чтобы получить информацию от Facebook о том, нажал пользователь «Мне нравится» на вашей Странице или нет, надо в коде подключить библиотеку Facebook PHP SDK. Скачать свежую версию можно всегда на этом официальном источнике https://github.com/facebook/php-sdk (следите за обновлениями PHP SDK, это происходит примерно 1 раз в полгода). Загрузите zip-архив, найдите в нём файлы facebook.php, base_facebook.php, fb_ca_chain_bundle и скопируйте их в ту же папку, где находится ваш index.php. Затем откройте файл index.php и вставьте следующий php-код в самое начало прямо начиная с первой строчки:


<?php
require 'facebook.php';
 
$app_id = "ВСТАВЬТЕ-ID-ВАШЕГО-ПРИЛОЖЕНИЯ-ЗДЕСЬ";
$app_secret = "ВСТАВЬТЕ-СЕКРЕТ-ВАШЕГО-ПРИЛОЖЕНИЯ-ЗДЕСЬ";
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));
?>

В этом коде надо поменять 2 значения: ID приложения, которое вы создали на Facebook для вкладки и его Секрет. Эти данные вы найдёте в разделе разработчиков в панели управления приложениями. Также контролируйте путь к файлу facebook.php. В данном случае в коде указано, что facebook.php находится в той же папке, что и файл index.php.

Шаг 2. Укажите нужные PHP-переменные

Следующий шаг — это прописать 2 переменные, которые будут получать с Facebook информацию о статусе пользователя (фан или нет). Для этого добавьте в предыдущий PHP-код перед знаком ?> следующие две строчки кода:


$signed_request = $facebook->getSignedRequest();
$like_status = $signed_request["page"]["liked"];

Первая переменная $signed_request проверяет залогинен ли на Facebook человек, зашедший на вашу Страницу. Вторая переменная $like_status проверяет, является ли залогиненый пользователь фаном вашей Страницы.

Шаг 3. Задаём условия на основе 2-х PHP-переменных

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


<?php if ($like_status) { ?>

  Контент для ФАНОВ

<?php } else { ?>

  Контент для НЕФАНОВ

<?php } ?>

В этом условии говорится, если пользователь «лайкнул» Страницу сделать это, иначе — сделать то. Другими слова, контент под условием if ($like_status) отображается для пользователей, нажавших «Мне нравится». Если пользователь не нажал «Мне нравится», он увидит контент, который прописан под условием else.

Теперь у вас есть полнофункциональная iframe-вкладка с функцией скрывающей вкладки.

Весь итоговый код.


<?php
require 'facebook.php';
 
$app_id = "ВСТАВЬТЕ-ID-ВАШЕГО-ПРИЛОЖЕНИЯ-ЗДЕСЬ";
$app_secret = "ВСТАВЬТЕ-СЕКРЕТ-ВАШЕГО-ПРИЛОЖЕНИЯ-ЗДЕСЬ";
$facebook = new Facebook(array(
'appId' => $app_id,
'secret' => $app_secret,
'cookie' => true
));

$signed_request = $facebook->getSignedRequest();
$like_status = $signed_request["page"]["liked"];
?>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 
 <head>
  
  <meta 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
            });
   };
   (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">
   
   <?php if ($like_status) { ?>

     Контент для ФАНОВ

   <?php } else { ?>

     Контент для НЕФАНОВ

   <?php } ?>
 
 </div>

  <script>
    FB.init({
             appId: 'ID ВАШЕГО ПРИЛОЖЕНИЯ', //вставьте ID своего приложения
             status: true, //проверка статуса логина
             cookie: true, //разрешает куки для доступа серверу к сессии
             xfbml: true,  //парсинг XFBML
             oauth: true   //разрешает аутентификацию по стандарту OAuth 2.0
            });
    FB.Canvas.setAutoGrow(91);
 </script>
</body>
</html>

Пример можете посмотреть и «пощупать» на Странице Счастливчика. А если вы хотите наглядно увидеть, как делается такая скрывающая вкладка, подпишитесь на бесплатный видеокурс «Фан-страница: запуск» в правой колонке.

Ссылки по теме:

Я люблю своих друзей. PHP + Javascript

Поделитесь с друзьями

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