Specjalna strona startowa na profilu na Facebooku

Dziś opiszę wam krok po kroku, jak wykonać indywidualną, specjalną stronę startową (landing page) na profilu dla fanów (fanpage) na Facebooku. Jest to strona, którą użytkownicy Facebooka, którzy nie należą jeszcze do grona naszych fanów, zobaczą jako pierwszą po wejściu na nasz profil. Do wykonania tej strony wykorzystamy tzw. Statyczny FBML (Static FBML).

Co to jest Statyczny FBML?

Statyczny FBML (Static Facebook Markup Language) to aplikacja, dzięki której możemy do naszej strony fanowskiej na Facebooku dodawać indywidualne, spersonalizowane zakładki z różną ich zawartością. Dzięki Statycznemu FBML możemy stworzyć zakładkę, na przykład z filmami z YouTube, czy galerią zdjęć z serwisu Flickr. W tym wpisie pokażę jak wykonać prostą stronę powitalną dla gości naszej strony.

Strona startowa krok po kroku

Całą zabawę zaczynamy jednak nie od Facebooka, a od przygotowania w programie graficznym ilustracji, którą zamieścimy na naszej stronie powitalnej. Przy tworzeniu tej grafiki należy pamiętać o dwóch sprawach:

  • szerokość grafiki powinna mieścić się w granicach 800 pikseli, aby zmieściła się w kolumnie
  • najlepiej zapisać ją jako GIF, żeby dość szybko się wczytywała

Przygotowaną grafikę (zobacz moją) przenosimy na nasz serwer i zapamiętujemy do niej link. Tak przygotowani przechodzimy na naszą stronę dla fanów i działamy w następujący sposób:

Wchodzimy na stronę aplikacji i klikamy w link “Dodaj do mojej strony” znajdujący się bezpośrednio pod ilustracją aplikacji po lewej stronie ekranu. Z listy, która się pokaże wybieramy stronę, na której chcemy zamieścić naszą specjalną zakładkę.

Klikamy "Dodaj na moją stronę"
Klikamy "Dodaj do mojej strony"

Następnie klikamy w link “Edytuj element Strona” znajdujący się bezpośrednio pod ilustracją naszego profilu,

Klikamy w link "Edytuj element Strona"
Klikamy w link "Edytuj element Strona"

a następnie, na liście elementów odszukujemy pozycję FBML-FBML i klikamy w link “Ustawienia aplikacji” i zatwierdzamy dodanie zakładki klikając w przycisk “Okay”.

Klikamy w link "Ustawienia aplikacji"
Klikamy w link "Ustawienia aplikacji"

Teraz w tej samej pozycji FBML-FBML klikamy w link “Eytuj”. W oknie, które nam się pokaże wpisujemy:

  • w pozycji “Tytuł boxa” tytuł zakładki, która pokaże się na naszej stronie profilowej
  • w pozycji “FBML” wpisujemy kod HTML, dzięki któremu wyświetli się nam przygotowana wcześniej ilustracja

Następnie klikamy w przycisk “Zapisz zmiany”.

Edycja zakładki FBML
Edycja zakładki FBML

Ostatnia rzecz jaką musimy zrobić to klikamy ponownie w link “Edytuj element Strona” a następnie link “Edytuj” w pozycji “Ustawienia tablicy”. Z rozwijanej listy zatytułowanej “Domyślna etykieta dla pozostałych użytkowników” wybieramy zakładkę, którą właśnie skończyliśmy przygotowywać.

Ustawienia tablicy na stronie dla fanów
Ustawienia tablicy na stronie dla fanów

Efekt naszej pracy jest następujący: jeśli ktoś, kto nie należy jeszcze do grona naszych fanów wejdzie na nasz profil, zostanie automatycznie skierowany na stronę z zakładką, którą właśnie stworzyliśmy (zobacz moją), natomiast wszyscy nasi fani jako pierwszą zobaczą stronę z zakładką “Tablica”.

Inne możliwości

Jak wspomniałem na początku artykułu dzięki statycznemu FBML możemy stworzyć zakładki, które mogą mieć różną zawartość. Polecam Wam wpis na blogu Hyper Arts, w którym znajdziecie mnóstwo linków do tutoriali wyjaśniających, jak to zrobić.

Podsumowanie

Mam nadzieję, że wpis Wam się spodobał i skorzystacie z niego, aby stworzyć ciekawe strony startowe dla Waszych profili na Facebooku. Chętnie zobaczę Wasze gotowe dzieła :) Jeśli znajdziecie jakieś oryginalne pomysły u innych, podzielcie się linkami w komentarzach.

[Aktualizacja] Jak podlinkować obrazek?

Bardzo dużo osób pyta w komentarzach, jak podlinkować obrazek, żeby przekierowywał na jakąś stronę. Rozwiązanie jest bardzo proste. W odpowiednim miejscu całości kodu trzeba wpisać coś takiego:

Link do obrazka
Przykładowy link do obrazka

Oczywiście to co podałem to jest przykład i w pierwszym cudzysłowie trzeba podać pełen adres strony, do której ma przenosić użytkownika kliknięcie na obrazek, natomiast w drugim cudzysłowie trzeba wpisać pełny adres internetowy, pod którym znajduje się obrazek będący linkiem.

94 komentarz(e)y na temat “Tworzymy indywidualną stronę startową dla naszych fanów na Facebooku

  1. Witam!
    Po wejściu na stronę aplikacji FBML nie widzę opcji “dodaj do mojej strony”, mam tylko komunikat ” dodaj do ulubionych na mojej stronie”. Dlaczego tak jest? Nie mogę dodać aplikacji do mojej strony, mimo, że staram się to zrobić z profilu administratora

    1. Mam ten sam problem. Nie wiem jak to ogarnąc. Bardzo proszę o odpowiedź na tego maila.

  2. A ja nie moge ustawic zeby zamiast tablicy pojawialo sie na wtepie FMBL :/ mimo ze mam tak ustawione w ustawieniach tablicy…. Moze ktos ma pomysl zeby to zadzialalo?

    1. Żeby sprawdzić, czy rzeczywiście pierwsza pokazuje się zakładka stworzona dzięki FMBL musisz na chwilę kliknąć link “Nie lubię” w lewej kolumnie pod głównym zdjęciem profilowym strony.

      Jeśli jesteś już Fanką strony to zakładka, którą stworzyłaś nie pokaże się jako pierwsza – logiczne, czyż nie? ;)

  3. wstawiam ten link, zapisuję, ale dalej nie wiem co zrobić.
    mógłby mi ktoś podesłać screeny krok po kroku?

    kiedyś próbowałam ustawić to w zakładce ‘zarządzaj uprawnieniami’, bo dziewczyna, która to miała mi tak poradziła, przysłała mi nawet screena, na którym ona miała jakieś tam opcje, żeby ustawić która zakładka ma być pierwsza, ale ja tego nie mam.

  4. słabe objaśnienie 1 punkt jest niewykonalny ale cale szczescie w kmentarzu ponizej kolega pomogl w rozwiazaniu problemu w kroku 2 kolejna przeszkoda ponieważ nie ma takiej opcji pod zdjeciem profilowym jak “edytuj element strona”

  5. Witam,
    A ja nadal mam problem z umieszczeniem ” witacza graficznego” jak strony witającej fanów na FB, czy FBML zostało wycofane, gdyż na swoim profilu FB w aplikacjach nie mam takiej ikonki, jak tak to jak teraz stworzyć cos takiego, bo przyznam iz witanie fanów tablicą jest średnio estetyczne :/

      1. Czyli nie ma już narzędzia działającego na zasadach FBML, grafikę potrafię stworzyć sama w photoshopie, miałam po prostu nadzieję, że wprowadzono jakis zamiennik darmowy

  6. Piotrze, jak zrobiłeś, że twoja grafika jest nieklikalna. Stworzyłem landing page w ten sam sposób (psd + wordpress) i moja grafika jest klikalna i po kliknięciu otwiera się w osobnym oknie. Chciałbym, aby była nieklikalna – ludzie maja kliknąć Lubię to! powyżej, a nie uciec do innego okna:)

  7. Udało się. Dzięki Piotrze.
    Wydaje mi się, że szerokość bannera się nieco zmieniła, bo jak umieszczam 800 px według instrukcji z bloga to nie pojawia się w całości. Lepszym wyjściem jest przygotować stronę na ok. 520 px szerokości.

    A ta aplikacja o której Piotrze napisałeś 6 września jakaś dziwna jest. Tworzy nowe statyczne strony w lewej kolumnie, ale nie mogę znaleźć miejsca, gdzie można je edytować.

  8. Witam mam takie pytanie do autora jak zrobic coś takiego aby ktos musiał udostępnic naszego fan-page a potem mógł dopiero oglądać jego zawartość

  9. jak zrobić na facebooku aby po kliknięciu lubię to dopiero można było udostępnić aplikacje

  10. Bardzo dziękuję za artykuł, który był dla mnie niezwykle pomocny!! Pozdrawiam i życzę sukcesów! :-)

Komentarze zostały wyłączone.