Лого vc.ru

Как сделать вкладку для Таймлайна

Как сделать вкладку для Таймлайна
Поделиться


Если вы специалист в диджитал, SMM, или кофаундер в крутом стартапе (аналогов нет!), самое время задуматься о переводе ваших страниц на Фейсбуке в режим Timeline. Вы же следите за трендами? Все популярные страницы, которые вы и сами залайкали, уже перешли и стали более лучше вовлекать свою аудиторию.

Но страницу перевести - не луки ебашить. Все старые приложения-вкладки, которые вы бесплатно создали с помощью FBML, придется заменить на новые широкие (на 810 - 520 = 290 пикселей больше), и хостить их где-то. Итого вы в минусе: стоимость домена, хостинг на год, SSL сертификат на домен (год). “И зачем я только завел эту страницу...”

Не спешите ее удалять! В этой статье вы узнаете, как сэкономить ваши инвестиции или бюджет вашего СММ агентства почти на 100$ в год и сделать вкладку-приложение (page tab) самому (разместить бесплатно). А еще вы сможете похвастаться перед друзьями-экспертами парочкой новых крутых слов: Git, Heroku, Cloud, SSL и другими. Клауд - это вам не виртуалку развернуть, или дедик на колокейшн поставить. Клауд - это тренди! Инвестор <3 Клауд. iPad 3 совместим с Клаудом.

И напоследок: рубрика Hello, World! на ЦП - это экспериментальный формат, автор - Антон Снежный. В постах будет много технических руководств How-To:, и не будет котиков. Если вы считаете, что эти знания для вас лишнее (у вас уже есть CTO или фрилансеры из глубинки), можете потратить свое время эффективнее - нажмите лайк и продолжайте серфить интернет.




Содержание




  1. Регистрация нового приложения

  2. Создание проекта в Heroku

  3. Работа с Git

  4. Загрузка промо страницы для приложения-вкладки

  5. Перенастройка приложения Facebook

  6. Добавление вкладки-приложения на вашу страницу


 

Возможно вы уже сталкивались с таким сообщением, когда переходили на вкладки страниц. Это, я “поймал”, перейдя из рекламного блока Facebook.

Вкладка приложения Facebook без поддержки SSL

Не очень-то эффективно так сливать рекламные бюджеты, ведь большинство ИТ специалистов и простых пользователей уже давно перешли к безопасному соединению через https:// (кстати, если вы еще не перешли - пора задуматься об этом). Но даже если у вашей страницы приложение-вкладка нормально открывается (как у TechCrunch), на этом ваши проблемы не заканчиваются: с марта Facebook обещает перевести все страницы в режим Timeline. Приундительное включение для всех - с 1 апреля, поспешите! Посмотрите, например, как выглядит страница Starbucks и ее вкладки - они стали шире!

Давайте уже сейчас подготовим ваши страницы к переходу на Timeline, и разместим ваши приложения-вкладки бесплатно с поддержкой https:// на Heroku.

Регистрация нового приложения



  • 1. Зайдите на страницу разработчиков Facebook и перейдите в раздел приложений
    Apps https://developers.facebook.com/apps.

  • 2. Чтобы создать новое приложение, нажмите Create New App.

  • 3. Заполните поля: название приложения App Name и короткая ссылка App Namespace и поставьте флажок Web Hosting.

  • 4. Введите капчу и нажмите продолжить Continue.


Новое приложение будет создано, вы увидите диалоговое окно Host your site with Heroku на странице редактирования настроек приложения.

Создание проекта в Heroku



  • 1. В диалоговом окне Host your site with Heroku выберите предпочитаемый вами язык программирования
    Environment: PHP, Node.js, Python или Ruby.В наших примерах мы будем использовать PHP, хотя в этой статье он нам не понадобится вовсе.

  • 2. Введите адрес почты Email Address, на которую будет зарегистрирован аккаунт в Heroku (это может быть любой ваш email).

  • 3. Создайте аккаунт - нажмите Create.


На указанный выше адрес почты придет письмо Your Facebook app on Heroku в котором первая ссылка To start editing your new app, create a password for your Heroku account нужна для завершения регистрации: ввода пароля для вашего аккаунта. В нем же есть ссылки на руководство по созданию приложений Facebook и ссылка на необходимое для работы ПО Download and install the Heroku toolbelt.

  • 4. Перейдите по первой ссылке для завершения регистрации.

  • 5. Скачайте и установите ПО.


Heroku


После того, как вы перейдете по ссылке завершения регистрации и сохраните новый пароль для аккаунта в Heroku, вы увидите созданное приложение. Чтобы правильно настроить его, нажмите General Info. Измените название Name и добавьте разработчиков Collaborators, если это необходимо.

Тут же доступна прямая ссылка на приложение Heroku URL и на git репозиторий Git Repo (о нем ниже). Пока не закрывайте это окно!

Страница настройки приложения Heroku

Работа с Git


После установки ПО Heroku toolbelt, откройте Git Bash. Вы увидите консоль без графического интерфейса - только командная строка. Не отчаивайтесь, если вы никогда не работали с консолью. Все что вам необходимо - запомнить 7 команд.
Примечание:
Для тех, кто знаком с FTP (те же папки, только с ними нужно работать на стороне сервера), но не знаком с Git, будет полезна эта бесплатная книга про git. Мы не будем рассказывать теорию про системы управления версиями и репозитории, вы все поймете сами на практике.


  • 1. Откройте консоль Git Bash.

  • 2. Подключаемся к Heroku: наберите в консоли heroku login.

  • 3. Введите ваши Email и Password от аккаунта Heroku.

  • 4. Если у вас не был создан публичный SSH ключ заранее, согласитесь с его генерацией: введите Y.


Итак, первая команда: heroku login, подключает вас к Heroku. Теперь вы должны создать отдельную папку, где будут располагаться файлы из репозитория, и куда вы сможете добавлять свои собственные файлы. Я пользуюсь Windows, и создал папку git на диске C:.

  • 5. Чтобы перейти в папку git на диске C:, наберите cd c:/git.


Как вы понимаете, команда cd нужна для того, чтобы изменить ваше текущее положение (это как открыть нужную папку). Теперь мы можем скопировать автоматически созданный репозиторий с проектом шаблонного приложения Facebook в эту папку. Для этого скопируйте на странице настроек приложения в Heroku (там где General Info) ссылку Git Repo. Моя вылядит так git@heroku.com:smmrussia.git. Этот адрес нам понадобится в следующей команде. Внимание: в консоли не работают комбинации вставки Ctrl+V, а текст вставляется с помощью кнопки Insert на клавиатуре!

  • 6. Копируем репозиторий приложения в c:/git, создавая отдельную папку smmrussia в нем:
    git clone git@heroku.com:smmrussia.git smmrussia.Если вы загружаете репозиторий с Heroku в первый раз, то скорее всего увидите три строчки: The authenticity of host... RSA key fingerprint... Are you sure... Просто наберите yes.


Работа с Git в консоли

Команда git clone копирует выбранный репозиторий в текущее расположение. После выполнения этой программы в вашей папке git будет создана новая папка smmrussia, в которой вы сможете найти все файлы проекта шаблонного приложения Facebook: папки images, javascript, stylesheets, файл index.php и другие. Пока не закрывайте Git!

Загрузка промо страницы для приложения-вкладки


Мы не будем создавать сложное приложение, а ограничимся простым статичным файлом HTML. Для приложений-вкладок на страницах старого образца максимальной шириной было 520 пикселей. Теперь же вам доступно 810 пикселей. Типичной структурой шаблона странички будет:
<html>
<head>
<title>Заголовок</title>
</head>
<body style="width: 810px; margin: 0; padding: 0; overflow: hidden;">
Контент
</body>
</html>

Вы можете создать ее в любом редакторе, включая обычный Блокнот (конечно, если вы знакомы с тегами HTML разметки). Опустим момент создания этого файла. В нашем случае это простой пример, который мы назвали promo.html.

  • 1. Откройте папку c:/git/smmrussia в Windows.

  • 2. Скопируйте в нее созданный файл promo.html.


Теперь вернемся в окно с консолью Git Bash.

  • 3. Переместимся в папку smmrussia с репозиторием, набрав в консоли cd c:/git/smmrussia.


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

  • 4. Чтобы индексировать файл promo.html, наберите в консоли git add promo.html.


Команда git add необходима как при добавлении в индекс нового файла, так и для переиндексации измененного файла. Ее необходимо набирать как после первого добавления файла, так и при каждом его изменении, которое вы собираетесь отправить на сервер Heroku. Это может показаться странным для пользователей, не знающих структуру системы управления версиями, так что просто примите это как необходимую последовательность действий (или познакомьтесь с Git ближе).
Примечание:
В любой момент времени вы можете узнать текущий статус репозитория: какие файлы появились, но не индексированы; какие индексированы, но не готовы к коммиту; какие и индексированы и готовы к коммиту. Для этого наберите в консоли git status, и смотрите вывод.

Теперь представьте, что у вас на локальном компьютере есть две папки: build и publish. В каждой из них у вас копия вашего проекта, но в первой у вас “рабочая” версия, которую вы можете изменять, а во второй - версия для публикации, которая в определенный момент времени была скопирована из рабочей для того, чтобы не допустить больше никаких случайных изменений. У вас в папке publish хранится файл, при этом вы продолжаете дорабатывать его же копию в папке build.

То же самое и с репозиторием Git, только у вас одна папка и одна версия файлов, просто в определенный момент вы делаете “снимок” файлов, который называется коммитом. Последовательность проста: вы добавляете (или создаете новый) файл в папку с проектом, после этого добавляете его в индекс; когда вы принимаете решение “переместить файл в папку publish” - вы делаете коммит; затем вы можете изменять файл, но когда будете загружать обратно на сервер - будет отправлена версия файла на время последнего коммита.

  • 5. Делаем коммит, наберите git commit -am “add promo.html”.


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

  • 6. Отправляем изменения обратно на сервер Heroku, набираем в консоли git push.


Немного подумав, изменения будут отправлены обратно на сервер. Вы можете проверить это, перейдя в браузере по Heroku URL и дописав promo.html. Наш файл расположен по https://smmrussia.herokuapp.com/promo.html

Теперь можете закрыть Git Bash, вкладку с Heroku, и перейти обратно к настройке приложения в Facebook в разделе разработчиков.

Перенастройка приложения Facebook


Так как мы поменяли имя приложения, которое изменило Heroku URL, нам необходимо изменить его во всех настройках приложения: App Domain, Website, App on Facebook, Page Tab.

  • 1. Загрузите логотип вашего приложения (наведите на него, выберите Edit) и измените иконку (edit icon).

  • 2. Измените App Domain, Website, App on Facebook в соответствии с Heroku URL и протоколом HTTP или HTTPS.

  • 3. Введите в Page Tab обе ссылки Page Tab URL и Secure Page Tab URL на файл promo.html (приведена выше, отличаются только протоколами - одной буквой s).

  • 4. Введите названия вкладки Page Tab Name.

  • 5. Установите Page Tab Width в Wide (810px), и сохраните изменения
    Save Changes.


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

Добавление приложения на страницу


Чтобы добавить свое приложение на страницу, придется еще раз вернуться к документации Facebook. Перейдите из раздела приложений Apps к документации Documentation. В разделе Advanced Topics перейдите по ссылке Dialogs. На странице диалогов в меню слева перейдите по ссылке Add Page Tab Dialog.

Нам нужен раздел Direct URL Example, в котором мы копируем ссылку из примера https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&display=popup&next=YOUR_URL заменив значения YOUR_APP_ID на App ID вашего приложения (берется в настройках) и YOUR_URL на Heroku URL.

Вставьте в новом окне браузера эту ссылку и перейдите по ней. Вы увидите диалог выбора страниц для добавления вашего приложения. Выберите желаемую страницу, которая уже переведена в режим Timeline (можете перевести ее в ручном режиме на странице https://www.facebook.com/pages/status/ нажав Turn on Preview). После выбора страницы, нажмите Add Page Tab.

Теперь все, новое приложение-вкладка добавлена к вам на страницу!

Вы можете загрузить для нее другой логотип (по умолчанию берется квадратный логотип вашего приложения). Зайдите в режим редактирования (стрелка вниз справа от вкладок, раскрывающая все вкладки), и нажав на правом верхнем углу вкладки выберите Edit Settings. Далее нажмите ссылку Change напротив Custom Tab Image. Заранее подготовьте изображение 111x74 пикселя, иначе то изображение, которое вы загрузите, будет автоматически приведено к этим максимальным размерам.

Загрузка логотипа приложения-вкладки на странице с Timeline

Если вы дочитали эту статью до конца, обязательно нажмите Like и поделитесь ей в Twitter. Говорят что у тех кто нажал, будет больше фоловеров в твиттере и фанатов на ваших страницах в Фейсбуке!

P.S. Присылайте ссылки на примеры созданных вами вкладок нам: в комментарии, на страницу в Facebook или чирикайте в Twitter ;)

Популярные статьи
Показать еще