-
data publikacji: 27.05.2010
Tworzymy indywidualną stronę startową dla naszych fanów na Facebooku
kategoria: Tutoriale, Webmaster autor: Piotr Sajnog
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ę http://www.facebook.com/apps/application.php?=4949752878 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ę.
Następnie klikamy w link "Edytuj element Strona" znajdujący się bezpośrednio pod ilustracją naszego profilu,
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".
Teraz w tej samej pozycji FBML-FBML klikamy w link "Edytuj". 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".
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ć.
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. -
Zobacz podobne wpisy:
- None Found
-
25 Responses to “Tworzymy indywidualną stronę startową dla naszych fanów na Facebooku”
Leave a Reply
Komentarze
Kategorie
Top 10
bal intermobil: Jak stworzyć stronę za pomocą xhtml oraz css
alan27pbll: Query_posts, czyli jak ujarzmić loopa część 1.
Michał: Inspirujące strony www: wrzesień 2010
czi: Gravatar, czyli jak mieć globalnego avatara
learn italian online: Query_posts, czyli jak ujarzmić loopa część 1.
hotelpalermo: Jak poprawnie osadzić Flasha w kodzie (X)HTML strony?
Windscreen: Inspirujące strony www: wrzesień 2010
EMAAR MGF GURGAON: Query_posts, czyli jak ujarzmić loopa część 1.
- CMSy Artykuły dotyczące różnego rodzaju systemów zarządzania treścią CMS.
- Flash Podstawowe informacje pomocne przy tworzeniu animacji w Adobe Flash.
- Fotografia Samouczki dotyczące nie tylko robienia zdjęć ale też ich cyfrowej obróbki.
- Grafika Ogólnie pojęta grafika komputerowa, od inspiracji, po tworzenie layoutów oraz mniejszych form graficznych.
- Inne tutoriale wordpressowe Wszystkie inne zagadnienia dotyczące WordPressa.
- Inspiracje Inspirujące materiały graficzne z dziedziny projektowania stron www, projektów DTP, digital painting, itp.
- Obróbka zdjęć Techniki retuszu fotografii cyfrowych.
- Rysunek Tworzenie rysowanych ilustracji w Adobe Photoshop.
- Skóry do Wordpressa Darmowe oraz płatne – najlepsze skóry do WordPressa.
- Skrypty client-side
- Skrypty server-side
- Tutoriale
- Webdesign Tutoriale z zakresu projektowania stron www i grafiki użytkowej na rzecz internetu.
- Wieczór z Open Source
- Wordpress Ulubieniec naszej publiczności CMS WordPress: nowości, tricki, wtyczki, skóry i wszystko to co może przydać się przy korzystaniu z tego systemu.
- Wtyczki do Wordpressa Recenzje oraz instrukcje najbardziej popularnych i najbardziej niezbędnych pluginów do WordPressa.
- XHTML/CSS Ciekawostki z dziedziny kodowania stron www: XHTML, CSS, jQuery.
Najnowsze newsy
Wieczór z Open Source 2010
Jak co roku WSINF organizuje konferencję Wieczór z Open Source.
Chciałbym zaprosić was na tegoroczna konferencję Wieczór z Open Source 2010! Czytaj dalej
Grafart.org i WACOM zapraszają na konkursy!
Witam!
Myślę, że czas najwyższy nadmienić, że za niedługi czas zostanie zorganizowany pierwszy z trzech konkursów, w których główną nagrodą będą tablety firmy WACOM!
Za miejsca drugie oraz trzecie nagrodami będą kubki i koszulki firmy WACOM oraz magazyny graficzne PSD PHOTOSHOP oraz COMPUTERARTS.
Czytaj dalej
Zapraszamy na forum graficzne Graffika.pl
Każda osoba interesująca się grafiką komputerową ma czasami ochotę porozmawiać o swoich pracach, posłuchać rad, krytyki i pochwał innych osób. Idealnym miejscem na realizowanie takich potrzeb jest forum graficzne Graffika.pl.
Czytaj dalej
Polecane strony
- No bookmarks avaliable.
Widzę, że Facebook znacznie obniżył jakość ilustracji w stosunku do oryginału, a to dla mnie niespodzianka, którą nie bardzo wiem jak naprawić. Spróbuję wieczorem zapisać grafikę w JPGu i zobaczymy czy to coś zmieni.
Czy ktoś z Was miał ten sam problem i wie jak go rozwiązać?
Witam
Mam pytanie, jak mogę przy zakładce Statyczny FBML dodać jakąś ikonkę zamiast znaczka <->?
Pozdrawiam
Bardzo ciekawy artykuł! Zaraz stworzę sobie dla fanpage Gosiunia.pl i Dygantofc.pl taką zakładkę, ale jako HTML, nie sam obrazek w treści. Dzięki za art!
Dzięki za miłe słowa. Cieszę się, że artykuł się przyda.
Przy okazji – przejrzałem kilka zakładek na różnych profilach i widzę, że nie tylko u mnie jest problem z poprawnym wyświetlaniem grafik. Prawdopodobnie coś namieszali na Facebooku
więc trzeba cierpliwie czekać, aż wszystko wróci do normy.
U mnie dobrze szerokie zdjęcie pokazało, ale strasznie dużą kompresję dali…
):http://www.facebook.com/#!/pages/AB-Gosiuniapl/10…
Pochwalę się (na Twój wzór
Ha nie dalej jak wczoraj chciałem swoją stronę pozmieniać i szukałem różnych rozwiązań. Pozmieniało się ostatnio sporo na Facebooku, odnaleźć jest się ciężko, ale wydaje mi się że wszystko zmierza w dobrą stronę.
Świetny poradnik, dzięki wielkie !
Pozdrawiam
Marcin Godlewski http://wordpress.praktycznie.net/
"odnaleźć jest się ciężko" – dokładnie facebook ma dość skomplikowaną strukturę, która czasami utrudnia a nawet zniechęca do korzystania z niektórych dodatków. Też mam nadzieję, że ten skomplikowany układ za jakiś wyjdzie na prostą
No ja miałem ten problem że przyzwyczaiłem się do "mojego pierwszego" wyglądu i teraz muszę przyzwyczajać się do drugiego – mam nadziję że do kolejnego nie będę musiał
Ja również dziękuję za uznanie
Sprawdziłem i dziś już wszystkie ilustracje wyświetlają się prawidłowo więc ta nadmierna kompresja to ewidentnie była wina Facebooka.
[...] startową dla naszych fanów na Facebooku | Vivee – wordpress, webmastering, grafika i fotografia vivee.info/…dualna-strone-startowa-dl… Pokaż reakcje /* */ inne strony z tej witryny + obserwuj co [...]
Bardzo dobrze napisane. Mam inny problem jak sortować zakładkami na mojej stronie na FB ?
Z tego co sprawdziłem to działa mechanizm "przeciągnij i upuść" (za nazwę zakładki). Nie można ruszyć tylko zakładek "Tablica" i "Informacje".
[...] fakt, że udało mi się opublikować moje pierwsze w życiu wpisy gościnne (na Lepszym Blogu i Vivee – właściwie to jest “przedruk”, ale za moją zgodą). Agnieszce i Wojtkowi [...]
Witam, tworzę treść w html'u w programie do tworzenia www. jak potem treść chcę przykleić do okienka FBML, po zapisaniu pokazuje się tylko biła strona, nie ani tekstu ani grafiki…
Proszę o pomoc!
o. takie artykuły to ja lubię! pomogło, udało się, super! dziękuję!!
Witaj,
dzięki za świetną instrukcję – właśnie sobie ustawiłem stronę. Pozdrawiam!
Faktycznie działa
Pozdrawiam! http://www.facebook.com/pages/EL-Stacja/275703145...
Tag <center> użyty w przykładzie w html 4 jest zdeprecjonowany, a żeby być na czasie w html5 nie jest supportowany (http://www.w3schools.com/html5/html5_reference.asp)
Swietny opis>bardzo mi się przyda.
Pozdrawiam
Jak wpisać odwołanie do zewnętrznego arkusza stylów aby w IE była widoczna strona tak jak w Mozilli?
W FanPage w pierwszej linii wpisałem:
<link rel=”stylesheet” type=”text/css” media=”screen” href=&rdquo ;http://www.rataje.pl/images/Margonin/css/style.css” />
ale niestety taki link nie działa.
Gdy wpiszę w zakładce FanPage bezpośrednio <style> definicje styli
</style> to w Mozilli działa ale w IE niestety nie.
Jaki błąd popełniam?
Super! Dzięki wielkie za podzielenie się.
Nie mam możliwości w edycji strony ustawienia zakładki jako mojej strony startowej. Ktoś może mi podpowiedzieć, jak to zrobić?
Nie wiem czy Facebook dobrze robi likwidując FBML, ale jakoś trzeba sobie radzić. Tutaj jest zestawienie kreatorów stron startowych na Facebooka: http://www.slideshare.net/tomaszsmykowski/jak-dod...
Na jedenej ze stron brakuje mi w ustawieniach: Default Landing Tab: DLACZEGO? jest tam ponad 100+ fanow
Troszkę stary ten poradnik, ale jakoś się udało
http://www.facebook.com/pages/Ogladampl/278350525...