02 Wrz

Twitter

Na świecie, a ostatnio także w Polsce zagościła moda na twitter`a. Jest to system powiadamiania znajomych o czynności, którą w tej chwili wykonujemy. Mojego twitter`a można znaleźć pod opcją szukaj. Przedstawię łatwy sposób na umieszczenie takiego skryptu na swojej stronie/blogu. Pierwszą rzeczą jaką należy zrobić jest rejestracja na stronie http://twitter.com. Serwis ten posiada możliwość dodawania nowych wpisów poprzez Jabbera. Wystarczy podać swój identyfikator podczas rejestracji lub w ustawieniach oraz wysłać podaną treść do twitter@twitter.com . Przejdźmy teraz do samego skryptu. Serwis Twitter udostępnia API do skryptów JavaScript, dzięki któremu można znacznie przyspieszyć wstawienie gadżetu na stronę/blog. Na końcu strony (przed tagami) </body></html> należy umieścić kod:

<script type="text/javascript" src="http://twitter.com/statuses/user_timeline/TWÓJ_NICK.json?callback=twitterCallback&count=1"></script>

gdzie TWÓJ_NICK zastępujemy tym, podanym podczas rejestracji. Kod ten wywoła funkcję twitterCallback (o niej za chwilę) jako parametr zwracając obiekt z danymi zawierającymi nasze wpisy. Wspomnianą funkcję musimy napisać sami. Ja posłużyłem się przerobionym nieco przykładem z oficjalnej strony serwisu. Stwórzmy zatem plik twitter.js z taką oto zawartością:

function przetworzCzas(dodane) {
  var teraz = new Date();
  var roznica = (teraz - dodane)/1000;

  if (roznica < 60) {
    return 'mniej niż minutę temu';
  } else if(roznica < 120) {
    return 'minutę temu';
  } else if(roznica < (60*60)) {
    return (parseInt(roznica / 60)).toString() + ' minut temu';
  } else if(roznica < (120*60)) {
    return 'godzinę temu';
  } else if(roznica < (24*60*60)) {
    return 'około ' + (parseInt(roznica / 3600)).toString() + ' godzin temu';
  } else if(roznica < (48*60*60)) {
    return 'dzień temu';
  } else {
    return (parseInt(roznica / 86400)).toString() + ' dni temu';
  }
}

function twitterCallback(Obiekt) {
        var kodHTML = '';
        var blok = $('twitter');
        for(i = 0; i < Obiekt.length; i++) {
                var date = new Date(Obiekt[i].created_at);
                var czas = przetworzCzas(date);
                kodHTML +=  "<li><span>[ " + czas + " ]</span><br/>" +Obiekt[i].text+"</li>";
        }
        blok.innerHTML = kodHTML;
}

Jak widać oprócz funkcji twitterCallback(); umieściłem także przetworzCzas(), która wyświetli nam nie datę, a czas jaki upłynął od dodania wpisu. W powyższym przykładzie posłużyłem się biblioteką prototype, która nieco ułatwia tworzenie skryptów JS. Jej kod można pobrać z http://jony.jogger.pl/files/prototype.js. W kodzie HTML naszej strony należy umieścić odwołania do tych skryptów. W sekcji <head> umieszczamy kod:

<script type="text/javascript" src="twitter.js"></script>
<script type="text/javascript" src="prototype.js"></script>

Ostatnią rzeczą jaka nam została jest ustalenie miejsca, w którym ma się wyświetlać nasz twitter. W wybrane miejsce w kodzie HTML należy wstawić:

<h2>Twitter</h2>
<ul id="twitter">
</ul>

Można także określić odpowiednie style dla tych elementów, które poprawią wygląd naszego twittera.

Dodany w kategorii JavaScript, AJAX, Techblog

* 2 komentarze

Komentarze

  1. 02 Wrz 2007 | #

    (Komentarz zmodyfikowany 02.09.2007 o 19:13)

    może wyślij skróconą wersję JS do twittera?? ;)

  2. 02 Wrz 2007 | #

    Wysłałem im, niech się cieszą, że mają o połowę krótszy kod :P

Napisz komentarz