Gadżet twitter.com

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() + " ]
" + jsonObj[i].text + "

"; } } 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}); }

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/

One thought on “Gadżet twitter.com

  1. 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…

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *