Blog

Tutorial per creare un contatore di seguaci del nostro Twitter

11/01/2009 by Egidio Murru in CSS e XHTML

Come leggo su Downloadblog ormai Twitter è un fenomeno consistente, anche se in Italia è poco noto e non proprio adoperato a dovere.

Legati al crescente aumento di utenti Twitter stanno nascendo servizi d’indotto di un certo interesse, come quello di Twittercounter, il quale permette a tutti di visualizzare la popolarità del proprio utente, confrontarla con altri e persino generare un banner da integrare su siti web ed affini; ma  riguardo a quest’ultima opzione possiamo decidere di adottare una soluzione tutta nostra, e per fare ciò abbiamo bisogno di uno sfondo attinente a Twitter, un po’ di PHP e del CSS.

Per quanto riguarda l’immagine su Hongkiat esiste l’imbarazzo della scelta; ho preferito quelli di Randa Clay perché si prestano perfettamente allo scopo, inoltre, con pochissimo tempo in più e un po’ di Photoshop, l’ho resa perfetta per le mie esigenze.

A questo punto abbiamo bisogno di PHP e CSS per il nostro lavoro: una class avrà il compito di trasformare un XML output proveniente dall’account Twitter all’interno di una array che stamperà il tutto.

L’unica informazione di cui necessitiamo è il nostro numero d’identificazione all’interno del circuito Twitter, e questo elemento non è reso in chiaro all’interno del sito. Comunque si può ovviare facilmente a questo inconveniente adoperando un semplice accorgimento: recati sulla pagina del tuo account e sul fondo, in basso a sinistra, è riportato un bottone con la scritta RSS, cliccandoci sopra ci si collega ad un particolare indirizzo, ebbene, all’interno di tale indirizzo è racchiuso il nostro id di Twitter, ed è quello che ho evidenziato in grassetto.

http://twitter.com/statuses/user_timeline/18307571.rss

Questo numero è da riportare nel vostro codice PHP, e adesso vediamo come funziona:

include('xml2array.php');
include('twitter.lib.php');
$user = 'tuousername';
$password = 'tuapassword';

$twitter = new Twitter($user, $password);

$friends = $twitter->showUser("xml",'18307571');
$xml=new XML2Array();
$arr=$xml->parse($friends);
$followers=$arr['user']['followers_count']['value'].' mi seguono';

Sostituendo tutti i valori richiesti otteniamo un file PHP il quale avrà il compito di stampare il numero di persone che ci seguono su Twitter. A questo punto lavoreremo su div che conterrà questo risultato abbinato alla nostra immagine.

<div>
<a href="http://www.twitter.com/tuonickname" target="_blank" style="text-decoration:none;"><div class="twitter" id="tell_followers"><?=$followers?></div></a>
</div>

Tutto questo avrà bisogno del perfezionamento del CSS per rendere al meglio:

.twitter{
color:#808080;
font-family:Tahoma;
font-size:14px;
font-weight:bold;
background:url(“twitter_bg.png”) no-repeat;
height:72px;
width:154px;
padding:45px 0 0 55px;
text-decoration:none;
cursor:pointer;
}

Questo non farà altro che controllare l’aspetto e dove verrà visualizzata la scritta ed in che formato, svolgerà il suo dovere, dare lo stile ad un contenuto.

Si può visualizzare un esempio funzionante oppure scegliere di scaricare il pacchetto con all’interno il file in formato PSD e i file in PHP che permettono il tutto.

P.S. Mi sono iscritto da poco, ma ho notato che mi seguono in pochi, speriamo che questo tutorial modifichi la situazione

Aggiornamento

Elia mi fa notare come sia possibile anche far visualizzare l’ultimo twit ( o tweet ?) pubblicato utilizzando l’ultima versione dello Zend Framework e le API rilasciate da Twitter; per maggiori informazioni vi rimando al suo blog con i dettagli.