Facebook Welcome Page и прочие кастомные табы

Facebook — самая большая социальная сеть и один и самых посещаемых сайтов в мире (КО). И если кто не знал — в ней можно не только постить веселые статусы и лайкать фоточки, но и использовать как мощный маркетинговый инструмент. Все логично — миллиард пользователей, возможность таргетинга на определенную аудиторию, мгновенные объявления, ну и куча других полезных штук, которые недоступны для оффлайна. На сегодняшний день сложно найти компанию без собственной бизнес-страницы или популярную личность без фан-пейджа. Однако, обратимся к технической части этого дела, а маркетинг оставим для гуманитариев.
Речь в этом посте пойдет не о создании самой страницы, потому что это довольно тривиальная процедура, а о пользовательских табах, ссылках, которые находятся в левом сайдбаре страницы. Ну, вы в курсе — заходите, например, на страницу Арсенала — а там слева куча нестандартных табов:

А точнее — все те, что ниже дефолтного Friend Activity.
Несколько раз на просторах интернета мне на глаза попадались объявления от веб-студий с предложением создать свою фан-страницу с кастомными табами. При чем минимальная стоимость этой услуги мне показалась довольно немалой. Меня это несколько удивило, потому что любой даже начинающий веб-разработчик может наделать с десяток таких табов за один вечер, зная некоторые принципы и нюансы их создания. Я имею в виду подавляющее большинство всякого рода welcome-страниц, страниц-анонсов и страниц со всяким информационным текстово-графическим контентом. На страницы посложнее с разными динамическими элементами, формами и прочим функционалом времени уйдет, конечно, побольше.

Первое, что следует уточнить — работаем со страницей продукта, а не с личным профайлом — на свой профайл не получится добавить таб со своим контентом, особенно после введения нового интерфейса timеline, где эти табы отсутствуют как класс.
Таким образом, добавить собственный таб можно только на странице продукта (бренда, компании, группы и т. п.). Если таковой страницы не существует, ее следует создать, пройдя по следующей ссылке: www.facebook.com/pages/create.php

В создании такой страницы нет ничего сложного, поэтму этот этап я пропущу. Тем более, если клиент просит кастомизировать страницу, то она чаще всего у него уже имеется.

Собственно, к делу.

Сделать кастомный таб можно двумя основными способами: либо создав собственное приложение с помощью средств фб-разработчика, либо воспользовавшись сторонним приложением. Выбирать способ следует исходя из ТЗ и выделенного на разработку времени. Плюсы и минусы каждого из способов будут рассмотрены ниже, выводы по этому поводу — в конце.

И да, будем подразумевать, что html-контент уже сверстан, залит на общедоступный ftp-сервер и дожидается своего часа.

Итак, способ первый — создаем свое приложение

Подготовка аккаунта

Работа со средствами разработки фейсбука начинается со следующей страницы: developers.facebook.com/apps

На ней можно увидеть созданные приложения, которые привязаны к текущему аккаунту.

Здесь нас в первую очередь интересует кнопка «+ Create New App»

Однако, если вы заходите на developers.facebook.com впервые, то вам, скорее всего, нужно будет совершить несколько дополнительных шагов.

Во-первых, приложению developer следует разрешить доступ к вашей основной информации и подтвердить пароль:

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

Приступаем непосредственно к созданию

Сразу после нажатия «Create New App» появится окно, в котором предлагается ввести название вашего будущего приложения и согласиться с политикой фб-платформы:

Поле App Namespace можно оставить пустым (нужно для полноценных фейсбук-приложений, использующих Open-Graph и canvas-страницы)

Далее следует стандартный ввод капчи

После сабмита видим основные настройки нашего приложения. Здесь можно загрузить иконку, задать имя, выбрать категорию приложения при провести прочие основные настройки. Однако, все эти манипуляции можно отложить на будущее и вернуться к ним позже. Внизу страницы следует выбрать метод, с помощью которого наше приложение будет интегрировано в фейсбук.

Наша цель — собственный кастомный таб, поэтому соответственно выбираем «Page Tab».

В первом поле указываем название таба, в следующих двух — прямые ссылки на нашу верстку или динамический контент, предварительно залитые на ftp общедоступного сервера.

Однако, здесь вас будет поджидать первый нюанс — SSL-защита является обязательным требованием фейсбука с октября 2011, поэтому обязательно, чтобы нужный вам url был доступен по протоколу https

Нажав кнопку «Save Changes» мы получаем готовый работающий таб. При желании можно открыть раздел advanced, и провести более тонкую настройку приложения.

Теперь перейдем непосредственно к добавлению созданного приложения на нужную нам страницу.

Как добавить App / Custom Tab на Facebook Page (старый метод)

До декабря 2011 для добавления таба на страницу нужно было следовать следующему алгоритму:

1. Логинимся в Facebook и переходим на страницу developers.facebook.com/apps.

2. В левой части страницы выбираем созданное приложение и заходим в его свойства (edit app)

3. В блоке ссылок слева внизу выбираем «View app profile Page». Нас автоматически перебрасывает на страницу приложения:

4. В левой части этой страницы жмем «Add to my page»:

5. В появившемся окне выбираем нужную нам страницу, жмем «Add to Page» и на указанной странице появляется добавляемый таб:

Не смотря на то, что с декабря 2011 этот метод добавления изменился, тем не менее, он все еще остается актуальным для тех приложений, которые были созданы до этой даты.

Как добавить App / Custom Tab на Facebook Page (новый метод)

1. Заходим на developers.facebook.com/apps/ и выбираем нужное нам приложение. Здесь интерес представляет поле App ID/API Key:

2. В браузере формируем следующуй урл:

http://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&next=YOUR_URL

где вместо YOUR_APP_ID подставляем свой App ID, а вместо YOUR_URL указываем ссылку на страницу, указанную в настройках приложения в поле «Page Tab Url»

3. Жмем enter и в появившемся окне выбираем страницу, на которую хотим добавить таб:

Кликаем на «Add Page Tab» и если все произошло успешно, оказываемся на странице, указанной в YOUR_URL. Возвратившись на страницу продукта http://www.facebook.com/pages/your_url можно будет увидеть добавленный нами таб в самом низу списка уже существующих табов. Нажав «EDIT» под ними можно изменить позицию нашего таба. Однако, поднять его выше «Wall» и «Info» не получится.

Зайдя в свойства приложения, можно провернуть его более тонкую настройку.
Одни из преимуществ своего приложения — это его полный контроль, куча тонких настроек и простота установки собственной иконки таба.
К минусам можно отнести время его создания, по сравнению со вторым способом, а также сложность сделать так называемый fan-gate. Вы скорее всего видели такое кучу раз на разных страницах — когда предлагается нажать Like для того, чтобы увидеть какой-нибудь скрытый контент.

Способ номер два — добавляем таб с помощью сторонних приложений

На данный момент существует огромное количество бесплатных приложений, которые позволяют добавить кастомный таб на вашу страницу и произвести его настройку. Достаточно ввести в строке поиска фейсбука запрос «static html» и в результатах можно будет увидеть наиболее популярные приложения:

FBML-приложения можно не рассматривать, так как фейсбук отказался от fbml в пользу html-iframes.

Рассмотрим наиболее популярное приложение Static HTML: iframe tabs. Количество активных пользователей говорит само за себя.

Нажав на «Go to App» попадем на страницу самого приложения, которая выглядит таким образом:

На ней жмем «Add Static HTML to a Page» и выбираем ту страницу, на которую хотим добавить таб:

После произведенных манипуляций в левой части нашей страницы среди прочих табов появится новый таб «Welcome». Отличительная черта приложения Static HTML — иконка белой звезды на сером фоне.

Перейдем к непосредственной настройке таба. Для начала изменим его название. Для этого перейдем ко списку всех уже установленных приложений. Сделать это можно перейдя на первые три дефолтных таба (Get Started, Wall, Info) и нажав на «Edit Page» в правом верхнем углу.

Далее выбираем нужное нам приложение и нажимаем «Edit Settings». В появившемся поп-апе можем либо изменить его имя, либо удалить этот таб.

Сменив название таба перейдем к его контенту. Для этого просто выберем его в общем списке табов. Если пользователь залогинен под администраторским аккаунтом, он увидит страницу с настройками. Все остальные выбирая этот таб будут видеть непосредственно его контент.

Приложение Static HTML имеет поддержку «fan-gate» и это одно из его главных преимуществ.

Поле контента можно заполнить как html/css кодом, так и указать прямую ссылку с помощью iframe.

Чтобы просмотреть результат нажимаем на preview. В окне предварительного просмотра можем выбрать контент, который желаем увидеть — либо публичный, либо доступный только тем, кто залайкал страницу.

Главным недостатком данного приложения была невозможность смены иконки. Однако, в двадцатых числах декабря 2011го разработчики добавили такую возможность. Новые функции приложения доступны по клику на кнопку * magic:

Теперь пользователю предоставляется возможность контролировать некоторые важные моменты: можно скрыть скроллбары, добавить google-аналитику, а перейдя на вкладку «Custom Icon» можно увидеть список шагов, которые приводят к смене дефолтной иконки на свою. Стоит отметить, что этот процесс остается быть довольно нетривиальным — приходится создавать свое приложение и связывать его со static html. А если вы захотите изменить иконку на втором табе, созданном с помощью этого приложения, вас попросят заплатить денежку.

Также, одним из самых популярных приложений является «Static Iframe Tab»

Добавляется на страницу он аналогичным предыдущему приложению способом. Однако, static iframe tab обладает более широким набором настроек контента таба.

В разделе настроек можно заметить, что внизу присутствует ссылка на разработчиков приложения. К счастью, для всех посетителей страницы эта ссылка не видна. «Static Iframe Tab» — одно из немногих приложений, которые убирают левые ссылки с фронт-енд варианта таба.

Резюмируя, можно сказать, что вариант с подключением стороннего приложения более прост в настройке и существенно выигрывает по времени создания у собственного приложения. Дополнительным жирным плюсом будет простота создания фан-гейтов.
Из минусов можно отметить сложность смены стандартной иконки приложения, ссылки на сайты создателей этого приложения во многих из них, а также зависимость от этих самих разработчиков и их серверов. Не смотря на то, что у того же Static HTML iframe tabs десятки миллионов пользователей, бывало так, что это приложение переставало работать на некоторое время из-за проблем на их серверах. Однако, это мало кого смущает, в результате чего Static HTML можно видеть на страницах, у которых огромное количество подписчиков, при чем довольно часто они даже не заморачиваются по поводу смены стандартной иконки приложения на свою.

Подводя итоги вышенаписанного. Краткая выжимка

Шаги создания таба. Вариант 1 — создание собственного приложения

  • Анализ дизайна на предмет сложности, динамического контента, кастомной иконки, форм и пр.
  • Верстка статического контента.
  • Загрузка файлов на внешний сервер.
  • Убедиться, что файлы доступны по https (SSL-защита является обязательным требованием фейсбука с октября 2011).
  • Создание фейсбук-приложения, в настройках которого указывается ссылка на готовую верстку.
  • Добавление этого приложения на страницу продукта в качестве таба.
  • Изменение названия таба.
  • Profit!

Плюсы этого варианта:

  • полный контроль приложения и его персонизация (настройки приватности, смена иконки, мультиязычность и пр.);
  • отсутствие возможных ссылок на сторонние приложения, повышенная безопасность;
  • стабильность работы зависит только от сервера, на котором находится верстка.

Минусы:

  • сложность с настройкой «Fan-Gate»;
  • создание своего приложения чуть дольше, чем подключение стороннего;
  • необходимость использовать SSL.

Шаги создания таба. Вариант 2 — сторонние приложения

  • Шаги 1-2 из первого варианта (анализируем, верстаем).
  • Выбор наиболее подходящего приложения.
  • Установка приложения на страницу продукта.
  • Настройка приложения (указание ссылки на верстку, название таба, настройка «fan-gate» по необходимости)
  • Profit!

Плюсы этого варианта:

  • относительно высокая скорость получения требуемого результата;
  • легкость настройки «fan-gate» и ему подобных вариантов доступа к контенту;
  • обычно легкая настройка и правка контента даже для клиента;
  • не требуется доступ по https.

Минусы:

  • сложность или отсутствие возможности смены иконки таба;
  • ссылки на сайт разработчика приложения и всевозможные надписи типа «powered by …»;
  • нет уверенности в стабильной работе приложения.

Немного полезной информации, которая может fanpage — создателю

— Добавляем Fan-Gate на собственное приложение с помощью php-манипуляций www.chilipepperdesign.com/2011/02/15/reveal-fan-gate-like-gate-facebook-iframe-tab-tutorial-with-php

— Максимальные размеры картинки профайла: 180px × 540px (с мая 2011). Пользователю профайла назначается аватар 151×151, который является либо пропорционально уменьшенной копией большой картинки, либо ее частью.

— При добавлении изображений (либо когда кто-то отмечает вас на фотографиях в своем альбоме) последние 5 из них появляются в верхней части страницы Wall. С помощью этих изображений можно выложить одну большую.

— По-умолчанию фейсбук не позволяет делать прямые внешние ссылки с помощью табов. Этот запрет можно обойти, сделав редирект с помощью javascript, например таким образом:

<script type=’text/javascript’>top.location.href = ‘http://google.com’;</script>

— Избавляемся от вертикального скролла в ифреймах:

(вставить перед </body> )

<div id="fb-root"></div>
<!--this div is required by the Javascript SDK-->
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script><script type="text/javascript">// <![CDATA[
     window.fbAsyncInit = function() {            
 FB.init ({                           
 appId  : 'YOUR_APP_ID',                            
status : true, // check login status                            
cookie : true, // enable cookies to allow the server to access the session                            
xfbml  : true // parse XFBML          });          
FB.Canvas.setAutoResize(); //set size according to iframe content size };          
(function() {                   var e = document.createElement('script');                  
 e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';                   
e.async = true;                   
document.getElementById('fb-root').appendChild(e);}());
// ]]></script>

Несколько альтернативных способов можно найти здесь: stackoverflow.com/questions/4194936/how-to-remove-scrollbars-from-facebook-iframe-application

Полезные размеры

  • Картинка профиля для профайла/бренда: Width: 180px, Height: 540px
  • Предоставляемая площадь для iframe с пользовательским html контентом: Width: 520px, высота неограничена
  • Аватар (картинка рядом рядом с ссылками и постами при нажатии кнопки like или share): Width: 90px, Height: 90px
  • Максимальный размер изображения для загрузки: Width: 2048px, Height: 2048px
  • Максимально видимый размер изображения для просмотра в альбоме или слайд-шоу: Width: 960px, Height: 720px
  • Картинка в объявлении: Width: 110px, Высота: 80px, Height: 5MB
  • Текст объявления: Заголовок: 25 символов, Тело: 135 символов
  • Обновление статуса: Длина: 63 206 символов
  • Обложка для Timeline: Width: 851px, Height: 315px
  • Комментарий:: нет ограничений на длину
  • Видео: Размер: 1024, Время: 20 минут

Визуальная шпаргалка по размерам:

PSD GUI KIT для Facebook Fan Pages

PS: Туториал подготовлен в рамках доклада в недрах Zfort Group

Одно мнение о Facebook Welcome Page и прочие кастомные табы

  1. отличное описание! только у меня почему таб открывается пустой:((( делала без приложения, вставляла гугл расписание, но видно что -то пропустила… подскажите пожалуйста:)

    https://www.facebook.com/craftyprague/app_332017623598159

    http://kalendar.craftyshopandstudio.cz/craftycalendar/craftycalendar.html

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *