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 735

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

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.

Subscribe without commenting




Instagram

Spelling error report

The following text will be sent to our editors: