Strona głównaO nasNasze szkoleniaKontakt
14/2/2012 ... Bartłomiej Rak

Facebookowe podstawy: jak stworzyć własną zakładkę?

Założenie fanpage’a od pewnego czasu jest bardzo proste – Facebook mocno popracował nad tym elementem. Wybieramy kategorię, uzupełniamy podstawowe dane (za rękę prowadzi nas prosty wizard) i już mamy naszą własną facebookową stronę. Biorąc pod uwagę możliwości jej rozbudowy i zmiany w funkcjonowaniu Facebooka (jeden Wall dla najpopularniejszych i najnowszych wpisów), zakładanie profilu prywatnego dla marki coraz bardziej mija się z celem. Pomijając fakt, że jest to niezgodne z regulaminem…

Właściciele fanpage’a, mogą się pokusić o jego rozbudowanie, dodając pozycje w menu (popularne „zakładki” – ta nazwa stanowi przeszłość – kiedyś fanpage był oparty o layout zakładek). Najpopularniejszą dodatkową pozycją w menu jest tzw. zakładka powitalna – wyświetla się osobom, które nie są fanami, podczas ich wizyty na stronie. Zwykle taka zakładka pełni funkcje informacyjną i zachęca do polubienia. Jej zbudowanie można zlecić agencji albo skorzystać z darmowych rozwiązań. Oba sposoby mają swoje plusy i minusy. Współpraca z agencją to oczywiście dodatkowy koszt, ale efekty zwykle są lepsze – nie statyczne. Podmioty tnące koszty i decydujące się na skorzystanie z darmowych rozwiązań, przeważnie tworzą zakładki powitalne w formie statycznej – na „dzień dobry” wyświetla się nieklikalna grafika. Przy odrobinie chęci można na taką grafikę nałożyć HTML-ową mapę i już otrzymujemy złudzenie klikalności. Jak to zrobić? Szczegóły poniżej…

Zakładka w 15 minut

Na Facebooku dodatkowe „elementy” można tworzyć w różnych „językach programowania”. Do tej pory najpopularniejszy był Facebook Markup Language (FBML). Ta technologia, od pierwszego czerwca 2012 roku, przestanie być wspierana i Facebook sugeruje, aby korzystać z HTML-a, JavaScript i CSS-a. Przy poszukiwaniu darmowych rozwiązań polecam wziąć to pod uwagę! W tym artykule posłużymy się Woobox Static HTML IFRAME Tab for Facebook Pages. Korzystając z tego rozwiązania, będziecie mogli stworzyć dowolną zakładkę (tekstową, graficzną, HTML-ową) sygnowaną własną ikoną. Jeżeli tekst czy grafikę macie już przygotowaną całość nie powinna Wam zająć więcej niż 15 minut! Ale po kolei:

1. Na początek musicie wejść na stronę https://developers.facebook.com/apps i w prawym górnym rogu kliknąć przycisk „Create New App”.

2. Pojawi się okno, w którym Facebook poprosi Was o podanie nazwy zakładki oraz zaakceptowanie polityki serwisu. Podajecie, akceptujecie i zapewne będziecie musieli wypełnić captche bezpieczeństwa.

własna zakładkawłasna zakładka

3. Jeżeli wszystko zrobiliście poprawnie, Waszym oczom powinien ukazać się ekran edycji nowej aplikacji. Miejsca, które musicie uzupełnić zostały oznaczone na czerwono.

własna zakładkawłasna zakładka

4. Zacznijmy od zmiany ikony – to właśnie ta ikona będzie się wyświetlała przy nazwie aplikacji na Waszym fanpage’u. Plik uploadujecie z dysku – może to być dowolny plik graficzny, ale pamiętajcie żeby był w rozmiarze 16 x 16 piskeli, czyli bardzo, bardzo mały.

5. Kolejne kroki - w sekcji „App on Facebook” oraz „Page Tab” musicie wypełnić w sumie 5 pól:

Canvas URL: http://YOURAPPID.iframehost.com/ (YOURAPPID musicie zastąpić ID Waszej aplikacji – to ID jest podane na wysokości pola zmiany ikony)
Secure Canvas URL: https://YOURAPPID.iframehost.com/ (YOURAPPID zastępujecie ID Waszej aplikacji)
Page Tab Name: Aplikacja testowa (tutaj podajecie nazwę aplikacji. Będzie ona widoczna na Waszym fan page’u)
Page Tab URL: http://YOURAPPID.iframehost.com/tab (YOURAPPID zastępujecie ID Waszej aplikacji)
Secure Page Tab URL: https://YOURAPPID.iframehost.com/tab (YOURAPPID zastępujecie ID Waszej aplikacji)

Na koniec klikacie przycisk „Save changes".

własna zakładkawłasna zakładka

6. Teraz otwieracie nową zakładkę w przeglądarce i w pasek adresu wklejacie link „http://www.facebook.com/add.php?api_key=YOURAPPID&pages”, gdzie YOURAPPID zastępujecie ID Waszej aplikacji. Na stronie, która się wyświetli, musicie wybrać fanpage, na którym chcecie zainstalować Waszą nową aplikację/zakładkę. Po dokonaniu wyboru, klikacie na przycisk „Add nazwa_Waszej_aplikacji”.

własna zakładkawłasna zakładka

7. Zostaniecie przekierowani na Waszą stronę, gdzie w menu po lewej stronie będziecie już mieli nową zakładkę. Klikacie w nią i zostaniecie poproszeni o podanie „App Secret”. W naszym przykładzie to: „6c2b0556b352e75d6e9662338d25a1ca”. Ten numer ID znajdziecie na stronie edycji aplikacji. Po wprowadzeniu poprawnego numer, kilkacie przycisk „Save App Settings” – Waszym oczom powinien ukazać się komunikat: Your App has now been setup for use with Woobox's custom page tab. Please click your new Facebook page tab to configure it. Zgodnie z nim klikacie raz jeszcze w nazwę Waszej aplikacji w menu.

własna zakładkawłasna zakładka

8. Teraz musicie zautoryzować Waszą aplikację. Klikacie więc na „Authorize the Tab Application” i na kolejnym ekranie przydzielacie uprawnienia aplikacji.

własna zakładkawłasna zakładka

9. Kolejny ekran to już okno edycji Waszej aplikacji.

własna zakładkawłasna zakładka

Większość opcji możecie pozostawić bez zmian. To, co Was najbardziej interesuje to przycisk „View Tab” - dzięki niemu możecie wyjść z edycji i przejść do widoku zakładki takiej, jaką widzi użytkownik Facebooka. Przede wszystkim jednak, musicie wybrać źródło zakładki. Czy to ma być zdjęcie czy też opiszecie zakładkę w języku HTML? Większość osób decyduje się na statyczną zakładkę w formie grafiki. Jest to jednak tylko pół środek. O ile na grafice można zaprezentować, czym jest nasz fanpage i o czym będziemy tutaj mówić, to jednak klikalne zakładki spełniają więcej funkcji. Przede wszystkim mogą odesłać do różnych innych zasobów.

Jeżeli HTML-em posługujecie się słabo i nie znacie CSS-a możecie skorzystać z „mapy” opisującej grafikę odpowiednimi współrzędnymi, „mówiącymi” przeglądarce, gdzie powinien być link. Szczegóły tej operacji możecie znaleźć tutaj. To naprawdę nie jest trudne i w efekcie otrzymujecie klikalną zakładkę.

Bartłomiej Rak – w branży interaktywnej reprezentuje jedno z pierwszych pokoleń, które dorastało z internetem, a jednocześnie pamięta jego początki w Polsce – generacja Y. Absolwent Informatyki Stosowanej UJ i student Marketingu Internetowego SGH. Pierwsze kroki stawiał w Zespole ds. Internetu ING Banku Śląskiego. Następnie przeszedł na drugą stronę marketingowej barykady i reprezentował agencję reklamową Supremum Group (Second Life) oraz tworzył agencję interaktywną Someday Interactive (w portfolio takie marki jak: ING Bank Śląski, Cisowianka czy YTONG/Silka). Specjalizuje się w zarządzaniu projektami internetowymi i Social Media - edukuje z zakresu działań w internecie. Wśród uczestników szkoleń Socjomanii pojawili się przedstawiciele takich brandów jak: PKP Energetyka S.A., Ringier Axel Springer Polska czy UM Gdynia. Zafascynowany internetem i prawie uzależniony od komunikacji za jego pośrednictwem...


Imię
E-Mail
Wyrażam zgodę na przetwarzanie swoich danych osobowych zgodnie z ustawą z dnia 29 sierpnia 1997 r. o ochronie danych osobowych (Dz.U. nr 133, poz. 883) przez Bartłomiej Rak Kolorowa 7 43-360 Bystra NIP: 9372437488.
Wyrażam zgodę na przekazywanie mi informacji handlowych środkami komunikacji elektronicznej przez Bartłomiej Rak Kolorowa 7 43-360 Bystra NIP: 9372437488.

1. 2012-05-22 - Kraków, Marketing internetowy w małej i średniej firmie

2. 2012-05-26 - Kraków, 48 godzin z social media marketingiem

3. 2012-05-29 - Kraków, Facebook bez tajemnic

4. 2012-06-02 - Lublin, 48 godzin z social media marketingiem

5. 2012-06-04 - Warszawa, Marketing internetowy dla organizacji pozarządowych

zobacz więcej >>