Molti web designer e developer si sono ritrovati la sezione dei tweets nei loro siti non funzionanti. In questo articolo descriverò come usare le nuove API per visualizzare i tweet nei siti partendo dai files del plugin jQuery di Gabriele Romanato disponibili qui. Per prima cosa dobbiamo creare un’app nel sito Twitter developer (https://dev.twitter.com/apps). Appena aperta la pagina (Inserendo username e la password dell’account di twitter) basta premere il pulsante “Create new application”. Nella pagina che si apre inseriamo name (nome dell’applicazione), Description e Website ( sito in cui girerà l’applicazione). “Callback URL” lasciatelo pure in bianco.
Ora chekkate “YES” sulla licenza e compilate il captcha e, infine, cliccate su “Create new application”. A questo punto avete creato l’app ma ora dovete creare tutti i codici che vi servono per essere autenticati dall’OAUTH di twitter quindi, nella pagina che si apre subito dopo la creazione dell’app, (la pagina Details) cliccate su “Create my access token” in fondo. Ora andate nella sezione “OAUTH Tool” dove troverete tutti i codici che vi serviranno più avanti. Scaricate i files da qui o nel link in fondo all’articolo (è un file zip) e mettete il file “twitterfeed.php” nella root principale del sito o del tema, lo stesso per la cartella “twitterfeed” mentre i files “jquery.twitterfeed.js.php” e “jquery.twitterfeed.min.js” dentro la cartella dei javascript (la mia è js) Apriamo il files “twitterfeed.php” e modifichiamo la riga “$twitterFeed = new TwitterFeed” inserendo il tuo nome account e, dopo la virgola, il numero di tweet da visualizzare in questo modo:
$twitterFeed = new TwitterFeed('AndreaBaccolini', 5);Ora editiamo il file “TwitterFeed.php” dentro la cartella “twitterfeed” e, saltando le prime 2 righe dopo “class TwitterFeed”, mettiamo i codici che abbiamo messo da parte prima dentro gli apici:
private $consumerKey = 'xxxxxxxxxxxxxxxx'; private $consumerSecret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; private $accessToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'; private $accessTokenSecret = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
Salviamo e apriamo il files “jquery.twitterfeed.js.php” e andiamo alla riga 101 dove troviamo:
(function($) {
$.fn.twitterFeed = function(options) {
var that = this;
var settings = {
url: '< ?php bloginfo('template_directory'); ?>/twitterfeed.php',
cache: false
};Alla riga “url: ‘< ?php bloginfo('template_directory'); ?>/twitterfeed.php’,” dobbiamo inserire il percorso del file twitterfeed.php. Nel mio caso usando un tema di Worpdress ho usato il php altrimenti potete lasciare solo il nome del files poichè è posizionato nella root principale. Poi andate in fondo e modificate la riga 222:
jQuery('#tweets').twitterFeed();Dove “#tweets” sarà l’id o la classe del contenitore dentro cui compariranno i vostri tweet quindi potete dargli il nome che preferite. Ora nel file php dovete inserire questo script se è un tema di WordPress:
< ?php include(TEMPLATEPATH.'/js/jquery.twitterfeed.js.php'); ?>
E questo se è un normale sito:
< ?php include('js/jquery.twitterfeed.js.php'); ?>Naturalmente il files deve essere un “.php” Se invece volete caricare il file “jquery.twitterfeed.js.php” in un file html basta che lo rinominiate in “.js” (cancellate “.php”), togliete tutti i tag “script” e “/script” al suo interno e lo carichiate come un normalissimo javascript (vedi esempio) Attenzione che non ci siano nessun script php all’interno. Questo è tutto ora compariranno i tweet nello spazio da voi selezionato. Un esempio del funzionamento di questa procedura in WordPress la potete vedere nel footer di questo sito. Ciao alla prossima!
DOWNLOAD FILES
Files aggiornati causa fix di un bug che causava errore con gli hashtag di Twitter.
Se volete essere sempre aggiornati iscrivetevi alla discussione tramite link che trovate sotto il form dei commenti. Grazie.
Andrea BaccoliniQuote
ciao, sto cercando di usare il tuo plugin su un mio sito in html (non wordpress) ma mi da’ due errori:
– OPTIONS percorso/twitterfeed.php Origin null is not allowed by Access-Control-Allow-Origin.
– XMLHttpRequest cannot load percorso/twitterfeed.php. Origin null is not allowed by Access-Control-Allow-Origin.
in particolare nella prima voce mi segnala errori sui due file js
AntonelloQuote
Ciao Antonello,
da quello che ho capito non trova il file “twitterfeed.php” perchè, sec me, avrai messo il percorso sbagliato. Se non è un sito in wp prova a guardare come ho fatto nell’esempio:
http://www.andreabaccolini.it/tweet/jquery-twitterfeed.html
Andrea BaccoliniQuote
Non credo sia quello. Ho “studiato” gia’ l’esempio, l’indirizzo di tweeterfeed.php è corretto.
vedendo bene mi da’ errori sui file js/jquery-1.7.1.min.js e js/jquery.twitterfeed.js
AntonelloQuote
Hai cambiato l’indirizzo del jquery? Per l’altro jquery prova ad usare quello che trovi qui
http://www.andreabaccolini.it/tweet/jquery.twitterfeed.js
perchè quello che scarichi dal mio download è stato modificato per andare su wp.
Andrea BaccoliniQuote
Mi vergogno anche a scriverlo, stavo testando il sito in locale senza un server.
ora ho messo tutto on-line e funziona.
Scusa se ti ho fatto perdere tempo. 🙁
AntonelloQuote
NP cose che capitano 😛
Andrea BaccoliniQuote
Ciao Andrea,
bel tutorial con spiegazioni molto dettagliate e precise.
Ho provato a seguirle per implementarle in un progetto su wordpress, pero purtroppo non mi fa visualizzare niente. In pratica: nella pagina internet non viene visualizzato niente. Facendo il debug, nello spazio sulla pagina dove dovrebbero comparire i tweet vedo i due script javascript anzichè vedere la div con id tweets.
Quale potrebbe essere il problema?
Grazie in anticipo!
FabioQuote
Ciao Fabio,
stai guardando il sito in locale od online? Perchè in locale, tramite prgrammi come Wamp, non si vedono i tweets ma solo online. Dovrei vedere la pagina per sapere cosa non va. Se hai seguito alla lettera l’articolo dovrebbe andare.
Andrea BaccoliniQuote
Grazie Andrea per la prontissima risposta!!!
Si l’ho provato in locale con wamp, ancora devo caricare il tutto in remoto. Se pero’ mi dici che è regolare che in locale con il debug restituisce le stringhe dei due script senza generare niente, allora posso stare tranquillo 😉
M’era venuto il dubbio se eventualmente puo verificarsi un errore dalle errate impostazioni di creazione in dev twitter. Nella pagina OAuth tool ho lasciato tutto di default senza alterare nulla tra i quali: request type, request uri e request query. Non penso che cio influiscono. Giusto?
FabioQuote
No non influisce cmq prova a metterlo online e vedi se funziona.
Andrea BaccoliniQuote
Andrea, poi sono riuscito a risolvere!!!
Il problema era dato semplicemente dal fatto che nel sito non avevo rinominato la div con l’id tweets pensando erroneamente che quella div da te menzionata nel tutorial veniva creata automaticamente.
FabioQuote
Ottimo Fabio!
Andrea BaccoliniQuote
Ciao Andrea, intanto ottimo articolo.
Ho provato a fare ogni singola operazione ma in locale riesco a vedere perfettamente il risultato, ma sul server non si vede nulla (penso ci sia qualcosa che blocchi il caricamento).
Se ti è già capitato e mi puoi aiutare 🙂
Grazie
GiuseppeQuote
Ciao Giuseppe, di solito succede l’incontrario: non funziona in locale ma solo online.
Quello che ti posso suggerire e di rivedere i link ai vari file mettendoli anche assoluti (indirizzo completo).
Controlla anche se hai messo tutti i files che servono online.
Guarda i 2 esempi che trovi nell’articolo e prova ad analizzarli forse trovi l’errore.
Andrea BaccoliniQuote
Ti ringrazio per la dritta, riguardo il tutto e ti faccio sapere 🙂
GiuseppeQuote
Ciao Andrea,
ti scrivo perchè sono disperata, da giorni ormai cerco di capire dove sbaglio.
Nel mio sito e precisamente in questa pagina vorrei far comparire i tweet all’interno del box grigio.
Credo d’aver seguito tutte le istruzioni, ma come vedi, al posto dei tweet mi compare il codice.
C’è qualche passaggio che salto forse?
Ah, dimenticavo, il mio sito è ospitato da wp.
Grazie davvero!
Dalila.
DalilaQuote
Ciao Dalila,
l’unica cosa che posso suggerirti e rifare il tutto seguendo passo passo con attenzione.
Potresti anche guardare l’esempio che ho fatto qui e studiartelo bene anche se questo è per semplici siti in html e non per php. Fai attenzione a dove metti i i files e a indicare l’indirizzo giusto magari fallo assoluto (cioè con http://www.etcetc). Mi raccomando l’id del div contenitore dei tweet. Spero di esserti stato d’aiuto.
Andrea BaccoliniQuote
Ciao Andrea, grazie per la celere risposta.
Va bene se, per non confondermi, inserisco tutti i file in una stessa cartella?
Almeno così sono sicura di non sbagliare.
Comunque riprovo di nuovo e ti farò sapere.
Grazie mille!
DalilaQuote
Va bene ma devi stare attenta ai link dei vari files
Andrea BaccoliniQuote
Ciao andrea, eccomi qui.
E’ tutto giusto, ma a quanto ho capito è a causa di tophost e dei relativi permessi che non riesco a far funzionare il codice.
Ti chiedo: c’è un modo pur usando wp, di caricare i file in un sito esterno e richiamare il tutto tramite uno script?
Ti ringrazio ancora e scusami per la perdita di tempo.
Buona serata! 🙂
DalilaQuote
Purtroppo questo non lo so Dalila non ho mai provato. Dovresti chiedere al tuo host di cambiare i permessi.
Andrea BaccoliniQuote
Rimesso online i files da scaricare su un’altro server.
Andrea BaccoliniQuote