Как сделать «живую» кнопку «Мне нравится» на вкладке?


Как сделать живой Like

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

Шаг 1

За основу возьмём код вкладки «Приветствия» фан-страницы Счастливчика. Так-с, у вас уже должен быть реализован механизм «скрывающей вкладки».

Шаг 2

Сейчас наша задача — сгенерировать код кнопки «Мне нравится». Для этого копируем URL-адрес фан-страницы, заходим в раздел плагинов Facebook http://developers.facebook.com/plugins, кликаем на верхнюю ссылку Like Button. Вставляете ссылку в поле «URL to Like», убираете галочку «Send Button», выбираете «Layout Style» — «button_count», ширина «Width» 150 пикселей, снимаете галочку «Show Faces» и нажимаете кнопку «Get Code». Настройки должны выглядеть так:
Настройки кнопки Мне нравится

Выбираете код кнопки обязательно XFBML и копируете его. Также убедитесь, что у вас подключена библиотека Javascript Facebook, как показано в первом пункте, и в теге <html> добавлен код, чтобы браузер понимал XFBML, как показано во втором пункте.
XFBML код кнопки Like Facebook

Шаг 2

Теперь открываете на компьютере файл, в который нужно вставить код кнопки «Мне нравится» (в моём случае это файл index.php), и вставляете код там, где должна находится кнопка. Пусть на вкладке Счастливчика кнопка будет находится внизу и посередине, как показано на картинке.
Живая конка Like Facebook

Для этого я задам ширину и отцентрирую контейнер div, в котором будем находится код кнопки.


<div style="width: 150px; margin: 10px auto;">
  <fb:like href="https://www.facebook.com/pages/Счастливчик/211474278920120" 
  send="false" layout="button_count" width="150" show_faces="false" 
  font="tahoma"></fb:like> 
</div>

Шаг 3

Самое интересное — сейчас мы «оживим» кнопку. Для этого перед закрывающим тегом </body> вставьте вот этот код Javascript Facebook:


<div id="fb-root"></div> 
  <script src="https://connect.facebook.net/ru_RU/all.js"></script> 
    
    <script> 
      FB.init({ 
               appId: '226345168441562',  //замените на свой 
               status: true, 
               cookie: true, 
               xfbml: true, 
               oauth: true 
             }); 
       
      FB.Event.subscribe('edge.create', function (resp) {
        top.location.href='https://www.facebook.com/pages/Счастливчик/211474278920120?sk=app_283238315039764';
      });
</script> 

Я использую код события FB.Event.subscribe(‘edge.create’, function (resp)), в котором говорится: если кнопка «Мне нравится» нажата, то сделать то-то. А дальше прописан код обычного редиректа, только мы перенаправляем пользователя на туже вкладку, поэтому у него создаётся впечатления, что это обычное обновление вкладки, как будто пользователь нажал «Мне нравится» вверху Страницы. Ссылку в коде, конечно, замените на ссылку вашей вкладки (или на ссылку Стены или другой вкладки, это зависит от ваших целей).

Всё готово. Теперь на нашей вкладке есть живая кнопка «Мне нравится». Результат посмотрите на фан-странице Счастливчика.

Полный код «живого» Like.


<!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" xmlns:fb="http://ogp.me/ns/fb#">

 <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"></div>
 <script src="https://connect.facebook.net/ru_RU/all.js#xfbml=1"></script>
  <script>
   window.fbAsyncInit = function() {
    FB.init({
             appId: '283238315039764', //вставьте 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 style="width:500px; background:#cccccc; padding:10px 0px 20px 20px;">
     
   <h2>Привет, Счастливчик!</h2>
    <p>Добро пожаловать на мою Страницу!</p>
    <p>Нажми "Мне нравится", чтобы проверить работу скрывающей вкладки.</p>
       
    <div style="width: 150px; margin: 10px auto;">
     <fb:like href="https://www.facebook.com/pages/Счастливчик/211474278920120" send="false" layout="button_count" 
                     width="150" show_faces="false" font="tahoma"></fb:like> 
    </div>
  
   </div>
        
 <!-- Живой Лайк -->
 
   <script> 
     FB.init({ 
              appId: '283238315039764', 
              status: true, 
              cookie: true, 
              xfbml: true, 
              oauth: true 
            }); 
            
      FB.Event.subscribe('edge.create', function(response){ 
	top.location.href = 'https://facebook.com/pages/Счастливчик/211474278920120?sk=app_283238315039764'; 
      });
    </script>		
    
</body>
</html>

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