Jakiś czas temu założyłem sobie konto w twitter.com. Chcąc wzbogacić bloga o pewien dodatek oferowany przez wymieniony wyżej serwis(dot. aktualnie wykonywanych przeze mnie czynności), zmuszony byłem zainstalować go w postaci flasha na stronie. Niestety, nie przepadam za „flashowymi bajerami” i tym samym postanowiłem stworzyć coś nowego, co odpowiadałoby moim potrzebom 🙂 Z pomocą przyszło mi API twittera, php oraz JavaScript(prototype, script.aculo.us – pliki: scriptaculous.js, effects.js).
Twitter.com udostępnia obszerne API dzięki któremu, za pomocą skryptów zewnętrznych możemy kontrolować obsługę naszego konta w serwisie. W naszym przypadku(chcemy pobierać tylko statusy utworzone przez nas) odwoływać będziemy się do tego adresu: http://twitter.com/statuses/user_timeline/user.json – gdzie user jest zarejestrowaną nazwą użytkownika.
Stwórzmy bibliotekę – twitter.class.php – która odpowiedzialna będzie za pobieranie wyżej wymienionego pliku:
class Twitter { function get_status($user_name) { $handle = fopen('http://twitter.com/statuses/user_timeline/'.$user_name.'.json', "r"); while (!feof($handle)) { $response .= fread($handle, 8192); } return $response; } }
Następnym krokiem, bedzie stworzenie pliku – twitter.php – do którego będziemy się odwoływać za pomocą AJAX’a. Plik ten będzie korzystał z wcześniej utworzonej klasy Twitter:
get_status($_GET['user_name']); echo $json; ?>
Po utworzeniu skryptów wykonywanych po stronie serwera, zajmijmy się stroną kliencką. Stwórzmy bibliotekę JavaScript – twitterLib.js odpowiedzialną za wywołania pliku twitter.php przy udziale AJAX’a(z drobną pomocą biblioteki prototype oraz script.aculo.us), oraz odpowiednie przetwarzanie i generowanie widoku:
var handlerFunc = function(t) { var jsonObj = eval(t.responseText); var area = document.getElementById(twitter_block_name); for(i = 0; i < jsonObj.length; i++) { var date = new Date(jsonObj[i].created_at); area.innerHTML += "[ " + date.toLocaleString() + " ]
"; } } window.onload = function() { new Ajax.Request('http://files.gruszka.info/blog/scripts/twitter/twitter.php', {parameters:'user_name=' + twitter_user_name, method:'get', onSuccess:handlerFunc}); }
" + jsonObj[i].text + "
Kolejnym krokiem będzie „połączenie wszystkiego w całość” poprzez stworzenie pliku index.html:
Co porabiam...
Gdzie twitter_user_name to nazwa użytkownika w serwisie twitter, a twitter_block_name to id elementu w jakim chcemy umieścić nasze statusy.
Dodajmy jeszcze wygląd – style.css:
#twitter { border: 1px solid #000; width: 250px; } #twitter_title { background-color: #388938; color: #FFFFFF; font-weight: bold; padding: 2px; text-align: center; } #twitter_block { padding: 10px; } #twitter_block span { font-size: 11px; color: gray; }
Ufff…. skończyliśmy 🙂 Gotowy przykład działania można zobaczyć pod: http://snipeworld.com/files/blog/scripts/twitter/
czy mozna uzyc Twojego skrpytu bez „JavaScript(prototype, script.aculo.us – pliki: scriptaculous.js, effects.js)” twitter siadl i nie mam jak sprawdzic 😛 odpisz na na mail jesli mozesz ratay-m@o2.pl.
szukam skryptu ktory wygladalby jak ten na stronie twitter.com po wybraniu jednego statusu. tylko ze ja chce wyswietlac w ten sposob ostatni aktualny wpis.
nie wiem czy wyrazilem sie jasno 😛
osobna strona dla statusu, ktora wyswietla dymek, nasze imie, img oraz czas dodania.
bylbym wdzieczny gdybys mogl mi pomoc…