Facebook приложение: вижте как да го направите – принципи и методология [с пример за начинаещи]

Facebook приложение: вижте как да го направите - принципи и методология

Как стъпка по стъпка да си създадете ефектен таб за вашата фен страница под формата на facebook приложение – супер подробно, илюстрирано ръководство.

Предполагам, че много хора също като мен, непрофесионалисти в програмирането и писането на код, но притежаващи сайт или блог – популяризиран чрез фен страница във Facebook, си задават въпросите:

Как да изградя страница във Facebook, която да приветства бъдещите ми фенове, да промотира безплатните ми неща, да събира абонати, да привлича фенове? Тези умения само в ръцете на добрите програмисти ли са, или и аз мога да си го направя абсолютно сам, без да има нужда да разбирам от кодиране?

Добрата новина за тези от вас, които са все още аматьори точно като мен или просто не разбират от програмиране, е че искам да направя този пост едно голямо, чудовищно обяснение, стъпка по стъпка, с текст и снимки как да си направим атрактивен таб в нашата Facebook фен страница с новите стандарти на най-голямата социална мрежа.

Иска ми се този пост да бъде вашия водач, когато решите да тунинговате Фен страницата си във Facebook. И защо смятам да си направя труда ли? Ами просто защото искам да Ви направя впечатление…

А и ми се ще след като прочетете тази статия и следвате инструкциите в нея, да се изкажете в коментарите:

„Хей, всъщност благодарение на стъпките тук вече моят facebook tab, моята ландинг страница във Facebook вече съществува – супер сте!“.

Е добре, готови ли сте? Да започваме!

Нека първо да определим основните цели върху, които ще се спрем в статията и какви резултати искаме да постигнем:

Бележка: Да, има приложения за Facebook, чрез които може много лесно да си направите подобен ефект за вашата фен страница. Целта тук обаче не е толкова самото приложение като такова, а методологията и стъпките как се прави. След като я разберете, вие ще може да създавате доста по-сложни таб-ове за феновете си във Facebook – разбира се на едно основно ниво. 

Може би се чудите защо от Facebook са интегрирали iFrame?

Моята теория, е че вероятно според тях в бъдеще за световното господство в интернет няма да има нужда от отделни, независими сайтове, а целия виртуален свят ще бъде във Facebook и ние всички ще живеем там. Дали това е добре?

За нас като личности и хора вероятно не, но за интернет – вложените фреймове отварят врати за всякакви неща и то доста интерактивни и ефектни.

Ако сте специалист и си поиграете с тях вероятно ще можете да вградите почти целия си блог вътре във Facebook.

Разбира се тези неща са сложни за хора непрофесионалисти като нас, но с няколко лесни стъпки и малко търпение след малко ще сте в състояние да си направите простичка и ефектна ландинг страница във вашата facebook фен страница.

Да създадем дизайна на нашата страница!

В началото на урока ще напуснем за малко Facebook, за да проектираме и подготвим съдържанието, което бихме искали да се показва на всички посетили за пръв път на нашата фен страница,

…на хора които все още не са ни станали фенове, но много бихме искали.

И за да е наистина опростен този пост тук ще работим само с изображение, снимка, без да имплентираме сложни файлове, кодове, XML, CSS, флаш или нещо друго, изискващо по-сериозни знания и умения.

Снимката, която ще използвам е съвсем нова и все още не съм я сложил на заглавния таб на фен страницата на lifehack.bg, но след тази статия вече ще сме с нея.

Стъпка 1: Създайте вашата привличаща фенове снимка

Създадох тази снимка чрез Photoshop, но вие можете да използвате и други редактори на изображения, които са ви по-удобни.

facebook-landing-tab

Ако все пак решите да използвате Фотошоп, за по голяма атрактивност бих ви препоръчал да се разтърсите за готови PSD файлове/фотошопския формат/, които просто да редактирате в програмата с вашия си собствен текст.

Аз направих точно това, тъй като нито съм художник, нито съм специалист по фотошоп, но това както се оказа не е изобщо задължително, за да се получи нещо относително добро като резултат.

Но имайте предвид, че дори и да вземете готов psd файл ще се изискват поне минимални познания по фотошоп.

Ако ви затруднява редактирането на такива файлове, просто си намерете ефектна картинка, сложете някакъв текст отгоре и сте готови.

Важно: ширината за Facebook приложението в нашия случай е 760px.

Стъпка 2: Да качим изображението в интернет

След като изберем и редактираме изображението, което ще ни представя, ще трябва и да го хостнем в интернет.

Това може да бъде направено изключително лесно: просто като качите файла в медийната библиотека на вашия wordpress сайт, точно както съм направил и аз ако имате блог базиран на wordpress.

Или можете да качите снимката на вашият хост през FTP – идеята на цялата работа е да вземете директен линк към изображението.

Да качим изображение чрез wordpress

След като направим това, ще трябва да вземем URL адреса на снимката, за да го поставяме където си поискаме. Добра идея е да тествате линка към снимката във вашия браузър, за да сте сигурни, че всичко се изобразява добре.

Стъпка 3: HTML код за снимката или да превърнем изображението в image map

Както можете да видите от снимката, която съм направил за нашата фен страница показана отгоре, на няколко места съм поставил името на сайта.

В този смисъл може да направите само това име активен линк, който да води към уеб страницата на автора на сайта, в случая към lifehack.bg или пък отделен линк, който да води към форма за абонамент или към каквото си поискате.

Това може да бъде направено чрез писане на код, но още в самото начало на статията категорично се изяснихме, че тук не сме програмисти и не можем да пишем код.

Точно за това ще ползваме безплатен, онлайн инструмент, който ще свърши тази работа вместо нас много бързо и лесно.

В случая ви препоръчвам да използвате сайта  Image-Map, който не е изглежда перфектно, но пък в повечето случаи върши страхотна работа.

Та въпросния инструмент ще добави линкове в изображението ви, където си поискате като генерира за вас автоматично готовия HTML код, който ви е необходим за вграждане.

Този начин е идеален за хора, непрофесионалисти.

Първо, защото не се изисква писане на код и второ, ако нямате големи познания във фотошоп, може да свържете в една снимка бутони водещи, както към вашия официален сайт, така и към допълнителни форми за абонамент или страницата с информация за вас – само като ги очертаете във въпросното онлайн приложение.

вкарване на няколко линка в едно изображение чрез Image-Map
вкарайте няколко линка в едно изображение чрез Image-Map

Това, което трябва да направите е да отидете на този адрес и да си качите снимката от десктопа, да маркирате линковете, които искате да са активни на снимката ви.

След това избирате бутона Get your code, а накрая ще имате възможност за избор на вида на кода. Там избирате HTML Code и вече готовия такъв си го копирате в обикновен текстов редактор като notepad например.

Сега вече имате изображение, съдържащо линковете, които сте решили да вложите в него, и които ще използваме в нашият ландинг facebook таб за бизнес страницата ни в социалката.

Има обаче още един вариант, който можете да използвате за генериране на код още по-лесно. Ако искате цялата снимка да е един голям линк към вашия сайт или пък изобщо не искате снимката ви да води някъде, а само да ви представя, можете адски лесно да си осигурите HTML кода.

facebook

Отворете си wordpress-а ако ползвате такъв за вашия сайт, изберете да създадете нов блог пост и вкарайте в него въпросното изображение.

В опциите за редактиране на снимката добавете URL адреса, към който искате да води и променете 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

Untitled-8

И ето, че всичко работи перфектно!

Мисля, че това тук до момента беше по-трудната част, тъй като не всеки умее добре да работи с FTP програма, сървъри и т.н, особено когато говорим за хора които не се занимават професионално с изработването на сайтове.

И така, по всичко изглежда, че вече сме готови да се върнем отново във Facebook..

Конфигуриране на нашето Facebook App/приложение/

Сега трябва да се върнем във Facebook и да конфигурираме/не се плашете от тази дума/ нашето първо приложение. Това е по вълнуващата част!

facebook-app

Стъпка 1: Дайте име на вашето приложение

Отидете на този адрес за създаване на facebook приложения и запишете името на вашето, както искате да се казва, след което изберете, че сте съгласни с условията/Аgree/ и кликнете върху “Create New App”.

Untitled-7

Стъпка 2. Настройте вашето Facebook приложение

Първото място, където ще попаднете е секцията Basic Info.

Тук няма много какво да се прави за целите на нашата задача, освен ако не искате да добавите favicon-а/може да го направите чрез бутона edit icon/, лого или описание на приложението, но това не е задължително.

И въпреки това ако го направите ще изглежда доста по професионално.

Untitled-10

От менюто отдолу, преминете към следващия раздел маркиран с червено на снимката. В тази секция ще добавим 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 файл, който създадохме още в началото.

Security Settings

Важно: вероятно вече видяхте в двете секции полетата 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 приложение

И така, създадохме активно Facebook приложение, което използва въпросния iFrame и сега трябва да го интегрираме в нашата facebook фен страница.

Както при всеки друг Facebook App и това, за да се използва, първо трябва да се инсталира на нашата страница и да се визуализира в нея!

Стъпка 1: Да отидем в нашата App’s Profile Page

Първо, уверете се, че в полето за настройка на приложението наречено Namespace, сте посочили някакво име по избор. В моя случай аз съм написал hristostoyanov.

След това отидете на този адрес, където ще видите данните, които ви трябват като ID-то например.

Untitled-12

След това разгледайте следният линк:

http://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, нали?

Адреса на вашето приложение ще е следния: http://apps.facebook.com/името от полето Namespace/ В случая, моят URL ще бъде http://apps.facebook.com/hristostoyanov/.

Вече имаме двата компонента, необходими да влезем в мястото, от където да инсталираме приложението в някоя от нашите Facebook фен страници!

Накрая получаваме следния уеб адрес който ни трябва:

http://www.facebook.com/dialog/pagetab?app_id=377705012348991&redirect_uri=http://apps.facebook.com/hristostoyanov/

След като отворите този линк в браузъра си, ще ви изведе страница от която да добавите приложението във фен страницата, която искате.

Натискате бутона Add Page Tab /вижте снимката отдолу/. Можете чрез същия линк да добавяте приложението към други ваши фен страници. Това е…

facebook-app

Стъпка 3: Да видим крайния резултат

Нашата чисто нова ландинг страница вече може да се види във фен страницата ни, натискайки вдясно таб-а с логото на lifehack.bg. Тук отдолу е и крайния резултат от нашия урок:

lifehack-fan-page

Untitled-9

Имайте предвид, че ако нямате SSL сертификат, няма да може да видите резултата, докато не махнете отметката за сигурно сърфиране във Facebook, за която говорихме по-горе!

В заключение

С новите възможности на iframe във Facebook може да се изгради почти всичко, каквото си поискате – сайтове, онлайн магазин, каталог, портфолио, форми за абонамент, бонуси, подаръци и т.н.

Може би ще дойде много скоро време, в което ще трябва да мислим за влагането на цели сайтове във вътрешността на Facebook, а вече може и да започнем да мислим за мини сайтове от по 3 или 4 странички с вградена навигация.

Вероятно се питате дали има и други решения за същата задача, която направихме тук?

Разбира се, има различни facebook приложения, в които трябва само да копирате кода си без да се налага да използвате секцията за Facebook разработчици и да изграждате всичко от нулата.

Недостатъка им, е че понякога те не могат да се съобразят с вашите индивидуални нужди и изисквания, макар че точно за този урок са много подходящи.

И все пак държа да отбележа, че аз съм привърженик на точно този вариант, който разгледахме тук, точно защото ако хванете принципа и методологията, ще може да правите доста по-сложни и специфични за вашата дейност неща!

В крайна сметка се получи една наистина огромна статия с много думи и още повече снимки и искрено се надявам да ви е харесала и била полезна.

И тъй като това е един по-специален пост за мен, ще ви помоля да напишете коментар ако статията ви е помогнала поне мъничко.

На тези от вас, които са разработчици на Facebook приложения или писане на код бих се радвал ако попаднете на този пост да изразите мнението си, да критикувате и да поправяте неща, които съм сбъркал в полето за коментарите, като по този начин ще сте ни наистина много полезни. Благодаря и честита нова Facebook iFrame ландинг страница!

Задължително вижте и: Създай си Facebook фен страница: тоталното, пълно ръководство + много трикове, снимки и ресурси

  • 4
  •  
  •  
  • Здравейте, бих искала да ви попитам за цени, за самите игри? Нямам представа, дали се заплащат?

  • Аз не мога да се оправя с FTPпрограмата.Стигам до там и край.Всъщност искам ,когато някой влиза във фен-страницата ми да трябва първо да я хареса ис лед това да може да публикува,коментира и т.н.

  • аз не мога да се оправя с FTP програмата.Стигам до там и край.Всъщност искам да направя така,че когато влиза някой във фен-страницата ми да трябва първо да я хареса и после да може да публикува,коментира и т.н.

  • Хубави съвети ,но имам една неяснота със стъпка 4 мога ли да кача въпросния html файл в блога ми използвам платформата blogger . Изобщо възможно ли е или трябва да имам собствен сайт ?

    • нямам опит с blogger, а и определено не го препоръчвам. Той рано или късно ще бъде затворен от Google, но и в момемнта, който има сайт няма почти никакъв контрол над него. препоръчвам собствен хостинг, всичко останало не звучи сериозно

  • Урокът е супер, само че вече страниците са по друг начин и нещо не мога да намеря .. как да направя дадения таб/приложения … като Главна страница 🙁

  • Разбирам ,че е нужно да има предварително създадена някаква страничка във facebook…извинявай ,но не разбирам цялата идея и смисъла на всичко това,от мен примерно искат да създам фейс проложение,което да има линк към сайт…и се интересуват колко и кой е посещавал въпросния сайт от това приложение…напълно се обърках с тоя фейс…възможно ли е изобщо нещо такова…както те го наричат:“Facebook – Social Sharing Tool “

    Благодаря предварително

  • Страхотна статия! Поздравления за отделеното време. Статията е много, много полезна.

    Благодаря!

  • Не зная защо, не успях да се справя.
    Стигнах до съобщение:
    Firefox не може да установи връзка с
    Утре пак ще се боря.

    • Здравей, имай предвид, че вече при приложенията се изисква да има хоста, който ползваш криптирана връзка от типа https, а не само http. при повечето хостинг компании тази услуга е платена. и вероятно затова не ти се получава

  • „предполагам че знаеш че може и с приложение, даже мисля някои от следващите статии в категорията фейсбук да са как става с приложение, която ще е доста по кратичка, там е само копи-пейст, но този вариант някак си ми допада повече :)“

    Това ще бъде чудесно! Чакам, чакам 😉

    • Здравей, да, още преди да направя тази статия знаех, че има мн по-бърз начин, но този, който съм представил дава много по-голяма гъвкавост и възможности за този, който се сети как да се възползва.

      Все се каня да направя и статия с приложение, където наистина става лесно, но дано остане време. Има доста добри за целта

      Поздрави 🙂

  • Актуална е статията за създаване на приложение и за новия изглед на фен страниците, но пък не мога да видя опцията за смяна на името?!

  • Ако смениш последната дума от УРЛ на „smotnqci“ – „how-to-make-facebook-iframe-landing-page-for-idiots“ ще добавя блога ти в „Любими“ 🙂

  • Вили махни отметката, която съм ти показал на снимката

    яао

    Това е използването на сертификат за поверителност и ако потребителя го е активирал също, като отвори ландинг страницата ще му излезе това.

    Решението да се хостне файла с кода и снимката на хостинг план, който има и опция за SSL, която обаче се заплаща допълнително към хостинг доставчика

    Поздрави

  • Като стигна до save changes всичко е точно, но в „Basic“ настройките, под „Related links“ не ми излиза „view app profile page“.
    Малко помощ. Мерси предварително!

    • сега видях как е при мен и ти прилагам снимка на приложението ми от преди секунди, където се вижда, че линка, който липсва при теб, при мен го има и честно казано нямам идея защо при теб липсва, след като нищо не се пипа, за да изчезне

      фейсбук приложение

    • трудно някой би могъл да ти помогне така дистанционно без да вижда какво правиш, поне на мен ми е!

  • много добро предложение Георги, особено с това „хората да се потрудят малко“ 🙂 дори и написано, сложени и картинки, пак се задават въпроси, на които вече има отговор в статията!

  • а като прикача картинката да кажем в imageshack , трябва ли да променят нещо по кода ? А този public_html i index.html къде трябва да ги прикача ?

    • трябва да промениш само линка към картинката, който ти генерира въпросния сайт за снимки, на останалите ти въпроси съм го обяснил повече от подробно 😉

  • аа като нямам собствен сайт , мога ли да кача файловете на друго място?

  • Добър ден,
    Следвах всички стъпки в ръководството относно качването на съдържанието във facebook, но все ми излиза 405 „Not Allowed“. Пробвах различни решения от инернет като вместо .html да се качи .aspx файл, но нищо не ми се получава. Индексът и снимките са качени във free.bg, да не би да е нещо от хостинга?
    Мерси предварително.

    • Здравейте, по-подробно просто не се сещам как да го опиша. И ако следвате точно както съм го написал не би трябвало да имате проблем. Относно хостигна, урока съм го правил с платен хост, не със безплатен, макар че това не трябва да е пречка. Според мен проблема е някъде другаде!

  • статията е номер едно, следвайки стъпа по стъпка направих страхотна landing page. Искам само да ви съветвам да промените скриновете, защото фейбук смени интерфейса, а статията ви все още е така актуална и полезна. Благодаря.

    • YuRiX мн се радвам, че ти е помогнала статията. Относно снимките с тия непрекъснати промени, които правят във Фейсбук едва ли ще мога постоянно да сменям снимките. Логиката е същата и ако се следи добре и с тези шотове ще се оправи човек 🙂

  • Ееее мерси много точно такава статия търсих и не бях очаквал да намеря толкова подробно обяснение. Мерси много! 😉

  • Здравей! Първо да те похваля за изчерпателната статия, никъде не може да се намери подобна на български език.
    Аз имам следния проблем- всичко го правя стъпка по стъпка, но нямам сървър на който да кача index.html файла. Правя Фейсбук страница на една фирма, чийто сайт не го поддържам аз и нямам достъп до административният панел, съответно нямам и FTP програма (даже не знам какво значи). Въпроса ми е има ли някакъв алтернативен начин за извършване на тази стъпка.
    Благодаря ти предварително !

    • Благодаря за бързият отговор, но пак имам проблем. Пробвах с първата програма – копирах генерирания код от сайта Image-map (не е просто изображение, исках да сложа и хипервръзка), но ми излиза грешка от сорта на ‘border’ is not an allowed HTML attribute; ‘usemap’ is not an allowed HTML attribute… Сложих и и пак не става. Къде бъркам?

  • Здравей отново.
    Сега като отида в app приложението да видя отново дали всичко е наред, виждам, че в полето tab url не ми стои, както написах, index.html, а се е преименувало на целия адрес – името на сайта, iframe, index.html. Направо не знам – цял ден се мъчих:(

  • Здравей, цял ден се трудя, уж следвах стъпка по стъпка и в края не ми се получи. Направила съм си таб с добре дошли, на като го натисна ми излиза съобщение 405 not allowed. Къде може да съм сбъркала? Благодаря ти

    • така, както ми го обясняш предполагам, че проблема е във файла index.php или не е качен на правилното място в ФТП-то. Мисля че доста подробно съм го направил на клипчето и всяка стъпка е показана. Няма как да го обясня по подробно, колкото и да ми се иска….Гледай клипчето и направи същото! Поздрави

  • Страхотен тюториъл, браво! Само един проблем имам – на практика нещо не става…
    От линка отивам в image-maps.com и си браузвам до картинката в jpeg, после давам start mapping your image и нищо не става. Презарежда същата страница и дотук…

    Какво може да се направи в случая? Пробвах и с Мозила и с ИЕ – същия резултат…

    Благодаря предварително!

    • благодаря за добрите думи. нямам идея защо ти се получава така. по подробно от това както съм го показал във видеото не знам как да ти го опиша. във въпросния сайт качваш снимката, очертаваш желаните линкове и натискаш бутона, който споменаваш. от там трябва да ти се отвори страница с код, който да си копираш. няма причина да не става……,поне аз не виждам.
      поздрави

  • Здравейте г-н Стоянов,

    С риск да стана малко нахален ще задам още един въпрос, за момента искам да кача нещо съвсем простичко „New app“ които да изобразява няколко снимки и подробно описание на продукта под всяка снимка.Какав формат да използвам за създаването на такъв докумен за да мога да го кача по твоя начин виждам че там е използван PSD формат.Искам да се науча да създавам такива табове именно по твоя начин защото по нататък съм намислил да направя нещо по сложничко, като свикна, пък и всичко е толкова подробно обяснено за което те поздравявам.

    • Здрасти,

      Стига да знам как как да ти отговоря, няма проблем да питаш.

      За целта, за която питаш перфекния вариант според мен е да използваш Фотошоп където да си направиш изображението с текста, след което да оформиш линковете с инструмента, който съм посочил в статията Image-Map.

      Това, което искаш е почти точно копие на урока в статията. Можеш и да вградиш и допълнителни странички в приложението, като пример за това можеш да видиш като на фен страницата ни в таб-а ни натиснеш оранжевия бутон „виж как, натисни тук“. Това не съм го описал в статията, но ще намеря време да го направя, че и в момента не помня как го направих 🙂

      А относно PSD файла съм използвал готов, в който само редактирам текстове и други неща във Фотошоп. В интернет има много безплатни такива файлове, които си теглиш и редактираш във Фотошопа по твое желание. Аз лично не съм художник и не разбирам толкова от фотошоп и затова предпочитам да си намирам готови, които да пипвам малко.

      Ако има нещо друго, питай! И надявам се че нямаш нищо против да постна въпросите ти в коментарите под въпросната статия 🙂

  • Здравейте,

    Търсех информация за facebook табовете и поаднах на вашият сайт, прочетох почти всичко за създаването на iframe tab, доста интересна и полезна информация и тъй като подготвям фен страница на продукт искам да поставя именно такива табове в страницата.За съжаление след като разреших достъпа на приложението за разработчици и натиснах бутона „Set up New App“, се появи прозорец, които гласи че акаунта ми трябва да бъде потвърден чрез телефонен номер или кредитна карта.Подпълних полето за вертификация на телефонен номер но така или иначе не получавам ниÐ
    �акав код за достъп няколко пъти препращам искане за код и нищто не получаван искам да попитам дали не бъркам някаде и има ли някакъв друг начин за качване на iframe табове освен чрез тази програма.

    Надявам се на отговорът ви и предварително Благодаря.

    Поздрави
    А.Александров

    • Здравейте г-н Александров,

      Мисля, че някъде бях гледал, че искат потвърждение чрез телефонен номер за приложенията, на мен незнам защо не ми е искало, но предполагам, че това е за нови акаунти. Би трябвало да ви прати кода, чрез смс, тъй като аз лично скоро си правих нов профил във фейсбук за нещо и пратих няколко пъти молба за тоя код и дойде след няколко часа.

      Ако не става с приложение вижте тази статия/линка е по долу/, мисля, че ще ви е доста полезна. В нея се съдържат все приложения, чрез които да си направите таб-овете без да имате нужда да правите приложения като описания вариант в нашата статия. Препоръчвам ви последното приложение от поста, тъй като него съм го пробвал и се работи елементарно, останалите също може да тествате.
      Надявам се че съм бил полезен

  • Здрасти, при мен не се получи. Едва ли причината е, че моя феис е на български но при мен липсват менюта които видях във филма ти. Това например – “Default Landing Tab”/снимката отдолу/ и от падащото меню изберете името на вашия ландинг таб, който направихме и накрая натиснете естествено “Save Changes” – изобщо го няма. Оставам с впечатление, че Фейс има различни версии . Или е заради някакви допълнителни настройки.

    • Здравей и добре дошъл, Това са стандартни опции, които ги има във всички настройки за приложения във Facebook, няма причина да ги нямаш, но явно ги нямаш! Не са нито допълнителни настройки нито нещо, което да добавяш допълнително. Това са просто стандартни опции. Като обърнеш езика отново ли ти липсват?

      • Здрасти, благодаря за отговора ти. Това с езика просто беше предположение, наистина безсмислено но просто не можах да намеря друго смислено обяснение. При мен менюто започва от Basic information горните две ги няма.  И точно това ме накара да ровя. Иначе възможността да направя това което описваш в статията си е само любопитно за мен. В смисъл, че феисбук не е любимото ми място, но винаги е любопитно да направиш нещо което е интересно и отгоре на всичко ти го поднасят наготово. Разгледах доста неща за които си писал и имам и други въпроси, разбирай неуспехи, и ще се радвам ако и на теб ти е интересно да ги обсъдим. Някой от тях наистина бих искал да подкарам но нещо не се справям. Поздрави. 

        • Здрасти, и аз тръгнах с езика като проблем, защото честно казана не виждам абсолютно никаква логика да ги няма опциите при теб. Но има и доста по лесни варианти за такъв тип ландинг таб чрез приложение за Фейсбук.

          Питай каквото те интересува, ако мога да помогна няма проблем 🙂

          Поздрави

        • Имам предвид един Wordpres темплеит за интернет магазин, които намерих тук. Много е готин, в демото има и стоки – фотоапарати и много възможности. Първото нещо което видях като го инсталирах е, че нещо се опитва да се зареди в хедъра но не му обърнах внимание. Преведох каквото трябваше промених много неща изобщо поиграх си и в момента в които смених имената на категориите и изчезнаха стоките които се виждаха в местата „Препоръчваме Ви“ после се сетих и за хедъра и последно мисля, че в темата нещо липсва – някои я е попорязал. Което е съмсем естествено – плащаш получаваш ама не ми се плаща . Ако разбирах повечко от сорса сигурно щях да се оправя…. За да помогнеш трябва да го инсталираш и да си поиграеш, което си е много работа и не ми е удобно да те моля за такива неща.  Това си е услуга а както знаем услугите се плащат :))  Но ако ти е интересно и имаш празен блог с които можеш да експериментираш . . . или ако ти се занимава влез в това  което аз съм инсталирал – store.2beangelika.com (admin,asd) пробна инсталация- всякакви експерименти се допускат. 
          Намерих още един темплеит за магазин из твоя саит но той пък  дава грешки при разархивирането ….Всяка помощ би била добре дошла. Поздрави.
          http://www.facebook.com/vencislav.velev
          P.S. Нямам против да одобриш този пост и данните да се покажат в публичното пространство – после ще пишем в началото на магазина “ Този сайт е създаден с помощта на приятелите от клуба“ Винаги има някой който знае повече.

        • Страхотно, справих се остана само да направя така, че да се вижда само страницата на целия екран – сега се вижда на мястото на стената и вдясно остава една колона  … с името на Администратора и т.н.

        • Супер, браво, но това за темата, за която питаше или за iFrame-a във Facebook говориш?

  • Много ясно и кадърно разяснение за нас, които сме гола-вода с програмирането. Вероятно ще опитам, защото ми изглежда много яко : )

  • Относно малката редакция на html кода:
    Отварящи тагове :
    1.
    2.
    3.
    В края са затварящите тагове в обратен ред: 3. , 2, 1

  • Благодаря, много полезно, сега остава да опитам, дали ще се справя:)

  • От Иво Илиев:
    „по този начин, който си описал, и височината на
    приложението е ограничена по пиксели, иначе се появяват вътрешни
    скролове за фрейма.“ Благодаря за добавката Иво 🙂

  • Браво! Мислех да потърся тези дни информация точно за това и ти си го синтезирал кратко, точно, ясно и на български език. Че и видео има 🙂 Статията е супер и е много полезна за всички, които искат да направят нещо повече с фен страниците си.

  • Бравос. Не е ли едно и също дали ще сложиш Таб или този урок. Или като прочетох всичко се вижда, че преимуществото е, че имаш базирана ФТП папка на своят сървър и от там се дърпа ХТМЛ – ако правилно се изразявам.

        • предполагам че знаеш че може и с приложение, даже мисля някои от следващите статии в категорията фейсбук да са как става с приложение, която ще е доста по кратичка, там е само копи-пейст, но този вариант някак си ми допада повече 🙂

        • Е прав си. Аз просто търсех + и – на двата инструмента „Урока – Приложенията“. За да си направя преценка.

        • ами не бих искал да те съветвам, мисля че е въпрос на лично предпочитание-особено ако ще е нещо простичко като само изображение

        • Тоест ако искам да мина на по-сложно ниво, твоят урок е инструмента. Така ли.

        • не бих казал, тук нивото си е точно за непрофесионалисти, просто е въпрос на избор

  • 🔘 За Нас

    🔘 За Реклама


    🔘 Общи условия

    🔘 Права за ползване

    🔘 Privacy Policy

    🔘 Cookies

    🔘 Решаване на спорове


    LIFEHACK е медия за бизнес и личностно развитие, в която се публикува качествено съдържание по теми като дигитален маркетинг, онлайн бизнес, лидерство, предприемачество, мениджмънт, психология и продуктивност.


    Facebook

    📩 office@lifehack.bg

    >
     

    Най-голямото намаление за годината! Вземи 50% отстъпка за най-желания абонамент научи повече