+ All Categories
Home > Documents > Facebook pages guide

Facebook pages guide

Date post: 29-Mar-2016
Category:
Upload: max-nameless
View: 223 times
Download: 2 times
Share this document with a friend
Description:
Facebook pages guide
Popular Tags:
18
Гайд по созданию Facebook Welcome Page и других кастомных табов Facebook самая большая социальная сеть и один и самых посещаемых сайтов в мире. В ней можно не только постить веселые статусы и лайкать фотографии, но и использовать, как мощный маркетинговый инструмент. Все логично — миллиард пользователей, возможность таргетинга на определенную аудиторию, мгновенные объявления, ну и масса других полезных штук, которые недоступны для оффлайна. На сегодняшний день сложно найти компанию без собственной бизнес-страницы или популярную личность без фан-пейджа. В этой статье постараюсь подробно разобрать техническую сторону этого вопроса со стороны фронт-енд разработки. Речь в посте пойдет не о создании самой страницы, потому что это довольно тривиальная процедура, а о пользовательских вкладках, которые можно добавить самостоятельно и наполнить нужным контентом. Любой, даже начинающий веб-разработчик, может сделать с десяток таких табов за один вечер, зная некоторые принципы и нюансы их создания. Я имею в виду подавляющее большинство всякого рода welcome-страниц, страниц- анонсов и страниц со всяким информационным текстово-графическим контентом. На страницы посложнее с динамическими элементами, формами и прочим функционалом времени уйдет, конечно, побольше. Первое, что следует уточнить — работаем со страницей продукта, а не с личным профайлом — на личный профайл не получится добавить вкладку со своим контентом. Таким образом, добавить собственный таб можно только на странице продукта (бренда, компании, группы и т. п.). Если таковой страницы не существует, ее следует создать, пройдя по следующей ссылке: www.facebook.com/pages/create.php В создании такой страницы нет ничего сложного, поэтому этот этап я пропущу. Тем более, если клиент просит кастомизировать страницу, то она чаще всего у него уже имеется. Собственно, к делу. Создаем кастомные табы Оглавление: 1. Подготовка аккаунта
Transcript
Page 1: Facebook pages guide

Гайд по созданию Facebook Welcome Page

и других кастомных табов

Facebook — самая большая социальная сеть и один и самых посещаемых сайтов в мире. В

ней можно не только постить веселые статусы и лайкать фотографии, но и

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

пользователей, возможность таргетинга на определенную аудиторию, мгновенные

объявления, ну и масса других

полезных штук, которые недоступны для оффлайна. На сегодняшний день сложно найти

компанию без собственной бизнес-страницы или популярную личность без фан-пейджа. В

этой статье постараюсь

подробно разобрать техническую сторону этого вопроса со стороны фронт-енд

разработки.

Речь в посте пойдет не о создании самой страницы, потому что это довольно тривиальная

процедура, а о пользовательских вкладках, которые можно добавить самостоятельно и

наполнить нужным контентом.

Любой, даже начинающий веб-разработчик, может сделать с десяток таких табов за один

вечер, зная некоторые принципы и нюансы их создания.

Я имею в виду подавляющее большинство всякого рода welcome-страниц, страниц-

анонсов и страниц со всяким информационным текстово-графическим контентом. На

страницы посложнее с динамическими элементами, формами и прочим функционалом

времени уйдет, конечно, побольше.

Первое, что следует уточнить — работаем со страницей продукта, а не с личным

профайлом — на личный профайл не получится добавить вкладку со своим контентом.

Таким образом, добавить собственный таб можно только на странице продукта (бренда,

компании, группы и т. п.). Если таковой страницы не существует, ее следует создать,

пройдя по следующей ссылке:

www.facebook.com/pages/create.php

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

более, если клиент просит кастомизировать страницу, то она чаще всего у него уже

имеется.

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

Создаем кастомные табы

Оглавление:

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

Page 2: Facebook pages guide

2. Способ номер один: создаем свое приложение с помощью инструментов

разработки

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

4. Установка и настройка приложения Static HTML: iframe tabs

5. Установка и настройка приложения Static Iframe Tab

6. Основные шаги при создании таба. Вариант 1 — создание собственного

приложения

7. Основные шаги при создании. Вариант 2 — сторонние приложения

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

Сделать кастомный таб можно двумя основными способами: либо создав собственное

приложение с помощью средств фб-разработчика, либо воспользовавшись сторонним

приложением. Выбирать способ следует исходя из ТЗ и выделенного на разработку

времени. Плюсы и минусы каждого из способов будут рассмотрены ниже, выводы по

этому поводу — в конце.

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

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

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

developers.facebook.com/apps

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

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

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

будет совершить несколько дополнительных шагов:

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

подтвердить пароль, а также потребуется верификация аккаунта.

Сделать это можно либо отправкой на ваш номер мобильного смс с подтверждающим

кодом, либо введя номер банковской карты. Смс обычно приходит в течении одной

минуты.

Page 3: Facebook pages guide

Способ номер один: создаем свое приложение с помощью инструментов разработки

Сразу после нажатия «Create New App» появится окно, в котором предлагается ввести

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

Поле App Namespace можно оставить пустым (нужно для полноценных фейсбук-

приложений, использующих Open-Graph и canvas-страницы). После продолжения нужно

будет ввести капчу.

После сабмита видим основные настройки нашего приложения. Здесь можно загрузить

иконку, задать имя, выбрать категорию приложения и задать прочие основные

настройки. Однако, все эти манипуляции можно отложить на будущее и вернуться к ним

позже. Внизу страницы следует выбрать метод, с помощью которого наше приложение

будет интегрировано в фейсбук.

Page 4: Facebook pages guide

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

Tab».

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

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

сервера.

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

обязательным требованием фейсбука с октября 2011, поэтому обязательно, чтобы

нужный вам url был доступен по протоколу https

Page 5: Facebook pages guide

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

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

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

страницу.

Как добавить App / Custom Tab на страницу Facebook

1. Заходим на developers.facebook.com/apps/ и выбираем нужное нам приложение.

Здесь интерес представляет поле App ID/API Key:

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

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 и в появившемся окне выбираем страницу, на которую хотим добавить

таб:

Page 6: Facebook pages guide

4. Кликаем на «Add Page Tab» и если все произошло успешно, оказываемся на

странице, указанной в YOUR_URL. Возвратившись на страницу продукта

www.facebook.com/pages/your_url можно будет увидеть добавленный нами таб в

самом низу списка уже существующих табов. Нажав «EDIT» под ними можно

изменить позицию нашего таба. Однако, поднять его выше «Wall» и «Info» не

получится (актуально до введения timeline).

Главное преимущество собственного приложения — контроль множества его

параметров. Зайдя в свойства приложения, можно провести их тонкую настройку. Ранее,

его дополнительным преимуществом перед решениями от сторонних приложений была

возможность установки собственной иконки таба, однако с приходом timeline дизайн

табов изменился, и теперь установка персонального изображения таба не представляет

проблем.

К минусам можно отнести более долгое время создания, по сравнению со вторым

способом, а также сложность создания так называемого fan-gate. Вы скорее всего видели

такое кучу раз на разных страницах — когда предлагается нажать Like для того, чтобы

увидеть какой-нибудь скрытый контент.

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

На данный момент существует огромное количество бесплатных приложений, которые

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

Достаточно ввести в строке поиска фейсбука запрос «static html» и в результатах можно

будет увидеть наиболее популярные приложения:

Page 7: Facebook pages guide

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

html iframes.

Рассмотрим наиболее популярное приложение Static HTML: iframe tabs. Количество

активных пользователей говорит само за себя.

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

образом:

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

добавить таб:

Page 8: Facebook pages guide

После произведенных манипуляций в левой части нашей страницы среди прочих табов

появится новый таб «Welcome». Отличительная черта приложения Static HTML — иконка

белой звезды на сером фоне.

Табы в старом варианте:

Табы в Timeline:

Перейдем к непосредственной настройке таба. Для начала изменим его название. В старой

версии страниц фейсбука для этого нужно было перейти к списку всех уже установленных

приложений. Делалось это нажатием «Edit Page» на первых трех дефолтных табах (Get

Started, Wall, Info).

В Timeline владельцы страницы над основным контентом видят администраторскую

панель:

Page 9: Facebook pages guide

С нее и следует переходить в режим редактирования свойств страницы:

Далее выбираем нужное нам приложение и нажимаем «Edit Settings». В появившемся

поп-апе можем либо изменить его имя, либо удалить этот таб.

Page 10: Facebook pages guide

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

списке табов. Если пользователь залогинен под администраторским аккаунтом, он увидит

страницу с настройками. Все остальные выбирая этот таб будут видеть непосредственно

его контент.

Page 11: Facebook pages guide

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

преимуществ.

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

помощью iframe.

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

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

только тем, кто залайкал страницу.

Page 12: Facebook pages guide

Когда-то главным недостатком данного приложения была невозможность смены иконки.

Однако, в конце 2011го разработчики добавили такую возможность, а с приходом

интерфейса Timeline в этом отпала необходимость — в новом режиме для пользователей

больше не составляет труда задать свое изображение.

При нажатии на кнопку «magic *», можно увидеть несколько приятных плюшек, в

частности возможность настроить google analytics и принудительно спрятать скролбар.

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

Page 13: Facebook pages guide

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

static iframe tab обладает более широким набором настроек контента таба. Уже при

добавлении на страницу,

пользователь видит небольшой визард, где можно сразу же добавить изображение для

профайла, заполнить поле «About» и задать уникальное название для ссылки на вашу

страницу

Page 14: Facebook pages guide

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

Page 15: Facebook pages guide

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

Анализ дизайна на предмет сложности, динамического контента, кастомной

иконки, форм и пр.

Верстка статического контента.

Загрузка файлов на внешний сервер.

Убедиться, что файлы доступны по https (SSL-защита является обязательным

требованием фейсбука с октября 2011).

Создание фейсбук-приложения, в настройках которого указывается ссылка на

готовую верстку.

Добавление этого приложения на страницу продукта в качестве таба.

Изменение названия таба.

Profit!

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

полный контроль приложения и его персонизация (настройки приватности, смена

иконки, мультиязычность и пр.);

отсутствие возможных ссылок на сторонние приложения, повышенная

безопасность;

стабильность работы зависит только от сервера, на котором находится верстка.

Минусы:

сложность с настройкой «Fan-Gate»;

создание своего приложения чуть дольше, чем подключение стороннего;

необходимость использовать SSL.

Основные шаги при создании. Вариант 2 — сторонние приложения

Шаги 1-2 из первого варианта (анализируем, верстаем).

Выбор наиболее подходящего приложения.

Установка приложения на страницу продукта.

Настройка приложения (указание ссылки на верстку, название таба, настройка

«fan-gate» по необходимости)

Profit!

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

относительно высокая скорость получения требуемого результата;

легкость настройки «fan-gate» и ему подобных вариантов доступа к контенту;

Page 16: Facebook pages guide

обычно легкая настройка и правка контента даже для клиента;

не требуется доступ по https.

Минусы:

ссылки на сайт разработчика приложения и всевозможные надписи типа «powered

by ...»;

нет уверенности в стабильной работе как самого приложения и его сервера, так и в

том, что при очередном глобальном апдейте фейсбука оно не перестанет работать.

Например, так:

Резюмируя, можно сказать, что вариант с подключением стороннего приложения более

прост в настройке и существенно выигрывает по времени создания у собственного

приложения. Дополнительным жирным плюсом будет простота создания фан-гейтов.

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

на сайты создателей этого приложения во многих из них, а также зависимость от этих

самих разработчиков и их серверов. Не смотря на то, что у того же Static HTML iframe tabs

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

на некоторое время из-за проблем на их серверах. Однако, это мало кого смущает, в

результате чего Static HTML можно видеть на страницах, у которых огромное количество

подписчиков, при чем довольно часто они даже не заморачиваются по поводу смены

стандартной иконки приложения на свою.

Несколько примеров популярных страниц, где активно используются кастомные вкладки:

Старый вариант:

Page 17: Facebook pages guide

Как можно увидеть, эти страницы еще не перешли на новый интерфейс Хроника

(Timeline), который будет принудительно введен 30-го марта

Новый Timeline:

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

Page 18: Facebook pages guide

Картинка профиля для профайла/бренда: Width: 180px, Height: 540px

Предоставляемая площадь для iframe с пользовательским html контентом:

max-width: 520px (старый вариант), 810px (timeline), высота неограничена

Аватар (картинка рядом рядом с ссылками и постами при нажатии кнопки 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 минут


Recommended