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

Опубликовал 23 октября 2011 в рубрике Технарям

Tweet

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


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

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

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

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

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

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

Если вы только начинаете работать с фан-страницей и чтобы вам стало проще ориентироваться в данном вопросе, скажу, что фан-страница представляет собой набор вкладок. Это стандартные вкладки Стена, Информация, Фотографии, Видео и другие. Они есть всегда у каждой фан-страницы. Но вы также можете добавлять свои 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.

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

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

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

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

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

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

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

URL-адрес http

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Шаг 3. Добавляем iframe-приложение на фан-страницу

Если все поля заполнены правильно, то вы увидите вверху надпись на жёлтом фоне. Чтобы добавить приложение на фан-страницу в левой колонке нажмите ссылку «View App Profile Page» (Просмотреть профиль приложения).

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

В открывшемся профиле приложения нас интересует только 1 ссылка также в левой колонке «Добавить к моей странице«.

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

Кликайте на неё и в открывшемся окне выбирайте фан-страницу, на которую хотите добавить приложение. Я выберу фан-страницу Счастливчик, создание которой я описывал в предыдущей статье. Справа от её названия я нажимаю кнопку «Add to Page» (Добавить на Страницу). И после этого могу сразу кликать на название фан-страницы, чтобы зайти на неё и увидеть окончательный результат.

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

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

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

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

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

Более детально, как создавать фан-страницу и вкладки, как их настраивать и оформлять, вы найдёте в моём бесплатном видеокурсе «Фан-страница: запуск». Там же есть 4 бесплатных шаблона. Просто справа на блоге заполните форму подписки и на почту сразу придёт весь видеокурс.

Поделиться в социальных сетях:

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

Похожие записи:

Tags: , , , ,

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

Leave a Reply