Как добавить форму приглашения друзей на фан-страницу?


Форма приглашения друзей на страницу Фейсбук

Форма приглашения друзей на Странице позволяет вашим фанам легко пригласить своих друзей. Она может располагаться, например, на вкладке Приветствия. Это может быть ссылка, картинка и т. п. (в зависимости от вашего дизайна), нажимая на которую появляется всплывающее окно с этой формой.

Делается такая форма стандартными кодами Facebook. Код очень простой. Ниже приведён пример приглашения друзей на основе Javascript SDK. (Обязательное условие — у вас уже должна быть вкладка iframe на фан-странице.)


<!--в начале стандартный код подключения библиотеки javascript Facebook-->    
<!--в нём поменяйте ID приложение на свой-->

<div id="fb-root"></div>
<script 
src="https://connect.facebook.net/ru_RU/all.js#xfbml=1&appId=152958841451495">
</script>

<!--Здесь начинается сам код приглашения друзей-->     

<script>
   FB.init({
// id приложения обязательно замените на свой, 
// он должен совпадать с id вкладки, на которой размещён код приглашения.    
	appId:'152958841451495', 
	cookie:true,             
        status:true,             
	xfbml:true, 
	oauth:true
    });

	function req() {
            FB.ui({ method: 'apprequests',
            // Текст сообщения и заголовка может быть любой, но не длинный.
            message: 'Приглашаю на Страницу Мастерская фан-страниц.',
            title: 'Приглашение друзей на эту Страницу'
	    });
         }
</script>

<!--Это код ссылки, нажимая на которую 
будет вызываться форма приглашения-->   
<a href="#" onclick="req()">Приглашаю на страницу</a>

<!--Это код кнопки, нажимая на которую 
будет вызываться форма приглашения-->   
<a href="#" onclick="req()"><img src="ССЫЛКА_НА_КАРТИНКУ_КНОПКИ"></a>

Этот код копируете и вставляете в HTML-код вашей вкладки между тегами <body> </body>. Затем в коде приглашения друзей вам обязательно надо вставить свой id приложения, заменить текст message: и текст title: тоже на свой (текст сообщения и заголовка не должен быть длинным). Чтобы быстро узнать id, зайдите на вкладку, на которую вы добавите приглашение друзей и вы сможете увидеть id в адресной строке:

Приглашение друзей на страницу Фейсбук

Дальше выбираете: у вас будет ссылка или картинка, нажимая на которую появится форма приглашения друзей. Если вам нужна ссылка в виде текста, то оставляете только код ссылки. Если это будет кнопка/картинка, то оставляете только код для кнопки. В этом случае в коде кнопки вставьте ссылку на изображение для самой кнопки.

Вот та часть кода, где нужно внести изменения:


<!--Это код ссылки, нажимая на которую 
будет вызываться форма приглашения-->   
<a href="#" onclick="req()">Приглашаю на страницу</a>

<!--Это код кнопки, нажимая на которую 
будет вызываться форма приглашения-->   
<a href="#" onclick="req()"><img src="ССЫЛКА_НА_КАРТИНКУ_КНОПКИ"></a>

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

Для этого в настройках приложения используйте Canvas URL. Вот пошаговая инструкция, как сделать редирект.

Шаг №1

Создайте на компьютере 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>
   <title>Редирект на вкладку</title>
 </head>
 
 <body>
   
   <script type="text/javascript">
      top.window.location = "http://URL-вкладки-назначения";
   </script>
 
 </body>

</html>

В код top.window.location = «http://URL-вкладки-назначения»; вставьте ссылку на свою вкладку и сохраните файл под именем index.html, например.

Шаг №2

Загрузите этот файл на хостинг в отдельную папку (напомню, что ваш хостинг обязательно должен иметь SSL-сертификат). Например, https://fanstranici-rezultatza27dnej.ru/redirect/index.html. Теперь в браузерной строке пропишите путь к этому файлу и нажмите Enter. Если браузер перенаправит вас на вкладку фан-страницы, значит вы всё сделали правильно. Потом ещё раз проверьте эту ссылку, чтобы она открывалась также и по протоколу https.

Шаг №3

Теперь скопируйте ссылку на ту директорию, в которой находится файл index.html с редиректом (ссылка обязательно должна заканчиваться на слэш; например, http://fanstranici-rezultatza27dnej.ru/redirect/). Зайдите в настройки приложения на Facebook и в поле Canvas URL вставьте эту ссылку, чтобы она начиналась на http, а в поле Secure Canvas URL вставьте эту же ссылку, только чтобы она начиналась на https. Сохраните изменения.

использование Canvas для редиректа

Шаг №4

Теперь протестируйте форму приглашения друзей. Пригласите кого-нибудь на вашу фан-страницу (например, меня:)) и спросите у него, попал ли он на вкладку или нет. Обязательно протестируйте при соединении http и https.

Желаю удачной реализации. Отзывы пишите в комментариях к этой статье.

Живой пример вы можете посмотреть на этой вкладке.

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