Как создать вкладку Приветствия? (Понимание фан-страниц. Часть 4)


вкладка Приветствия фан-страницы

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

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

Мне часто задавали вопрос, какая ширина вкладки. Её ширина 520 пикселей. Это единственное ограничение, которое есть у iframe-вкладок на фан-страницах. Поэтому во вкладке можно сделать даже мини-сайт.

Так как информация внутри вкладки храниться на нашем хостинге и вставляется с помощью iframe (как и видео youtube на блоге, например), то мы можем использовать любой язык программирования, начиная от HTML, CSS, заканчивая PHP, ASP, Ruby и другими. Если для вас эти слова незнакомы, то следуя по шагам этой статьи и моим инструментам, которые я сделал, вы легко сможете создать свою красивую и эффективную вкладку Приветствия.

Маленький ликбез

Вкладки фан-страницы

Если вы только начинаете работать с фан-страницей и чтобы вам стало проще ориентироваться в данном вопросе, скажу, что фан-страница представляет собой набор вкладок. Это стандартные вкладки Стена, информация, Фотографии, Видео и другие. Они есть всегда у каждой фан-страницы. Но вы также можете добавлять свои iframe-вкладки и размещать на них любую информацию, которую захотите. Для этого надо создать своё iframe-приложение на Facebook (это просто) => добавить его на свою фан-страницу (оно отобразиться в виде вкладки) => и это приложение будет показывать информацию (которую мы должны создать и хранить на своем хостинге) через iframe. Таким образом, приложение на Facebook является связующим звеном между хостингом и iframe-вкладкой.

Шаг 0. Создаём HTML-файл и загружаем его на хостинг

Будет лучше, если мы начнём именно с создания HTML-файла на компьютере. Тогда вам станет проще разобраться в настройках приложения Facebook.

В этом примере я создам простой HTML-файл. Помните, что ширина должна быть 520 пикселей. HTML-код смотрите ниже.


<html>
 <head></head>
 <body style="margin:0px; padding:0px; overflow:hidden;">
  <div style="width:500px; background:#cccccc; padding:10px 0px 20px 20px;">
    <h2>Привет, Счастливчик!</h2>
    <p>Добро пожаловать на мою Страницу!</p>
  </div>  
 </body>
</html>

Я всегда создаю код в программе Notepad++. Она бесплатна, удобна и наглядна. Я сохраняю код всегда в кодировке UTF-8, чтобы не было кракозябров вместо текста во вкладке Facebook.

кодировка html фала

Сохраняйте файл на компьютере с именем index.html. Это самый универсальный вариант. Откроем файл в браузере, чтобы убедиться, что всё выглядит так, как надо.

Пример вкладки фан-страницы

Если всё верно, загружаем файл на хостинг. Я думаю, что вы без меня разберётесь, как это сделать. У каждого хостинг свой. Но важно, чтобы HTML-файлы, картинки, скрипты и другие файлы хранились на хостинге с защищённым соединением https! С 1 октября 2011 Facebook сделал это условие обязательным. Без https информация во вкладке отображаться не будет. Вместо этого все увидят такое предупреждающее сообщение:

Вкладка фан-страницы без https

Более подробно о https на Facebook читайте в одной из первых статей блога.

После загрузки файла index.html на мой хостинг в отдельную созданную папку «lucky», он доступен по URL-адресам, которые видны на скриншотах. Эти адреса нам потом пригодятся.

URL-адрес http

Файл для iframe-вкладки фан-страницы на хостинге
URL-адрес https

Файл имеет доступ по защищенному соединению https

Обратите внимание: если файл называется index, то его можно не прописывать в адресной строке. Так как хостинги обычно по умолчанию обращаются к файлу с таким именем в каждой папке. Так-с, наш HTML-файл на хостинге. Можем приступать к следующему шагу.

Шаг 1. Создаём своё iframe-приложение на Facebook

Если вы раньше приложений на Facebook не создавали, то вам необходимо подтвердить свой аккаунт, чтобы получить доступ к разделу разработчиков. Для этого укажите в своём профиле номер мобильного телефона. Затем перейдите по адресу https://developers.facebook.com. Подтвердите аккаунт (номер мобильного надо вводить в международном формате, например, для Украины: +380933649909). После подтверждения появится обычное всплывающее окно для разрешения доступа к Вашему аккаунту. Это необходимо для того, чтобы Ваш профиль подключить к разделу разработчиков.

Аккаунт разработчика

Затем на странице, которая открылась, справа вверху нажмите кнопку «Создать новое приложение».

Создание iframe приложения на Facebook

Появится всплывающее окно, в котором надо ввести название приложение (App Display Name). Оно может быть на русском языке, его длина максимум 50 символов. (Название приложения будет отображаться, например, в форме приглашения друзей, если вы захотите сделать такое приглашения на своей вкладке.)

Поле App Namespace — это имя приложения, которое будет отображаться в URL-адресе приложения (пример: https://apps.facebook.com/welcome-lucky). Аналогично «имя» вы тоже придумываете сами. Оно может содержать только маленькие латинские буквы, дефис и подчёркивание (максимальная длина 20 символов). Если эти оба поля заполнены правильно, то слева появляется зеленые слова «Valid» и «Available».

Ставите галочку, что согласны с условиями Facebook (I agree to the Facebook Platform Policies). Нажимаете кнопку «Продолжить».

Создание приложения на Facebook

Появится Captcha. Мы должны подтвердить, что живые люди.

Создание приложения Фейсбук

После её заполнения, если всё правильно, Facebook некоторое время думает и потом перед вами открываются базовые настройки приложения. Это значит, что оно создано успешно. У каждого приложения есть много разных настроек. В этой статье я сконцентрируюсь только на самых основных, необходимых для нормальной работы вкладки на фан-странице.

Шаг 2. Настройка приложения

Настройка приложения Фейсбук

Теперь наша задача правильно настроить приложение, чтобы информация на вашем хостинге отображалась во вкладке на фан-странице. Это всего 4 действия.

1. Загрузим иконку для вкладки с компьютера (её размер должен быть 16*16 пикселей). Просто нажмите на «edit icon».

2. Загрузим логотип приложения с компьютера (его размер должен быть 75*75 пикселей). Для этого нажмите на изображение большего размера.

иконка и лого

3. В самой нижней секции настроек нажимаете на App on Facebook. В поле Canvas URL мы вставляем URL-адрес нашего файла index.html. В поле Secure Canvas URL обязательно надо вставить URL-адрес файла index.html, который должен храниться на хостинге с безопасным соединением (https). Обращаю ваше внимание, что URL-адреса должны заканчиваться слэшами, иначе Facebook выдаст ошибку при сохранении.

Настройки iframe-приложения Facebook

4. Затем нажимаете на Page Tab и заполняете 3 поля. Первое — имя вкладки (Page Tab Name) должно быть кратким и понятным, так как оно будет отображаться на фан-странице в левой колонке вкладок. У моей вкладки будет имя «Привет!». Второе (Page Tab URL) и третье поле (Secure Page Tab URL) заполняете теми же ссылками, что и поля Canvas URL и Secure Canvas URL соответственно.

Настройки Iframe-приложения Facebook

Нажимаете кнопку «Сохранить».

[Обновление 20.12.2011] Новый способ!
Шаг 3. Добавляем iframe-приложение на фан-страницу

Готово. Приложение добавилось и всё отображается корректно.

iframe-вкладка

Шаг 4. Как сделать вкладку Приветствия по умолчанию для не фанов.

Заходим в «Редактировать страницу» — «Управление разрешениями» — «Основная вкладка» — в выпадающем списке выбираем вкладку «Привет!» — нажимаем внизу кнопку «Сохранить». Теперь всё настроено как надо. Проверьте сами :) https://www.facebook.com/pages/Счастливчик/211474278920120.

С 30 марта 2012 после перехода на Хронику вкладку по умолчанию больше сделать нельзя.

Подробнее о Хронике смотрите в моём бесплатном видеокурсе «Хроника для фан-страниц. 2012». Там же есть 4 бесплатных шаблона.

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

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