I wy już od dziś jesteście… Wyświetlanie kodu na stronie głównej w WordPressie


Jak zrobić wyjeżdżający z lewej strony panel Facebooka?


02 lutego 2013, 20:39 | 6 komentarzy | 9 403

Dziś spróbujemy stworzyć element na stronie, który jest powiązany z Facebookiem. Będzie to zakładka na lewej krawędzi witryny, która po najechaniu pokaże zawartość tablicy na fanpage’u i/lub miniaturki ze zdjęciami osób lubiących fanpage. Takie rozwiązanie jest spotykane na coraz większej ilości witryn.

Przykład takiego rozwiązania znajdziecie na stronie Przedszkola Międzynarodowego, którą jakiś czas temu wykonałem.

Zacznijmy od HTML’a. Umieść na stronie następujący element:

W miejscu w którym jest podana ścieżka do facebook.png musicie podać poprawną ścieżkę do własnej zakładki FB. Mój obrazek ma zaokrąglone rogi (dlatego zapisałem go w formacie PNG) oraz rozmiar 50x150px.

Tam gdzie znajduje się tekst Tu będzie znajdować się box Facebooka musicie umieścić Like Box. Kod możecie pobrać ze strony http://developers.facebook.com/.

Teraz możecie dodać kod do arkusza CSS. Ja dodaje najczęściej:

 

 

Pozostał ostatni element czyli skrypt jQuery. Aby nasz kod zadziałał musimy pamiętać o tym, żeby odwołać się do biblioteki jQuery, która będzie odpowiadała za animację naszego elementu. Najlepiej sprawdzić najnowszą wersję na stronie https://developers.google.com/ i przekleić dostępny tam snippet. Najnowsza wersja która jest dostępna podczas pisania tego artykułu to 1.9.0. Kod jaki wystarczy umieścić w sekcji <head> to:

Kiedy podłączymy bibliotekę jQuery trzeba jeszcze w pliku .js podpiętym do witryny dodać kilka linijek kodu odpowiedzialnych za płynne wysuwanie panelu. Doklejamy więc kod:

Naturalnie jeśli już mamy plik z kodem jQuery, wtedy wystarczy wkleić linijki od 2 do 7, pomijając document.ready i ostatnią linijkę zamknięcia.

To wszystko. Daj znać w komentarzu jeśli uda się wdrożyć ten element, także jeśli pojawią się w trakcie implementacji pytania. Postaram się pomóc.

Jeśli szukasz podobnych wyczerpujących porad w sieci to polecam serwis 500sekund.pl, który zawiera minikursy z konkretnymi wskazówkami dotyczącymi stron działających na Wordpressie. Instrukcje krok po kroku są przygotowywane w taki sposób, żeby ktoś kto nie zna HTMLa i CSSa mógł zmodyfikować swoją stronę. Polecam:

500-sekund-fb-logo

Jeśli znalazłeś jakąś literówkę, daj mi o tym znać poprzez zaznaczenie tekstu i wciśnięcie kombinacji Ctrl+Enter.

Będzie mi niezmiernie miło, jeśli dołączysz do mnie na Facebooku!

Kamil Lipiński – przedsiębiorca, bloger, projektant stron www, założyciel Mocnej Grupy Blogerów oraz człowiek, który ma wielką nadzieję na to, że można się czegoś sensownego o WordPressie dowiedzieć w 500 sekund.
Wierzący (bynajmniej nie w technologię) geek.
  • Witam,

    Mam problem na stronie głównej pokazało mi się logo Facebooka, ale nie działa jako „przycisk”. Wkleiłem wszystko wg porad i nie wiem gdzie jest błąd…

    • Powodów może być wiele. Najczęstszym jest konlikt jquery – do strony są podpięte dwie biblioteki jQuery i dlatego skrypt odpowiadający za wysuwanie Facebooka nie działa. Aby to sprawdzić, najlepiej zainstalować w przeglądarce wtyczkę dla developera i tam to sprawdzić.

  • Paweł Dąbrowski

    witam
    proszę o pomoc z tym rozwijanym menu facebook

    Jest możliwość żebyś umieścił mi to na mojej stronie www

  • Adrian Nowakowski

    Witam,
    Przydatny tutorial. Ustawiłem jak należy, przystosowałem do wymiarów, które chciałem, ale w wysuwanej ramce nie pojawia mi się iframe wygenerowany na stronach Facebooka. Przypuszczam, że to ten kod koliduje z czymś, tylko pytanie z czym?
    Pozdraiwam.

  • pierre

    mi też się nie wysuwa okienko czy ktoś rozwiązał już ten problem?

    • Cześć Pierre, podaj adres strony to zerknę do źródła i może uda mi się coś podpowiedzieć.

Subscribe without commenting




Instagram

Raport o literówce

Następujący tekst zostanie wysłany do naszych redaktorów: