Update: Въпреки, че с новия дизайн на фен страниците този welcome таб вече го няма, тази статия е чудесен начин да си създадете приложение плюс таб, който да се появи под заглавния cover image на Timeline фен страницата ви. Ако имате малко повече въображение ще разберете как да използвате този материал след промените по фен страниците. Успех и четете внимателно!
Предполагам, че много хора също като мен, непрофесионалисти в програмирането и писането на код, но притежаващи сайт или блог, си задават въпроса:
“Как да изградя страница във Facebook, която да приветства бъдещите ми фенове, когато FBML вече го няма?“ “Тези умения само в ръцете на добрите програмисти ли са, или и аз мога да си го направя абсолютно сам, без да има нужда да разбирам от кодиране?“
Както вече написах в един от миналите постове свързани с нововъведенията във facebook озаглавен: “Мини ръководство на новите функционалности и дизайн във Facebook“, FBML, с който си правехме таб-ове вече го няма и тук идва въпроса как да свършим същата работа при новите, по добри условия на iFrame?
Добрата новина за тези от вас, които са все още аматьори точно като мен или просто не разбират от програмиране, е че искам да направя този пост едно голямо, чудовищно обяснение, стъпка по стъпка, с текст, видео и снимки как да си направим атрактивен, приветстващ таб в нашата Facebook страница с новите стандарти на най-голямата социална мрежа.
Желанието ми е в рамките на една статия изключително подробно да ви опиша как става тая работа. Като в края на статията ще намерите на две части подробно видео-обяснение на цялата задача направено от мен.
Иска ми се този пост да бъде вашия водач, когато решите да тунинговате Фен страницата си във Facebook. Защо смятам да си направя труда ли? Ами просто защото искам да Ви направя впечатление :)
А и ми се ще след като прочетете тази статия и следвате инструкциите в нея, да се изкажете в коментарите: “Хей, всъщност благодарение на стъпките тук вече моят welcome tab, моята ландинг страница във Facebook вече съществува!“.
Е добре, готови ли сте? Да започваме! Нека първо да определим основните цели върху, които ще се спрем в статията и какви резултати искаме да постигнем:
Целите на този пост са:
- Осигуряване на известна яснота относно разликата между FBML и iFrames-да е написано с думи прости, на разбираем език за нормалните хора /ако сте програмист или специалист по онлайн маркетинг вероятно ще ви се доспи от следващите редове :)/
- Да ви помогнем стъпка по стъпка да изградите вашия Facebook ландинг таб чрез iFrame от нулата без да напишете и един ред код.
Каква е разликата между FBML И iFrames?
FBML-това е нищо друго освен регулярна HTML страница позволяваща ви да персонализирате отделни таб-ове. Това е всичко! iFrames-Това са “рамки” или прозорци вътре в уеб страница, които позволяват да се вграждат в тях външни елементи.
Или казано с други думи, можете да имате уеб сайт в друг сайт-тоест в сайта facebook можете да вградите друг уеб сайт, чийто файлове са на ваш сървър.
В нашия урок също ще хостнем един малък HTML файл на сървъра ни, който ще вържем с приложение във facebook, но за това по-надолу в статията. Ако имам някакви пропуски в обяснението, моля да ме извините-все пак статията е за аматьори :)
С iFrame буквално имате възможност да си направите уеб сайт, да го хостнете на ваш собствен сървър и след това чрез настройка и свързване с приложение във facebook да го покажете във вътрешността на вашата фейсбук фен страница.
Можете дори да направите уеб сайт вграден във facebook на базата на wordpress, като ползвате неговия опростен административен панел за още по-голямо улеснение!
Може би се чудите защо от Facebook са интегрирали iFrame?
Моята теория, е че вероятно според тях в бъдеще за световното господство в интернет няма да има нужда от отделни, независими сайтове, а целия виртуален свят ще бъде във Facebook и ние всички ще живеем там. Дали това е добре?
За нас като личности и хора вероятно не, но за интернет вложените фреймове отварят врати за всякакви неща и то доста интерактивни и ефектни.
Ако сте специалист и си поиграете с тях вероятно ще можете да имплементирате целия си блог вътре във Facebook.
Разбира се тези неща са сложни за хора непрофесионалисти като нас, но с няколко лесни стъпки и малко търпение след малко ще сте в състояние да си направите простичка и ефектна ландинг страница във вашата facebook фен страница.
Какво ще се случи със старата ви FBML страничка ако имате вече такава във фен страницата си?
От Facebook твърдят, че ще продължат да я поддържат, даже тази на lifehack.bg до вчера беше точно такава, от “старите модели“, но ни се препоръчва да ги преместим в новите, вложени рамки, което смятам и да направя!
Да създадем дизайна на нашата страница!
В началото на урока ще напуснем за малко Facebook, за да проектираме и подготвим съдържанието, което бихме искали да се показва на всички посетили за пръв път на нашата фен страница, хора които все още не са ни станали фенове, но много бихме искали.
И за да е наистина опростен този пост тук ще работим само с изображение, снимка, без да имплентираме сложни файлове, кодове, XML, флаш или нещо друго изискващо сериозни знания и умения.
Снимката, която ще използвам е съвсем нова и все още не съм я сложил на заглавния таб на фен страницата на lifehack.bg, но след тази статия вече ще сме с него/може би, когато четете това, тя вече ще е там/.
Стъпка 1: Създайте вашата снимка
Създадох тази снимка чрез Photoshop, но вие можете да използвате и други редактори на изображения, които са ви по-удобни.
Може да използвате дори и нещо като Picnik, което ще бъде напълно достатъчно като програмно обезпечение при редактирането на изображението ви.
Ако все пак решите да използвате Фотошоп, за по голяма атрактивност бих ви препоръчал да се разтърсите за готови PSD файлове/фотошопския формат/, които просто да редактирате в програмата с вашия си текст.
Аз направих точно това, тъй като нито съм художник, нито съм специалист по фотошоп, но това както се оказа не е изобщо задължително, за да се получи нещо добро като резултат.
Но имайте предвид, че дори и да вземете готов psd файл ще се изискват поне минимални познания по фотошоп. Ако ви затруднява редактирането на такива файлове, просто си намерете ефектна картинка, сложете някакъв текст отгоре и сте готови.
Важно: ширината за Facebook приложение е 760px, но в този случай размера на снимката ви трябва да бъде не по широка от 510рх.
Стъпка 2: Да качим изображението в интернет
След като изберем и редактираме изображението, което ще ни представя, ще трябва и да го хостнем в интернет.
Това може да бъде направено изключително лесно, просто като качите файла в медийната библиотека на вашия wordpress сайт, точно както съм направил и аз ако имате блог базиран на wordpress или можете да качите снимката на вашият хост през FTP.
След като направим това, ще трябва да вземем URL адреса на снимката, за да го поставяме където си поискаме. Добра идея е да тествате линка към снимката във вашия браузър, за да сте сигурни, че всичко се изобразява добре.
Стъпка 3: Да си направим HTML код за снимката или да превърнем снимката в image map
Както можете да видите от снимката, която съм направил за нашата фен страница показана отгоре, на няколко места съм поставил името на сайта.
В този смисъл може да направите само това име активен линк, който да води към уеб страницата на автора на сайта, в случая към lifehack.bg или пък отделен линк, който да води към форма за абонамент.
Това може да бъде направено чрез писане на код, но още в самото начало на статията категорично се изяснихме, че тук не сме програмисти и не можем да пишем код.
Точно за това ще ползваме безплатен, онлайн инструмент, който ще свърши тази работа вместо нас много бързо и лесно.
В случая ви препоръчвам да използвате сайта Image-Map, който не е изглежда перфектно, но пък в повечето случаи върши страхотна работа.
Та въпросния инструмент ще добави линкове в изображението ви, където си поискате като генерира за вас автоматично готовия HTML код, който ви е необходим.
Този начин е идеален за хора, непрофесионалисти. Първо защото не се изисква писане на код и второ, ако нямате големи познания във фотошоп, може да свържете в една снимка бутони водещи, както към вашия официален сайт, така и към допълнителни форми за абонамент или страницата с информация за вас само като ги отбележите.
вкарайте няколко линка в едно изображение чрез Image-Map
Това, което трябва да направите е да отидете на този адрес, да си качите снимката от десктопа, да маркирате линковете, които искате да са активни на снимката ви, избирате бутона Get your code, след което имате възможност за избор на вида на кода. Там избирате HTML Code и готовия код си го копирате в обикновен текстов редактор като notepad например.
Сега вече имате изображение, съдържащо линковете, които сте решили да вложите в него, и които ще използваме в нашата ландинг facebook страница.
Има обаче още един вариант, който можете да използвате за генериране на код още по-лесно. Ако искате цялата снимка да е един голям линк към вашия сайт или пък изобщо не искате снимката ви да води някъде, а само да ви представя, можете адски лесно да си осигурите HTML кода.
Отворете си wordpress-а ако ползвате такъв за вашия сайт, изберете да създадете нов блог пост и вкарайте в него въпросното изображение.
В опциите за редактиране на снимката добавете URL адреса, към който искате да води и променете alt текста му.
Не знам защо но променяйки alt текста на изображението на български в браузъра ми във фен страницата се изобразяват ейорглифи, така че имайте го това в предвид.
Накрая дайте текстовия си редактор в изглед HTML както може да видите от стрелката горе на снимката и просто си копирайте създадения за вас автоматично код за изображението!
И накрая както ви казах по-горе запазете кода, който генерирахте от един от двата начина, тъй като той ще ви трябва малко по-късно.
Да подготвим необходимия ни код!
Стъпка 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
И ето, че всичко работи перфектно! Мисля, че това тук до момента беше по-трудната част, тъй като не всеки умее добре да работи с FTP програма, сървъри и т.н, особено когато говорим за хора които не се занимават професионално с изработването на сайтове.
Просто внимавайте да не объркате нещо с папките, които вече са на вашето ФТП и всичко ще бъде наред. И така, по всичко изглежда, че вече сме готови да се върнем отново във Facebook..
Конфигуриране на нашето Facebook App/приложение/
Сега трябва да се върнем във Facebook и да конфигурираме/не се плашете от тази дума/ нашето първо приложение. Това е по вълнуващата част!
Стъпка 1: Дайте име на вашето приложение
Отидете на този адрес за създаване на facebook приложения и запишете името на вашето, както искате да се казва, след което изберете, че сте съгласни с условията/Аgree/ и кликнете върху “Create App”.
Стъпка 2. Настройте вашето Facebook приложение
Първото място, където ще попаднете създавайки приложение във facebook е секцията Basic Info. Тук няма много какво да се прави за целите на нашата задача, освен ако не искате да добавите favicon-а/може да го направите чрез бутона edit icon кактое показано на снимката/, лого или описание на приложението както съм го направил аз, но това не е задължително и въпреки това ако го направите ще изглежда доста по професионално.
От менюто отдолу, преминете към раздела “Web Site”. В тази секция ще добавим URL адреса. Но не забравяйте, че Facebook иска да впишете само директорията, а не целия уеб адрес на файла.
Вижте на снимката, че частта index.html не присъства в адреса, защото в противен случай ще ви изведе съобщение за грешка. Адреса трябва да изглежда по следния начин: http://www.lifehack.bg/iframe/
Веднъж вкаран в директорията iframe в нашия сървър и именуван index.html, той автоматично ще се припознае като начална страница на мини сайта ни, в който е и изображението, което направихме в началото на статията.
Това е всичко, което трябва да направим в тази секция от настройките на приложението, но не съхранявайте още всичко, а преминете към следващата секция от менюто отдолу наречена “App on Facebook”
В този раздел ще направим следното: Копираме нашата главна директория в полето “Canvas URL”, в случая това е: http://www.lifehack.bg/iframe/. Като помните, че трябва да не слагате index.html в края
Сега дайте малко по-надолу в тази секция, където ще намерите опциите за конфигуриране на “Page Tab”. Тук трябва да направим 2 неща:
- Да дадем име на Таб-а. Това е името, което ще се появи във вашата фен страница във facebook, така че го именувайте с нещо като “Добре дошли” или нещо подобно-вижте снимката.
- В полето “Tab URL” напишете “http://www.lifehack.bg/iframe/index.html”-тоест абсолютно целия адрес на уеб страницата. Това всъщност е името на вашия HTML файл, който създадохме още в началото.
Сега вече сме готови да натиснем бутона “Save Changes”. След това може да се върнете на главната страница на приложенията https://developers.facebook.com/apps където ще намерите подробни данни за вашето приложение, включващи неговите App ID и App Secret, както и опцията вдясно “Insight”, от която може да видите статистика за приложението. Всички тези данни ще ви трябват!
Но не се тревожете, тук нямаме почти никаква работа за сега! Важно е да знаете обаче, че от тази страница имате достъп до всички ваши приложения, които можете да видите вдясно, както и от данните за тях!
Следва разбира се да добавим новото приложение към наша Фейсбук фен страница, на която сме администратор, но сега, в началото на 2012 в тази връзка има някои промени, които ще споменем по-долу!
Да инсталираме нашето Facebook приложение
Както вече видяхте, ние създадохме тук активно приложение, което използва въпросния iFrame, което ще интегрираме в нашата facebook фен страница. Но както при всяко друго приложение, първо трябва да го инсталираме на нашата страница, за да работи!
Стъпка 1: Да отидем в нашата App’s Profile Page
Като натиснете бутона за запазване на настройките на приложението ще си останете в страницата за настройки на приложението, който виждате на снимката отгоре, с тази разлика, че сега там, отстрани вдясно няма да присъства вече линка към фен страницата на приложението, от която да го закачим за нашата фен страница!
А как да стане това четете нататък…
Забележка: ако отидете по-късно в страницата, където са ви приложенията, изберете това, което ще е за вашата ландинг страница, след което натиснете горе в дясно Edit Settings, за да видите този прозорец от снимката отгоре/.
View App Profile Page линка, от където добавяхме приложението към желаната от нас фен страница, на която сме администратори вече го няма.
И в тази връзка сега ще ви предложа един малък трик, чрез който да направите това закачане на приложение и фен страница бързо и лесно.
Но преди това искам да ви кажа още няколко думи, за да имате малко по подробна информация относно приложенията и за да бъде този урок за вас още по полезен.
А именно след 01.02.2012г от Фейсбук започват да премахват фен страници на приложения, които не са активни, а и въпросния линк, за който споменах по горе вече няколко пъти също го няма за новите приложения. В момента той е наличен само за старите такива.
Но когато тръгнете да създавате в момента съвсем ново приложение, нещата малко са се променили. Вече няма да се генерира автоматично фен страница на приложението, от където да го добавите към вашата си фен страница.
И все пак ако много държите да имате такава за приложението си това може да стане ръчно. Трябва само да влезете в настройките на приложението и горе, вляво от менюто с опциите му да изберете опцията Advanced, след което най-отдолу точно преди бутона за съхраняване на промените ще видите друг бутон в сив цвят с надпис Create Facebook Page /вижте снимката отдолу/
Натискайки го вие ще създадете фен страница на вашето приложение. Но което е по-важно за целта на този урок: няма да разполагате и там с бутон, чрез който да го добавите във вашата фен страница, както беше по рано/поне при мен колкото и да опитвах нямаше такъв бутон/. И ако при вас липсва, как да го направите ще ви кажа точно сега….
Първо вижте следния линк: http://www.facebook.com/dialog/pagetab?app_id=_your_app_id_&redirect_uri=_your_url_, където _your_app_id_ е вашето Facebook application ID, а _your_url_ е уеб адреса на вашето приложение.
Него може да вземете като след като създадете фен страница на приложението и влезете в нея, най-отгоре в дясно ще видите син бутон с име Go to App.
Натискате го и ще ви отведе точно в приложението, а уеб адреса на съответната страница го копирате и го замествате в линка, който ви показах отгоре на мястото на _your_url_ /копирате абсолютно целия адрес/
Например: аз създадох чисто ново приложение за целта, като още в началото в полето App Namespace го нарекох slowdownbook, просто така ми дойде.
След като влезете в Basic настройките на приложението ще видите същото поле с име App Namespace, което ще е съдържа същото име, което ви трябва.
Мисълта ми е, че ако решите да НЕ създавате фен страница на приложението и от там да вземате неговия уеб адрес може да го направите като изпишете в браузъра https://apps.facebook.com/slowdownbook/ като замествате slowdownbook с името на вашето си приложение.
И сега нашият линк, който ни трябва има следния вид: вземате от настройките на приложението неговото App ID, в моя случай това е 350102461674119 и го замествате в линка на мястото на _your_app_id_
След това вземате и уеб адреса на приложението и също го замествате в линка. Накрая получаваме следния уеб адрес който ни трябва: http://www.facebook.com/dialog/pagetab?app_id=350102461674119&redirect_uri=https://apps.facebook.com/slowdownbook/
След като го отворите този линк в браузъра си ще ви изведе страница от която да добавите приложението във фен страницата, която искате и натискате бутона Add Page Tab /вижте снимката отдолу/. Можете чрез същия линк да добавяте приложението към други ваши фен страници. Това е…
Стъпка 3: Да видим крайния резултат
Нашата чисто нова ландинг страница сега вече може да се види, натискайки вляво таб-а “Добре дошли” на фен страницата ни. Тук отдолу е и крайния резултат от нашия урок! Но това не е всичко!
Сега ще ви кажа как точно този таб да се появява пред тези от facebook потребителите ви, които все още не са ви фенове! Така че продължавайте да четете…
Стъпка 4: Как новата ни Ландинг страница да се появява първа пред потенциалните ни фенове?
За да е пълен ефекта от атрактивната ви ландинг страница и, за да привлича още повече фенове към вашата фен страница е необходимо тя да е първото нещо, което ще видят вашите все още не-фенове.
Това, което трябва да направите, за да се случи това е да отворите фен страницата си и да изберете опцията “Edit page”, която се намира горе-вдясно на страницата/снимката отдолу/
След това в различните видове настройки ще забележите опцията “Default Landing Tab”/снимката отдолу/ и от падащото меню изберете името на вашия ландинг таб, който направихме и накрая натиснете естествено “Save Changes”.
По този начин това, което първо ще видят потенциалните ви фенове е таб-а, за който беше цялата работа в тази статия!
Подробно видео-обяснение на всички стъпки в 2 части!
Част 1
Част 2
В заключение
С новите възможности на iframe във Facebook може да се изгради почти всичко, каквото си поискате.
Може би ще дойде много скоро време, в което ще трябва да мислим за влагането на цели сайтове във вътрешността на Facebook, а вече може и да започнем да мислим за мини сайтове от по 3 или 4 странички с вградена навигация.
Вероятно се питате дали има и други решения за същата задача, която направихме тук? Разбира се, има различни facebook приложения, в които трябва само да копирате кода си без да се налага да използвате секцията за Facebook разработчици и да изграждате всичко от нулата.
Недостатъка им, е че понякога те не могат да се съобразят с вашите индивидуални нужди и изисквания, макар че точно за този урок са много подходящи.
И все пак държа да отбележа, че аз съм привърженик на точно този вариант, който разгледахме тук!
В крайна сметка се получи една наистина огромна статия с много думи и още повече снимки и искрено се надявам да ви е харесала и била полезна.
И тъй като това е един по-специален пост за мен, ще ви помоля да напишете коментар ако статията ви е помогнала поне мъничко.
Най-вече ме вълнува дали сте успели благодарение на материала тук да изградите своята ефектна ландинг страница във Facebook и на какви проблеми сте се натъкнали.
Също така не се колебайте и да слагате линкове към ваши или други добри примери за качествени ландинг страници във Facebook.
На тези от вас, които са разработчици на Facebook приложения или писане на код бих се радвал ако попаднете на този пост да изразите мнението си, да критикувате и да поправяте неща, които съм сбъркал в полето за коментарите, като по този начин ще сте ни наистина много полезни. Благодаря и честита нова Facebook iFrame ландинг страница!
Забележка: Моля всички, които ще се изкушат да копират тази статия да посочат оригиналния източник, тоест lifehack.bg Благодаря
loading...
-
Вземи безплатната книга: Facebook Timeline!Въведи мейл адреса си, натисни бутона и стани част от нас:--
![Как да правите пари онлайн? [Сет Годин]](http://www.lifehack.bg/wp-content/uploads/2012/05/how-to-make-money-online-lifehack_bg-150x150.jpg "Как да правите пари онлайн? [Сет Годин]"){kind=small}
