ANDREA BACCOLINI
Web designer

CSS Design Award nominated

TWEETS NEI SITI CON LE NUOVE API OAUTH 1.1

Argomenti: , ,

Autore: Andrea Baccolini

I tweets nel sito con le API 1.1
Giu
26
2013

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.

create-an-applicationgrey

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

TWEETS NEI SITI CON LE NUOVE API OAUTH 1.1 ultima modifica: 2013-06-26T12:15:35+02:00 da Andrea Baccolini
Avatar for Andrea Baccolini

Articolo scritto o tradotto da Andrea Baccolini

Web designer freelance di Padova.
Specializzato in siti internet moderni, convalidati W3C e responsive.
Realizza temi per il CMS Wordpress. Indicizzazione sui motori di ricerca.

Ultimi articoli della stessa categoria:

Non vi sono altri articoli appartenenti alla stessa categoria.

23 commenti

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

      Quote

  2. Avatar for Antonello Antonello scrive:

    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

      Quote

  3. Antonello:
    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

    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

      Quote

  4. Avatar for Antonello Antonello scrive:

    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

      Quote

  5. Antonello:
    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

    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.

      Quote

  6. Avatar for Antonello Antonello scrive:

    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. 🙁

      Quote

  7. Avatar for Fabio Fabio scrive:

    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!

      Quote

    • 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.

        Quote

      • Avatar for Fabio Fabio scrive:

        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?

          Quote

        • No non influisce cmq prova a metterlo online e vedi se funziona.

            Quote

  8. Avatar for Fabio Fabio scrive:

    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.

      Quote

  9. Avatar for Giuseppe Giuseppe scrive:

    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

      Quote

    • 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.

        Quote

      • Avatar for Giuseppe Giuseppe scrive:

        Ti ringrazio per la dritta, riguardo il tutto e ti faccio sapere 🙂

          Quote

  10. Avatar for Dalila Dalila scrive:

    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.

      Quote

    • 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.

        Quote

      • Avatar for Dalila Dalila scrive:

        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!

          Quote

  11. Dalila:
    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!

    Va bene ma devi stare attenta ai link dei vari files

      Quote

    • Avatar for Dalila Dalila scrive:

      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! 🙂

        Quote

      • Purtroppo questo non lo so Dalila non ho mai provato. Dovresti chiedere al tuo host di cambiare i permessi.

          Quote

  12. Rimesso online i files da scaricare su un’altro server.

      Quote

COMMENTA QUESTO ARTICOLO!

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

84 + = 87

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Andrea Baccolini | Web designer Copyright 2012 - 2024 © Responsive design - Seguimi su Facebook - CF:BCCNDR76P08D325K.