Как стъпка по стъпка да си създадете ефектен таб за вашата фен страница под формата на facebook приложение – супер подробно, илюстрирано ръководство.
Предполагам, че много хора също като мен, непрофесионалисти в програмирането и писането на код, но притежаващи сайт или блог – популяризиран чрез фен страница във Facebook, си задават въпросите:
“Как да изградя страница във Facebook, която да приветства бъдещите ми фенове, да промотира безплатните ми неща, да събира абонати, да привлича фенове? Тези умения само в ръцете на добрите програмисти ли са, или и аз мога да си го направя абсолютно сам, без да има нужда да разбирам от кодиране?“
Добрата новина за тези от вас, които са все още аматьори точно като мен или просто не разбират от програмиране, е че искам да направя този пост едно голямо, чудовищно обяснение, стъпка по стъпка, с текст и снимки как да си направим атрактивен таб в нашата Facebook фен страница с новите стандарти на най-голямата социална мрежа.
Иска ми се този пост да бъде вашия водач, когато решите да тунинговате Фен страницата си във Facebook. И защо смятам да си направя труда ли? Ами просто защото искам да Ви направя впечатление…
А и ми се ще след като прочетете тази статия и следвате инструкциите в нея, да се изкажете в коментарите:
“Хей, всъщност благодарение на стъпките тук вече моят facebook tab, моята ландинг страница във Facebook вече съществува – супер сте!”.
Е добре, готови ли сте? Да започваме!
Нека първо да определим основните цели върху, които ще се спрем в статията и какви резултати искаме да постигнем:
Бележка: Да, има приложения за Facebook, чрез които може много лесно да си направите подобен ефект за вашата фен страница. Целта тук обаче не е толкова самото приложение като такова, а методологията и стъпките как се прави. След като я разберете, вие ще може да създавате доста по-сложни таб-ове за феновете си във Facebook – разбира се на едно основно ниво.
Може би се чудите защо от Facebook са интегрирали iFrame?
[sws_divider_line]
Моята теория, е че вероятно според тях в бъдеще за световното господство в интернет няма да има нужда от отделни, независими сайтове, а целия виртуален свят ще бъде във Facebook и ние всички ще живеем там. Дали това е добре?
За нас като личности и хора вероятно не, но за интернет – вложените фреймове отварят врати за всякакви неща и то доста интерактивни и ефектни.
Ако сте специалист и си поиграете с тях вероятно ще можете да вградите почти целия си блог вътре във Facebook.
Разбира се тези неща са сложни за хора непрофесионалисти като нас, но с няколко лесни стъпки и малко търпение след малко ще сте в състояние да си направите простичка и ефектна ландинг страница във вашата facebook фен страница.
Да създадем дизайна на нашата страница!
[sws_divider_line]
В началото на урока ще напуснем за малко Facebook, за да проектираме и подготвим съдържанието, което бихме искали да се показва на всички посетили за пръв път на нашата фен страница,
…на хора които все още не са ни станали фенове, но много бихме искали.
И за да е наистина опростен този пост тук ще работим само с изображение, снимка, без да имплентираме сложни файлове, кодове, XML, CSS, флаш или нещо друго, изискващо по-сериозни знания и умения.
Снимката, която ще използвам е съвсем нова и все още не съм я сложил на заглавния таб на фен страницата на lifehack.bg, но след тази статия вече ще сме с нея.
Стъпка 1: Създайте вашата привличаща фенове снимка
Създадох тази снимка чрез Photoshop, но вие можете да използвате и други редактори на изображения, които са ви по-удобни.
Ако все пак решите да използвате Фотошоп, за по голяма атрактивност бих ви препоръчал да се разтърсите за готови PSD файлове/фотошопския формат/, които просто да редактирате в програмата с вашия си собствен текст.
Аз направих точно това, тъй като нито съм художник, нито съм специалист по фотошоп, но това както се оказа не е изобщо задължително, за да се получи нещо относително добро като резултат.
Но имайте предвид, че дори и да вземете готов psd файл ще се изискват поне минимални познания по фотошоп.
Ако ви затруднява редактирането на такива файлове, просто си намерете ефектна картинка, сложете някакъв текст отгоре и сте готови.
Важно: ширината за Facebook приложението в нашия случай е 760px.
Стъпка 2: Да качим изображението в интернет
След като изберем и редактираме изображението, което ще ни представя, ще трябва и да го хостнем в интернет.
Това може да бъде направено изключително лесно: просто като качите файла в медийната библиотека на вашия wordpress сайт, точно както съм направил и аз ако имате блог базиран на wordpress.
Или можете да качите снимката на вашият хост през FTP – идеята на цялата работа е да вземете директен линк към изображението.
След като направим това, ще трябва да вземем URL адреса на снимката, за да го поставяме където си поискаме. Добра идея е да тествате линка към снимката във вашия браузър, за да сте сигурни, че всичко се изобразява добре.
Стъпка 3: HTML код за снимката или да превърнем изображението в image map
Както можете да видите от снимката, която съм направил за нашата фен страница показана отгоре, на няколко места съм поставил името на сайта.
В този смисъл може да направите само това име активен линк, който да води към уеб страницата на автора на сайта, в случая към lifehack.bg или пък отделен линк, който да води към форма за абонамент или към каквото си поискате.
Това може да бъде направено чрез писане на код, но още в самото начало на статията категорично се изяснихме, че тук не сме програмисти и не можем да пишем код.
Точно за това ще ползваме безплатен, онлайн инструмент, който ще свърши тази работа вместо нас много бързо и лесно.
В случая ви препоръчвам да използвате сайта Image-Map, който не е изглежда перфектно, но пък в повечето случаи върши страхотна работа.
Та въпросния инструмент ще добави линкове в изображението ви, където си поискате като генерира за вас автоматично готовия HTML код, който ви е необходим за вграждане.
Този начин е идеален за хора, непрофесионалисти.
Първо, защото не се изисква писане на код и второ, ако нямате големи познания във фотошоп, може да свържете в една снимка бутони водещи, както към вашия официален сайт, така и към допълнителни форми за абонамент или страницата с информация за вас – само като ги очертаете във въпросното онлайн приложение.
Това, което трябва да направите е да отидете на този адрес и да си качите снимката от десктопа, да маркирате линковете, които искате да са активни на снимката ви.
След това избирате бутона Get your code, а накрая ще имате възможност за избор на вида на кода. Там избирате HTML Code и вече готовия такъв си го копирате в обикновен текстов редактор като notepad например.
Сега вече имате изображение, съдържащо линковете, които сте решили да вложите в него, и които ще използваме в нашият ландинг facebook таб за бизнес страницата ни в социалката.
Има обаче още един вариант, който можете да използвате за генериране на код още по-лесно. Ако искате цялата снимка да е един голям линк към вашия сайт или пък изобщо не искате снимката ви да води някъде, а само да ви представя, можете адски лесно да си осигурите HTML кода.
Отворете си wordpress-а ако ползвате такъв за вашия сайт, изберете да създадете нов блог пост и вкарайте в него въпросното изображение.
В опциите за редактиране на снимката добавете URL адреса, към който искате да води и променете alt текста му.
Накрая дайте текстовия си редактор в изглед HTML, както може да видите от стрелката горе на снимката и просто си копирайте създадения за вас автоматично код за изображението!
И накрая както ви казах по-горе – запазете кода, който генерирахте от един от двата начина, тъй като той ще ви трябва малко по-късно.
Да подготвим необходимия ни код!
[sws_divider_line]
Стъпка 1: Отворете текстов редактор
Вземете кода, който генерирахме в предната стъпка и го сложете в текстовия редактор. В зависимост кой начин за генериране на код сте избрали, дали image-maps или wordpress, той трябва да изглежда по следния начин:
Стъпка 2: Лек ремонт на кода…
Да, казах ви че няма да пишем код, и че няма да имаме нужда от каквито и да било познания по HTML. Но за две думи кодиране предполагам няма да направите голям проблем, нали?
Вашата задача и тук ще е от рода копи-пейст. Просто трябва ръчно да въведете една липсваща част от кода, без която процеса няма да работи както трябва.
Налага се да отворим и затворим въпросния HTML документ като само добавим в началото и края две думички.
Вкарайте таговете <html> и <body> в началото и в края на вашия код, точно както го виждате на снимката отдолу. Няма нищо сложно, само копи-пейст!
Ако само си гледате снимките, които съм ви подготвил по-долу няма да имате никакъв проблем или трудност!
Стъпка 3: Запазете вашия текстов документ като HTML файл!
Ще се наложи да запазим нашия текстов документ с кода в него като HTML файл и да го именуваме “index.html”.
Причината да направим това, е защото когато се върнем обратно при настройките на Facebook за нашата ландинг страница, ще бъдем попитани за URL адрес на директорията на нашия сървър където ще е и мини сайта ни от една снимка, повтарям – не за името на файла, а за името на директорията!
Именувайки файла “index.html”, Facebook ще разбере коя е директорията, от която да визуализира файла, който ще бъде все едно началната страница на нормален уеб сайт!
Стъпка 4: Качваме файла на нашия хостинг/сървър
В тази стъпка ще трябва да качим създадения в предната стъпка файл на нашия сървър. Както казах и по-горе, тук ще трябва да дадем на Facebook пътя до директорията, където ще е нашия така да се каже мини сайт.
Първо обаче ще трябва да създадем тази директория.
През FTP програмата, която ползвате за администриране на файловете на вашия уеб сайт, в папката “public_html” както виждате на снимката отгоре създайте нова папка, като я преименувате както си поискате-моята ще я кръстя “iframe”.
След това ще трябва да качим нашия “index.html” файл, който създадохме малко по-рано в новата папка, която направихме на сървъра ни.
Сега напуснете ФТП програмата и отворете вашия браузър и тествайте дали качения файл се изобразява коректно.
Както ви казах аз наименувах моята директория “iframe”, така че моят URL адрес ще изглежда по следния начин: www.lifehack.bg/iframe/index.html
[sws_divider_line]
И ето, че всичко работи перфектно!
Мисля, че това тук до момента беше по-трудната част, тъй като не всеки умее добре да работи с FTP програма, сървъри и т.н, особено когато говорим за хора които не се занимават професионално с изработването на сайтове.
И така, по всичко изглежда, че вече сме готови да се върнем отново във Facebook..
Конфигуриране на нашето Facebook App/приложение/
[sws_divider_line]Сега трябва да се върнем във Facebook и да конфигурираме/не се плашете от тази дума/ нашето първо приложение. Това е по вълнуващата част!
Стъпка 1: Дайте име на вашето приложение
Отидете на този адрес за създаване на facebook приложения и запишете името на вашето, както искате да се казва, след което изберете, че сте съгласни с условията/Аgree/ и кликнете върху “Create New App”.
Стъпка 2. Настройте вашето Facebook приложение
Първото място, където ще попаднете е секцията Basic Info.
Тук няма много какво да се прави за целите на нашата задача, освен ако не искате да добавите favicon-а/може да го направите чрез бутона edit icon/, лого или описание на приложението, но това не е задължително.
И въпреки това ако го направите ще изглежда доста по професионално.
От менюто отдолу, преминете към следващия раздел маркиран с червено на снимката. В тази секция ще добавим URL адреса, който сочи към папката в ФТП съдържаща нашето изображение.
Но не забравяйте, че Facebook иска да впишете само директорията, а не целия уеб адрес на файла. Вижте на снимката, че частта index.html не присъства в адреса, защото в противен случай ще ви изведе съобщение за грешка.
Адреса трябва да изглежда по следния начин: https://www.lifehack.bg/iframe/
Веднъж вкаран в директорията iframe в нашия сървър и именуван index.html, той автоматично ще се припознае като начална страница на мини сайта ни, в който е и изображението, което направихме в началото на статията.
Бележка: тази папка може да съдържа и цял мини сайт с най-различни опции, а да се вгради такъв по този начин никак не е сложно – принципа е същият като със снимката. Вкарвате всички файлове във въпросната папка и посочвате заглавната страница на сайта, започваща с index.html. Но това не е тема на тази статия.
Това е всичко, което трябва да направим в тази секция от настройките на приложението, но не съхранявайте още всичко, а преминете към следващата от менюто отдолу наречена “App on Facebook”
В този раздел ще направим следното: Копираме нашата главна директория в полето “Canvas URL”, в случая това е: https://www.lifehack.bg/iframe/.
Като помните, че трябва да НЕ слагате index.html в края
Сега дайте малко по-надолу в тази секция, където ще намерите опциите за конфигуриране на “Page Tab”. Тук трябва да направим 2 неща:
- Да дадем име на Таб-а. Това е името, което ще се появи във вашата фен страница във facebook, така че го именувайте с нещо като “Добре дошли” или Харесайте ни или Стани фен, абе нещо подобно – вижте снимката.
- В полето “Page Tab URL” напишете “https://www.lifehack.bg/iframe/index.html” – тоест абсолютно целия адрес на уеб страницата. Това всъщност е името на вашия HTML файл, който създадохме още в началото.
Важно: вероятно вече видяхте в двете секции полетата Secure Canvas URL и особено Secure Page Tab URL, за които до сега нищо не споменахме, разбира се нарочно. Тук е много важно да знаете, че ако вашият хостинг не поддържа криптирана връзка, тоест не сте си закупили SSL сертификат /адреса ви започва с https, а не само с http/, на много от бъдещите ви фенове няма да се изобрази приложението, в случая снимката. Това е така, защото вече почти всички потребители включиха опцията за сигурност на профилите си наречена Secure Browsing. Ако тази опция е изключена, то няма проблем приложението ви да се визуализира и без да имате такъв сертификат, но така от него няма да има смисъл, тъй като почти никой няма да го види. Лошата новина в случая е, че ако имате сайт и сериозни намерения да развивате дейност с него, ще трябва да си закупите SSL сертификат от вашия хостинг доставчик. Мога да Ви препоръчам тази услуга на моят, тъй като съм доста доволен. Но ако в момента нямате такъв сертификат и искате да тествате дали работи приложението, след като разберем как да го инсталираме по-долу, просто отидете във тази въпросна опция Settings > Account Settings > Security Settings > Security Settings и махнете отметката – снимката отгоре! В случая, за да не ви дава грешка, използвайте за тези две полета в настройките на приложението следния адрес https://glowing-mist-5789.herokuapp.com/
Сега вече сме готови да натиснем бутона “Save Changes”. След това може да се върнете на главната страница на приложенията https://developers.facebook.com/apps, където ще намерите подробни данни за вашето приложение, включващи неговите App ID и App Secret, както и опцията вдясно “Insight”, от която може да видите статистика за приложението.
Всички тези данни ще ви трябват! Но не задълбавайте в това сега, тук нямаме почти никаква работа за целите на нашето простичко приложение!
Важно е да знаете обаче, че от тази страница имате достъп до всички ваши приложения, които можете да видите вдясно, както и от данните за тях!
Следва разбира се да добавим новото Facebook приложение към наша Фейсбук фен страница, на която сме администратор, но сега, в началото на 2012 в тази връзка има някои промени, които ще споменем по-долу!
Да инсталираме нашето Facebook приложение
[sws_divider_line]
И така, създадохме активно Facebook приложение, което използва въпросния iFrame и сега трябва да го интегрираме в нашата facebook фен страница.
Както при всеки друг Facebook App и това, за да се използва, първо трябва да се инсталира на нашата страница и да се визуализира в нея!
Стъпка 1: Да отидем в нашата App’s Profile Page
Първо, уверете се, че в полето за настройка на приложението наречено Namespace, сте посочили някакво име по избор. В моя случай аз съм написал hristostoyanov.
След това отидете на този адрес, където ще видите данните, които ви трябват като ID-то например.
След това разгледайте следният линк:
https://www.facebook.com/dialog/pagetab?app_id=_your_app_id_&redirect_uri=_your_url_
Където _your_app_id_ е вашето Facebook application ID, а _your_url_ е уеб адреса на вашето приложение.
За ID-то вече е ясно как да го вземем, но сега ще ви кажа и как да разберете какъв е URL адреса на вашето чисто ново приложение: помните за полето Namespace, нали?
Адреса на вашето приложение ще е следния: https://apps.facebook.com/името от полето Namespace/ В случая, моят URL ще бъде https://apps.facebook.com/hristostoyanov/.
Вече имаме двата компонента, необходими да влезем в мястото, от където да инсталираме приложението в някоя от нашите Facebook фен страници!
Накрая получаваме следния уеб адрес който ни трябва:
https://www.facebook.com/dialog/pagetab?app_id=377705012348991&redirect_uri=https://apps.facebook.com/hristostoyanov/
След като отворите този линк в браузъра си, ще ви изведе страница от която да добавите приложението във фен страницата, която искате.
Натискате бутона Add Page Tab /вижте снимката отдолу/. Можете чрез същия линк да добавяте приложението към други ваши фен страници. Това е…
Стъпка 3: Да видим крайния резултат
Нашата чисто нова ландинг страница вече може да се види във фен страницата ни, натискайки вдясно таб-а с логото на lifehack.bg. Тук отдолу е и крайния резултат от нашия урок:
Имайте предвид, че ако нямате SSL сертификат, няма да може да видите резултата, докато не махнете отметката за сигурно сърфиране във Facebook, за която говорихме по-горе!
В заключение
[sws_divider_line]С новите възможности на iframe във Facebook може да се изгради почти всичко, каквото си поискате – сайтове, онлайн магазин, каталог, портфолио, форми за абонамент, бонуси, подаръци и т.н.
Може би ще дойде много скоро време, в което ще трябва да мислим за влагането на цели сайтове във вътрешността на Facebook, а вече може и да започнем да мислим за мини сайтове от по 3 или 4 странички с вградена навигация.
Вероятно се питате дали има и други решения за същата задача, която направихме тук?
Разбира се, има различни facebook приложения, в които трябва само да копирате кода си без да се налага да използвате секцията за Facebook разработчици и да изграждате всичко от нулата.
Недостатъка им, е че понякога те не могат да се съобразят с вашите индивидуални нужди и изисквания, макар че точно за този урок са много подходящи.
И все пак държа да отбележа, че аз съм привърженик на точно този вариант, който разгледахме тук, точно защото ако хванете принципа и методологията, ще може да правите доста по-сложни и специфични за вашата дейност неща!
В крайна сметка се получи една наистина огромна статия с много думи и още повече снимки и искрено се надявам да ви е харесала и била полезна.
И тъй като това е един по-специален пост за мен, ще ви помоля да напишете коментар ако статията ви е помогнала поне мъничко.
На тези от вас, които са разработчици на Facebook приложения или писане на код бих се радвал ако попаднете на този пост да изразите мнението си, да критикувате и да поправяте неща, които съм сбъркал в полето за коментарите, като по този начин ще сте ни наистина много полезни. Благодаря и честита нова Facebook iFrame ландинг страница!
Задължително вижте и: Създай си Facebook фен страница: тоталното, пълно ръководство + много трикове, снимки и ресурси
