Afișează update-urile Twitter într-un widget

Cred că un feature destul de… căutat este „cum pun un widget de twitter pe blog/site?” Și oarecum pe bună dreptate, deoarece twitterul capătă din ce în ce mai multă atenție și pe … hai să zicem piața din Ro. Cea mai simplă metodă – dar nu neapărat și cea mai bună – ar fi folosidea widget-ului oficial. Dar hei, unde ar mai fi distracția? Incluzi aproximativ 30kb doar pentru twitter? Uhm… Mie nu mi se pare cea mai fericită alegere.

Prin urmare, dacă ai deja inclus jQuery în pagină (sau orice altă librărie), poți încropi un astfel de widget în câteva linii de cod. Să vedem despre ce este vorba!

Codul html

Codul HTML este foarte simplu: o listă:

<ul id="twitterUpdates">
	<li>Loading...</li>
</ul>

Acel li este necesar din două motive: 1) un ul gol nu ar fi valid; 2) trebuie să înștiințăm utilizatorul cumva că se întâmplă… ceva :)

Următoarele bucăți de cod sunt furate de undeva, dar… Nu prea mai știu de unde. Deși am vaga bănuială că direct de la twitter.

Funcția următoare transformă data din forma „Thu Jun 10 12:00:33 +0000 2010” în ceva mult mai drăguț, de genul „X hours ago”

function relative_time(time_value) {
  var values = time_value.split(" ");
  time_value = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
  var parsed_date = Date.parse(time_value);
  var relative_to = (arguments.length > 1) ? arguments[1] : new Date();
  var delta = parseInt((relative_to.getTime() - parsed_date) / 1000);
  delta = delta + (relative_to.getTimezoneOffset() * 60);

  if (delta < 60) {
    return 'less than a minute ago';
  } else if(delta < 120) {
    return 'about a minute ago';
  } else if(delta < (60*60)) {
    return (parseInt(delta / 60)).toString() + ' minutes ago';
  } else if(delta < (120*60)) {
    return 'about an hour ago';
  } else if(delta < (24*60*60)) {
    return 'about ' + (parseInt(delta / 3600)).toString() + ' hours ago';
  } else if(delta < (48*60*60)) {
    return '1 day ago';
  } else {
    return (parseInt(delta / 86400)).toString() + ' days ago';
  }
}
&#91;/js&#93;

Funcția următoare prelucrează răspunsul JSON venit de la twitter și îl injectează în lista de care am pomenit puțin mai sus.
&#91;js&#93;
function twitterCallback2(twitters) {
  var statusHTML = &#91;&#93;;
  for (var i=0, len=twitters.length; i<len; i++){
    var username = twitters&#91;i&#93;.user.screen_name;
    var status = twitters&#91;i&#93;.text.replace(/((https?|s?ftp|ssh)\:\/\/&#91;^"\s\<\>]*[^.,;'">\:\s\<\>\)\]\!])/g, function(url) {
      return '<a href="'+url+'">'+url+'</a>';
    }).replace(/\B@([_a-z0-9]+)/ig, function(reply) {
      return  reply.charAt(0)+'<a href="http://twitter.com/'+reply.substring(1)+'">'+reply.substring(1)+'</a>';
    });
    statusHTML.push('<li><span>'+status+'</span> <a style="font-size:85%" href="http://twitter.com/'+username+'/statuses/'+twitters&#91;i&#93;.id+'">'+relative_time(twitters[i].created_at)+'</a></li>');
  }
  document.getElementById('twitterUpdates').innerHTML = statusHTML.join('');
}

Nu uita să schimbi USER_ID cu user-ul tău de twitter. De asemenea, acel „3” din coadă reprezintă câte twit-uri vrei să afișezi.

$('#twitterUpdates').rdy(function() {
	$.getScript("http://twitter.com/statuses/user_timeline/USER_ID.json?callback=twitterCallback2&count=3");
});

Despre funcția rdy am povestit un pic aici.
Și gata.

Demo poți vedea în sidebar-ul blogului :)

12 Comentarii to “Afișează update-urile Twitter într-un widget”

  1. De ce un ul cu un li si nu… sa zicem un div cu un span inauntru? nu-i acelasi drac?

    [scuze daca pun intrebari tembele, sunt inca cu suzeta pe partea de programare web]

    PS (si offtopic, scuze) Ai lucrat cumva cu filtre IE? Incerc sa obtin acelasi rezultat pe care il obtin pentru Chrome si Safari cu -webkit-box-reflect (exemplu aici, a doua pagina, prima coloana al doilea rand – reflections). Pentru asta m-am gandit sa folosesc mirror… doar ca nu merge si nu inteleg de ce :-? (sa le rotesc la un anumit unghi merge… desi e putin altfel pentru IE, roteste in jurul coltului, iar transform: rotate(Xdeg) pentru restul browserelor imi roteste in jurul centrului si trebuie alt padding/ margin doar pentru IE ca sa-mi apara pe aceeasi pozitie)

    filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1)
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(mirror=1)"

    Exista vreo modalitate sa obtin un efect similar (reflection) pentru FF/ Opera? (CSS chior)

  2. Staicu Ionuț-Bogdan

    De ce un ul cu un li si nu… sa zicem un div cu un span inauntru? nu-i acelasi drac?

    Păi din moment ce ai o listă cu update-uri, de ce ai folosi un div? :)

    Exista vreo modalitate sa obtin un efect similar (reflection) pentru FF/ Opera? (CSS chior)

    Din câte știu eu, nu prea. Uite aici un script care face cam ce vrei tu :)

  3. Cam cat mi-ar lua spre exemplu daca as vrea sa modific codul astfel incat sa-mi apara separat RT-urile si adresarile ( @nume ) ? Mi s-ar prea interesanta o afisare de genul asta.
    Probabil ar trebui sa sa il fac sa recunoasca elemente precum @ si RT: iar apoi in functie de astea, twittul respectiv sa apara intr-o alta lista si sa fie sters din cea generala, nu?

  4. Staicu Ionuț-Bogdan

    Cristi, la asta mă gândeam în urmă cu câteva ore: cum aș putea elimina RT-urile și mesajele adresate cuiva. Și am ajuns la următoarea concluzie:
    1) ori iei mai mult de 3 twituri (în funcție de activitatea ta pe twitter pot fi 10-30 twitturi) și le prelucrezi cu JS astfel încât să extragi tot ce conține „@nume_user”
    2) faci un fel de… proxy (nu știu dacă ăsta e termenul corect) cu un limbaj server side ce face toată povestea descrisă la punctul 1). După ce face procesarea asta, trimite mai departe JSON-ul curățat.

    Care metodă e mai bună? Păi… Rămâne la aprecierea ta. Pe mine, unul, nu mă deranjează să văd și un RT pe blog :)

  5. Cred ca punctul unu se imbina cu ce am zis si eu. E mult mai rapid si eficient ( cred ). Astea fiind spuse, raman de parere ca este idala java.

  6. Staicu Ionuț-Bogdan

    E mult mai rapid si eficient ( cred )

    Una este să tragi de fiecare dată câte 5-10kb de la Twitter și să-i prelucrezi pe client și alta e să tragi acei 5-10kb o dată la X minute cu PHP (sau orice alt limbaj server side), să-l prelucrezi și să rezulte 1-2kb :)

    Btw, Java nu e JavaScript :)

  7. @Staicu Ionuț-Bogdan – :)) m-am amuzat la partea cu Java nu e JavaScript. Mi-ai zis ceva gen, appletul nu e o clasa.

  8. Staicu Ionuț-Bogdan

    Mi-ai zis ceva gen, appletul nu e o clasa.

    Nu înțeleg comparația asta. Tu vrei să spui că javascript are vreo legătură cu java (alta decât asemănarea de nume?)?

  9. Offf doamne, nu are, asta ziceam si eu! :))

  10. Staicu Ionuț-Bogdan

    Offf doamne, nu are, asta ziceam si eu! :)

    Ok. Atât îți trebuia. Să zici că e acelasi lucru… :twisted:

  11. In afara de informatiile care sunt mai sus, mai sunt si alte chestii in variabila ‘twitters’ ? (de exemplu poza celui care posteaza.. etc) ?

  12. Am gasit singur raspunsul la ultima postare.

    Pur si simplu iei fisierul de json direct din linkul de twitter si afli absolut tot. Avand in vedere informatiile de aici poti customiza functia twitterCallback2 cum doresti :)

    Ex: http://twitter.com/statuses/user_timeline/paul_irish.json

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter