Ten krótki poradnik pokaże wam w jaki sposób wyświetlić statusy z Twittera we własnym szablonie. Przez szablon rozumiem tutaj box, w którym umieszczane będą nowe statusy. Taki box można później umieścić na własnym blogu, stronie czy gdziekolwiek indziej chcecie. W dalszej części wpisu załączam także wszelkie potrzebne pliki i gotowy szablon, który możecie dowolnie edytować do swoich potrzeb.

1. Projekt szablonu

Pierwszą rzeczą jaką musicie zrobić jest zaprojektowanie szablonu dla statusów Twittera. Ja do tego celu użyłem programu Adobe Photoshop CS4. Mój szablon wygląda tak:

Na końcu poradnika zamieszczam paczkę, w której jest plik PSD. Pozwoli on wam na własną edycję tego szablonu. Pozwoli to dostosować go do kolorystyki własnej strony.

2. HTML + CSS

Skoro mamy już zaprojektowany szablon teraz musimy go pociąć i zakodować. Pomińmy same czynności związane ze strukturą szablonu, a przenieśmy się do momentu, w którym musimy wpisać odpowiedni kod, który odpowiedzialny będzie za pobieranie statusów z Twittera.

W moim szablonie jest to ten fragment (wiersz 38 do 43):

<div> <div><a href=”http://twitter.com/dzg”>@dzg</a></div> <ul id=”twitter_update_list”></ul> </div> <script src=”http://twitter.com/javascripts/blogger.js” type=”text/javascript”></script>

<scriptsrc=”http://twitter.com/statuses/user_timeline/dzg.json?callback=twitterCallback2&count=1” type=”text/javascript”></script>

@dzg – to nazwa oznaczająca autora wiadomości. Możemy tutaj wpisać swoje imię, nazwisko lub po prostu nick z Twittera.

dzg –  to nasz login z Twittera. Tutaj musimy już podać nazwę za pomocą, której się logujemy. Złe podanie tej wartości spowoduje niepobieranie statusów z Twittera.

1 – ta liczba odpowiada za ilość statusów wyświetlanych w boxie.

Jeśli prawidłowo zakodowaliśmy szablon i dobrze użyliśmy kodu odpowiedzialnego za wyświetlanie statusów z naszego Twittera to wszystko powinno już dobrze działać.  Poniżej zamieszczam wszystkie pliki (html, css, psd, obrazki). W paczce znajduje się już gotowy szablon, który możecie użyć na swojej stronie.

3. Instalacja szablonu na własnej stronie

Jeśli nie chce się wam robić tego wszystkiego samemu to możecie skorzystać z paczki, która przygotowałem dla was. Wystarczy skopiować odpowiednie pliki do szablonu własnego bloga bądź strony. Znajdują się one w folderze “box na stronę” w paczce, która znajduje się niżej do pobrania.

Instalacja szablonu:

1. Kopiujemy zawartość pliku index.hmtl do skórki własnego bloga w miejsce, w którym chcemy by wyświetlił się box ze statusami z Twittera.

2. Kopiujemy zawartość pliku style.css do pliku style.css własnej skórki.

3. Kopiujemy grafiki z folderu images do folderu images własnej skórki.

4. Materiały do pobrania