Оформление страниц в Facebook c помощью iFrame

К содержанию



Оформление страниц в Facebook. Часть 2

Опубликовано:26 Июн 2011

Внимание! С 30 марта 2012 г. все страницы компаний и организаций на Facebook переводятся на новый дизайн профиля — Timeline. Приведенная ниже статья была написана задолго до нововведений, поэтому описанный ниже функционал может не работать на новом дизайне Фейсбук или работать неккоректно. С информацией об актуальных изменениях в дизайне профиля Facebook-страниц можно ознакомиться тут

Не так давно я писал о том, как можно оформить страницу Фейсбук с помощью приложения TabPress. Cегодня я хочу познакомить Вас с не менее интересным приложением для оформления страниц в Фейсбук – IFrame Apps.

Это приложение так же как и TabPress позволяет создать  iFrame на вашей фейсбук странице с помощью визуального редактора. IFrame Apps начало развиваться позже чем TabPress, однако уже сейчас, благодаря постоянному общению со своими пользователями, предлагает огромное количество полезных фич. Среди них – возможность интеграции веб-страницы на Facebook, оформление страницы с помощью картинок, текста и HTML, фангейтинг(отображение различного контента фанатам и не-фанатам), поддержка кириллицы, удобная админ-панель, а также возможность создания двух iFrame-страниц.

Итак, для начала необходимо перейти на страницу приложения IFrame Apps и добавить его на свою фейсбук-страницу.

Затем переходите на выбранную фейсбук страницу в режиме администраитора(Аккаунт-Использовать в режиме страницы). Слева в меню страницы должна появится новая закладка «Welcome»(название вкладки впоследствии можно изменить), кликнув на которую Вы попадете в админ-панель приложения. Тут необходимо выбрать первый слева пункт «Configure app»

Facebook проинформирует Вас, что для того, чтобы вносить изменения нужно продолжить использование Facebook в режиме профиля, а не в режиме страницы. Честно говоря, не знаю, почему они так сделали, но это особо не напрягает. Подтвердите использование в режиме профиля и двигайтесь дальше…
В появившемся визуальном редакторе Вы имеете возможность либо интегрировать веб-страницу на Facebook, просто прописав URL веб-страницы во вкладке Base URL, либо прописать свой собственный текст или HTML-код.

 

 

Оформление фейсбук страницы с помощью HTML-кода

Оформление фейсбук страницы с помощью HTML-кода

Результат оформления

Результат оформления

Если Вы хотите отображать разный контент для фанатов страницы и тех, кто еще не нажал кнопку «Мне нравится» — кликните сверху в меню закладку Fan Gate. В переводе с английского это что-то вроде «ворота для фанатов», и к использованию этой опции часто прибегают в целях увеличить количество фанатов страницы. То есть, Вы делаете какую-то полезную информацию (например, правила участия в конкурсе) доступной только для фанатов страницы. Поэтому на посадочной странице новому посетителю предлагается нажать “Like”, чтобы получить доступ к этой полезной информации.

Для того, чтобы использовать эту полезную опцию, Вам необходимо вначале включить ее зачекав «Enable fan gate». После этого нужно загрузить тот контент, который будет отображаться новым посетителям. Тут есть возможность опять –таки прописать текст или HTML-код или загрузить картинку, потому что как раз изображения зачастую используются на посадочных страницах призывая посетителей кликнуть «Мне нравится».

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

А если посетитель кликнет «Like», то его перекинет на нашу первую страничку.

Существенным плюсом IFrame Apps по сравнению с TabPress также является и то, что это приложение не оставляет на странице копирайт и прочие неугодные элементы.

Но и это еще не все. Как быть, если Вы хотите задизайнить  две полноценные закладки на Вашей фейсбук странице… Не вопрос. Тут на помощь Вам придет приложение IFrame 2 Apps, которое является братом-близнецом нашего приложения. Вы точно также устанавливаете его к себе на страницу в Facebook и действуете по описанному ранее сценарию.

На этом все. Пользуйтесь и развивайтесь.

P.S. С 1 октября 2011 года необходимым условием для всех приложений и вкладок на фейсбук стало наличие защищенного соединения https, что осуществляется с помощью сертификата SSL, который должен стоять на хостинге, где располагается приложение. Так вот, приложение Iframe, Tabpress и многие другие приложения для создания вкладок на фейсбук-страницах имеют SSL, так что эти изменения никак не отразятся на работе приложений и уже существующих вкладок.

Поделиться в соц. сетях


Понравилась статья? Подписывайтесь на обновления блога

Введите Ваш email:


  • КАК ИЗМЕНИТЬ ВЕЛКАМ????

    • Аноним

      Артем, заходите на свою страницу под админом(использовать в режиме страницы), нажимаете «Редактировать»(сверху страницы стразу под названием). Попадаете в настройки Вашей страницы. Там выбираете меню «Приложения», находите IFrame Apps и внизу под описанием приложения нажимаете изменить настройки. Появится поле, где можно прописать собственное название закладки

      • Артур

        А не подскажите, как сменить иконку?

        • К сожалению этого нельзя сделать пока что, Артур! Советую написать разработчикам пожелание, возможно, добавят функционал.

      • Burn

        Андрей, подскажите пожалуйста, можно ли сделать так, чтобы вот это Welcome было только в меню справа, а возле названия страницы отсутствовало? Спасибо.

        • Нет, Вы так не сделаете. Можно лишь только переназвать Welcome, но название все равно отобразится и справа в меню и вверху страницы

  • Olga_mkv

    Андрей, Вы меня просто спасли!!!
    Если интересно, вот результаты моих трудов:
    https://www.facebook.com/pages/Sziget-Russian-Guide/246384522054391
    Это первая моя страница на FB!

    •  Sziget! Неплохо, Ольга! Только у Вас после того как «Лайк» нажимаешь, открывается пустая страница. Используйте Fan Gate

      • Olga_mkv

        Так я вроде бы fan gate и использую…
        Я хочу, чтобы после телевизора, залайкав, пользователи видели страницу со ссылками на основные разделы. Вчера я пыталась это сделать, но у меня нормально ссылки не прописались… Я в HTML сверстала страничку: иконка и текст ссылки (ссылки вели на стену, заметки, прогноз погоды этой же страницы); все это отображается, только ссылки напрямую не работают; сначала появляется логотип facebook, а уж потом, если по нему кликнуть, попадаешь на стену/заметки/прогноз погоды… Вы с такой проблемой сталкивались?…

        • Да, я сталкивался.  Это случалось либо по причине каких-то глюков самого фейсбук, либо из-за того, что я делал что-то неправильно. Я все равно Вашу страничку не вижу после «Лайка» 🙁

          • Olga_mkv

            Да, я уезжала и
            вообще все с нее убрала.

            Сейчас я добавила ссылки —
            появилась другая фишка (посмотрите на рисунке): страница встроена в страницу.
            Чисто интуитивно я понимаю, почему так происходит, но вот как это исправить…  Мне нужны обыкновенные ссылки на разделы
            «стена», «заметки»…

          • Ну тут получается Вы просто ссылку прописали своей же фейсбук-страницы, как я понял. 
            Я видел, кстати у Вас уже там ссылки оформлены, но они действительно почему-то ведут на иконку facebook Или у Вас там урлы не прописаны? Куда ссылки должны вести?

          • Olga_mkv

            У меня там все по-простому:
            НОВОСТИ

          • Olga_mkv

            Ой…напишу русские «а», чтобы ссылка не работала:
            НОВОСТИ

  • А зачем пользоваться сторонними приложениями (реклама, доп. ссылки и всевозможные ограничения), если не сложно создать собственное iframe-приложение и прикрутить к странице? Один лишь нюанс — нужен хостинг… но это не проблема ведь. 

    • Совершенно верно.  Используют  потому, что
      1. Не нужен хостинг (для кого-то хостинг не проблема, для кого-то — проблема) Но кроме того
      2. Тут просто и доступно реализуется fan-gating(показ разных страниц фанатам и не фанатам). Для тех, кто не владеет навыками программирования, это сделать достаточно сложно
      3. Простой  визуальный редактор , т.е. можно даже не знать html, чтобы его использовать — загрузил картинку, прописал ссылку и все.Это очень удобно!

      • Olga_mkv

        Полностью согласна по всем трем пунктам! Готовые приложения для таких, как я. =)

  • Петр

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

    • Петр, это можно установить в настройках самой фейсбук-страницы. «Редактировать»-«Управление разрешениями»- «Основная вкладка»

      • Петр

        Да я пробовал, не помогает. 

        • Странно. Киньте ссылку на страницу

          • Петр

            вот_www.facebook.com/BespaloffPRINT

          • У меня открывается с Iframe.  Получается так — для тех, кто не является фанатом Вашей странички будет открываться с Iframe, для тех, кто фанат уже — со Стены. Для админов — тоже со Стены открывается. 

          • Петр

            Спасибо!

  • Khramovamarie

    Андрей, во первых спасибо за полезный материал.
    Во  

    • Khramovamarie

      Прошу прощения — во вторых:
      У меня почему-то приложение упорно работает только с одной из моих страниц. 
      1) Select a Facebook Page to set upSelect a page : 

      В этом поле разворачивается только одна страница, и то не та, из которой я вышла в «Welcome». 

      • Здравствуйте,
        Возможно я не совсем верно Вас понял, но попытаюсь ответить. 
        1. Если в выпадающем списке есть не все страницы, которые Вы администрируете, это скорее всего означает, что на тех страницах, что не отображаются в списке, уже установлено приложение iFrame
        2. Вы не можете редактировать 
        iFrame приложение используя фейсбук в режиме страницы. Для того, чтобы редактировать, необходимо вернутся в свой личный профиль
         и из него перейти по ссылке Вашей фейсбук страницы и во вкладку iFrame приложения соответственно.

        Опять таки, боюсь что мог не верно понять Ваш вопрос, если это действительно так, напишите.

      • Вот и у меня та же проблема. Как решили?

        Приложение якобы стоит на 2 страницах, а настроить можно только одну…

  • Андрей, добрый день! Не расскажите, хотя бы в общих чертах, как можно сделать страницу, подобно такой? 

    http://www.facebook.com/cocacola

    • Здравствуйте, Дмитрий! Скорее всего — это специально написанное приложение для Coca-Cola. То есть, эта страница специально версталась и кодилась и хостится где-то на удаленном сервере. А в фейсбук просто интегрирована с помощью технологии iframe(не путайте с приложением iFrame Apps, про которое идет речь в посте)
      В принципе, с помощью приложения iFrame Apps подобное тоже можно сделать, сверстать только нужно. Единственное сомнение — это тот блок где можно поменять страну.

  • Гостья :)

    Андрей, здравствуйте!
    У меня есть вопрос (глуповатый), ответьте по мере сил, пожалуйста 🙂
    Мне нужно сделать на страничке в ФБ такое же (или похожее) меню, как вконтакте (нажимаешь на «меню» — открывается кликабельная картинка  под катом). Каким образом это можно осуществить с помощью данного приложения? Картинку надо «лепить» по кусочком через html, либо сразу загрузить и как-то сделать её кликабельной?..

    • Гостья :)

      Вижу, что вы с Ольгой обсуждали этот вопрос частично, но всё равно туплю…

      • Гостья, извините, но я тоже туплю и не совсем представляю как это должно выглядеть? Если Вы хотите чтобы части картинки были пунктами меню, скорее всего да — придется «лепить» по кусочкам…Можно еще попробовать разбить рисунок на области с помощью html-карт (map), но не уверен или это сработает. 

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

        • Гостья :)

          уточняю:
          http://s017.radikal.ru/i406/1111/a1/92aa71d20540.jpg  ->вот, допустим, первый попавшийся пример. Меню под катом, открываешь — видишь картинку. Ссылки все кликабельные, переходят на внутренние страницы, созданные в группе (или на обсуждения, или в фотоальбом). Такое можно осуществить на СТРАНИЦЕ в ФБ, или придётся искать другие возможности? 
          Если делать страницу, к примеру, для одного бренда (Кока-кола, Макдак, Нокиа), то тут понятно: назвал страницу соотв-м названием и -вперед. А если у меня сообщество любителей нескольких брендов? Если это телефоны, то пусть будут Нокиа, Самсунг, Сименс, Алькател и мне надо сделать навигацию по этим моделям в группе: о каждой  из них общая информация, галерея, новинки и т.д.? Стена будет, но на ней вся информация хаотична, а я хочу её сделать карту навигационную.
          Максимум, к чему я пришла — создание такого меню через «заметки». Т.е. прописываем в base url примерно код, который ссылками ведет на заметки…в принципе — нормально, но кто же будет звглядывать в welcome? юзерам сразу будет показываться стена, а гостям это меню нафиг не надо. Можно ли сделать из страницы маленький сайтик?

          • Суть я понял. Думаю, что, к сожалению, с помощью этого приложения Вы вряд ли  сможете полноценно это реализовать. Это приложение служит для создания элементарных   посадочных страниц.

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

          • Гостья :)

            Спасибо, Андрей 🙂 Это я сегодня уже поняла. Ваша статья мне очень пригодилась, большое спасибо! Пишите ещё 🙂

  • Sasha

    THANK YOU MAN!!!

  • Александр

    А подскажите как решить проблему с появившейся полосой прокрутки? Я думал, что когда через приложение делается страница такой проблемы не должно возникать. Просто у меня страница значительно больше 800 пикселей, которые отдаются под стандартный  iframe.
    Для собственных приложений, как я нашёл в интернете, можно использовать строку яваскрипта, которая будет обновлять высоту регулярно, но тут это не работает.

    Я в приложении указал урл, по которому лежит страничка у меня на сервере. 
    Возможно это всё лишнее?  Просто мне порекомендовали использовать приложения, подобные вами описанному. 
    До этого с Фейсбуком дел я не имел (-:
    Пытаюсь делать вот что http://www.facebook.com/pages/%D0%9A%D0%A5/249259061764493?sk=app_156218351098324

    • Здравствуйте, Александр!
      Если честно, не готов ответить на Ваш вопрос в рамках этого приложения, никогда с подобным не сталкивался. Предлагаю Вам попробовать другое приложение — TABMAKER, я писал про него тут — http://marketingbuzz.info/dobavlenie-sobstvennoj-vkladki-i-kanala-youtube-k-stranice-facebook.html

      Я попробовал с помощью него залить картинку 1000px высотой, полоса прокрутки не появилась. А для iFrame там вообще можно выставлять высоту, какую Вам нужно.

      Попробуйте и расскажите, получилось ли…

      • Александр

        Огромное спасибо!
        И правда очень удобно, задал высоту, даже на 2000 никаких проблем, правда у меня будет и побольше (-:

  • Евгения

    Здравствуйте, Андрей. Спасибо большое за Ваши статьи. Подскажите, пожалуйста, как на странице компании сделать вкладки, чтобы сама иконка вкладки была в моем дизайне, а не просто иконкой по умолчанию. 
    Заранее спасибо за ответ.

    • Здравствуйте, Евгения! К сожалению, с помощью этого приложения и других, про которые я писал Вы не сможете установить свою иконку. 

  • Mail

    Подскажите, пожалуйста. Как задать прямой адрес странице (типа «adres»)?

    • Здравствуйте,
      Не совсем понимаю, что Вы имеете в виду под «прямой адрес»…Короткий URL?

      • Mail

        Да. Ну как в контакте например можно сделать vkontakte.ru/vasya   

        • Вы можете сделать это по ссылке facebook.com/username

      • Mail

        И забыл сказать огромное спасибо за пост! Но вот это приложение куда круче. Чуть не прослезился;) «Hike FREE Tab Builder» Даже не жалко заплатить за PRO версию. Взгляните.

        • Спасибо за инфо, обязательно ознакомлюсь 🙂

  • Анна

    Здравствуйте!
    Больше спасибо за статью, очень понятно и полезно.
    Только столкнулась с проблемой, что приложение «подписывается» под станицей. Еще и на французском:) Propulsé par IFrame Apps
    Можно это как-то убрать?

    еще нашла Static Iframe Tab. В общем там куча всего на эту тему. Может я не тем воспользовалась?
     

    • Анна, к сожалению, практически все подобные приложения в своих бесплатных версиях ставят свою подпись. Для того, чтобы убрать ее нужно покупать платный тариф.

      • Анна

        Static Iframe Tab тоже? или это что-то другое?

        • Знаете, Анна, я только что проверил страницы на которых у меня стоит Iframe Apps — у меня там нет подписи. Может быть Вы действительно не то приложение установили? То, о котором идет речь в статье находится по ссылке 
          http://www.facebook.com/iframe.apps

  • Nuna

    Здраствуйте.  Я добавила iframe apps, фотку поставила. все правильно. Зашла «Редактирование» — «Управление разрешением», но там Основной вкладки нет( почему?

    • Здравствуйте! Не готов Вам ответить почем так?

      Можете дать ссылку или хотя бы скрин-шот

  • Rufina

    Я вставила картинку на закладке Fan Gate. Подскажите, как сделать, чтобы картинка эта была ссылкой и вела на вкладку «Стена»?

    • Здравствуйте,
      К сожалению, в визуальном редакторе Вы добавить ссылку на картинку в этом приложении не сможете, для этого Вам нужно захостить вашу картинку где-то на стороне(например, на photobucket.com), а потом на вкладке fan gate выбрать не Picture, а Message(Text or Html) и прописать туда небольшой кусок html кода, который схематически будет иметь такой вид 
      Также, обращаю Ваше внимание, что со вчерашнего дня Facebook ввел TimeLine для страниц, с 30 марта все страницы  на Facebook будут переведены на TimeLine в обязательном порядке. К сожалению, в новых условиях использование  fan gating стает практически бессмысленным 🙁

  • AquaMarine

    Спасибо большое за статью, сделала все как у вас написано, пытаюсь вставить картинку, загружаю ее в приложение, нажимаю submit — на странице приложения картинка появляется, но на моей странице в FB она не отражается. Не знаете в чем может быть проблема. Заранее спасибо

    • Здравствуйте,
      Я так не могу Вам ничего ответить, к сожалению. Мне нужно увидеть хотя бы страничку и по возможности скрин-шоты. Можете прислать их на info@marketingbuzz.info

  • MN

    Здравствуйте. Я столкнулся с такой проблемой: я создал welcome page через другое приложение и теперь просто хочу, чтобы страница welcome была страницей по умолчанию. Эти изменения я внес в настройках страницы, и нажал сохранить. Но ничего не происходит, стена по-прежнему является главной страницей. Что делать? 

    • Здравствуйте! К сожалению, Вы уже ничего не сможете сделать. С 30 марта все страницы на Facebook в обязательном порядке будут переведены на новый дизайн TimeLine(подробнее тут — 
      http://marketingbuzz.info/facebook-timeline-dlya-stranic-kompanij-novost-xoroshaya-novost-ploxaya.html )

      В новом дизайне нет возможности настройки страницы по умолчанию, всем пользователя будет по умолчанию отображаться Хроника TimeLine. Думаю, что Facebook уже отменил возможность назначать страницу по умолчанию, но даже если я ошибаюсь с 30 марта она в любом случае будет отменена.

      В ближайшее время я подготовлю несколько материалов о том, как оформлять и продвигать Facebook-страницы в условиях Timeline

  • Екатерина

    Как поменять андрес страницы в хронике???

  • Здравствуйте,  я создал приложение iframe указал http и https  если я не авторизирован на facebook  по  http приложение работает нормально,стоит только авторизироваться, появляется на месте приложения окошко страница не найдена… подскажите пожалуйста как решить данную проблему.

    Вот адрес приложения 

    http://apps.facebook.com/aldiotex/ 

    • Здравствуйте, Вы создавали это приложение сами без помощи сторонних приложений, верно? Сервер на котором размещена страница поддерживает SSL?

  • gulzina

    Здравствуйте! Как можно скачать видео на фейсбук? Я скачала, но фейсбук удалил, пишет что нужно электронный подпись, чтобы доказать, что это именно мое видео и что не крала. Это было мое видео который состоит из моих фотографий… Помогите пожалуйста:(

    • gulzina

      а я никак не могу ставить электронную подпись на той странице где спрашивает…:(

    • Здравствуйте,

      Если честно я с таким никогда не сталкивался. Я даже не совсем понимаю, о чем речь — Вы скачивате видео с фейсбук? Откуда именно?

      • gulzina

        Спасибо за отзыв Андрей! Я с компьютера не могу на фейсбук скачать видео…:(

      • gulzina

        спасибо Андрей. вы помогли мне больше чем сами разработчики фесбук

    • К сожалению, не могу Вам помочь. Никогда не заливал видео на фейсбук напрямую. Вот нашел видеоурок http://www.youtube.com/watch?v=Qq2w5uR3k2w, может пригодится или автору вопрос задайте

      Может проще загрузить видео на YouTube, а потом ссылкой разместить…

  • Андрей

    Подскажите как сделать в профиле фэйсбука фан страницу «Лайк». Так, чтоб отображалась в блоке «Информация» снизу в разделе страницы!

  • War90

    Спасибо за статью! А можно узнать — сейчас реально на Facebook страницу каким-либо образом разместить кликабельную картинку? И если да, как это можно сделать?

  • DasTier Ohne Zukunft

    Так а приложение платное, нужно платить 19 евро в месяц, это так должно быть?