Utilizzo del servizio @Anywhere di Twitter in 6 passaggi

La scorsa settimana, Twitter ha rilasciato @Anywhere, che, con solo poche righe aggiunte nel codice, può portare tutte le funzionalità della piattaforma di Twitter nel tuo sito web. @Anywhere può consentire qualsiasi cosa, dalla conversione di un semplice @nomeutente a un link cliccabile, fino alla creazione di nuovi tweet direttamente dal tuo sito personale. Ti mostrerò esattamente come farlo in questo tutorial!

Prima di iniziare, crea un'applicazione

Per iniziare a utilizzare @Anywhere, devi disporre di una chiave API. Che cosa? Non ce l'hai? Nessun problema. Basta andare qui e registrare una nuova applicazione (non registrarla da qui).

Se hai installato un server locale, impostalo su un dominio (developertutorial.com, ad esempio), poiché non funzionerà con il tuo localhost (se non sai come, dai un'occhiata a questo tutorial, la parte del file hosts è particolarmente importante).
Se non si dispone di un server locale, lasciare questa sezione vuota. Ricorda che per la produzione dovrai impostarlo sul dominio su cui stai lavorando.

Infine, imposta il tipo di accesso predefinito su Lettura e scrittura. Questo è molto importante!

Ora verrai reindirizzato alla pagina delle impostazioni dell'applicazione. Copia la chiave del consumatore (chiave API) e iniziamo a utilizzare @Anywhere.

Incluso Javascript di Anywhere

Apri il tuo nuovo file HTML e, all'interno di tag, includi:

Il tuo codice dovrebbe essere simile a:

    @In qualunque posto     ...

Sostituire apikey con la chiave API dell'applicazione che hai ottenuto nel passaggio precedente. Il parametro v = 1 è la versione. Forse in futuro, Twitter aggiungerà nuove funzionalità e forse nuove sintassi. Per evitare di rompere il codice esistente @Anywhere, conserveranno il vecchio codice se specificato. La versione 1 supporta tutti i principali browser, incluso IE6.

Dopo aver incluso questo file JavaScript, possiamo accedere a twttr oggetto, che invocherà il in qualunque posto() funzione con un parametro quando @Anywhere è pronto:

 twttr.anywhere (function (twitter) // Azioni quando @Anywhere è pronto);

Il parametro (in questo caso cinguettio) è l'oggetto che useremo, simile a quello di jQuery $.

Successivamente, dobbiamo creare una base HTML. Copia e incolla il seguente codice e posizionalo all'interno del tag "body".

   Il mio post sul blog
  Questo è un post sul blog di test che prova @Anywhere di @twitter.
 Se ti è piaciuto questo tutorial, ti preghiamo di seguirmi e di rimanere in contatto con @NETTUTS per più suggestioni.
 
 
  Commenti
  @corcholat dice: Un grande tutorial! 
 
 @faelazo dice: Dovresti anche seguire @smashingmag

Ora scaviamo.

1. linkifyUsers: Converti @qualcosa in link

@Anywhere ci consente di convertire @mentions in link. Questa funzionalità è chiamata linkifyUsers, ed è piuttosto semplice: imposta l'elemento HTML che desideri convertire in un link.

Dal momento che vogliamo che tutte le @mentions del documento siano convertite in link, chiamiamo semplicemente il linkifyUsers () funzione nell'elemento body:

 twttr.anywhere (funzione (twitter) twitter ("body"). linkifyUsers (););

Come accennato in precedenza, il parametro "twitter", all'interno della funzione di callback, è molto simile all'alias "$" di jQuery; Se vogliamo convertire @mentions in link, ma solo quelli all'interno di una certa sezione, possiamo usare un selettore CSS, come mostrato di seguito.

 twttr.anywhere (funzione (twitter) twitter (". post"). linkifyUsers (););

linkifyUsers () accetta un oggetto come parametro, con due proprietà: nome della classe e successo. Con nome della classe, puoi specificare una classe da applicare quando vengono trovate le @mentions; quindi, ad esempio, potresti aggiungere una classe "rossa" non esplicita e specificare nel tuo CSS:

 .red color: # f00;

Ecco il codice.

 twttr.anywhere (funzione (twitter) twitter ("body"). linkifyUsers (className: 'red'););

2. hovercards: visualizza informazioni aggiuntive su passaggio del mouse

hovercards () converte @mentions in collegamenti, ma carica anche un piccolo suggerimento a comparsa sul mouseover. Ecco un esempio di base del suo utilizzo.

 twttr.anywhere (funzione (twitter) twitter.hovercards (););

però, I biglietti da visita () è abbastanza flessibile da includere alcuni elementi anche se non contengono un @mention. Nel codice HTML, sto collegando "seguimi" a http://twitter.com/faelazo; ma @anywhere è abbastanza intelligente per convertire questo link in un hovercard. Aggiungendo una classe di "hovercard" al tag di ancoraggio, Twitter gestirà il resto!

 twttr.anywhere (function (twitter) // Trova le @mentions e linkify come al solito twitter ("body"). hovercards (); // Troviamo gli elementi che hanno un hovercard di classe twitter (". hovercard"). (username: function (node) var twitter_regexp = /twitter\.com\/([a-z0-9_]*)\/?(.*)?/gi; if (node.href.match (twitter_regexp) && (twitter_match = twitter_regexp.exec (node.href))) return twitter_match [1]; return ";););

Il nome utente parametro prende una funzione con un parametro che sarà l'oggetto trovato (in questo caso nodo). Ecco cosa succede all'interno della funzione, riga per riga.

var twitter_regexp = /twitter\.com\/([a-z0-9_]*)/gi;

Questa è un'espressione regolare. Corrisponde a a twitter.com/ stringa con valori alfanumerici e un trattino basso.

if (node.href.match (twitter_regexp) && (twitter_match = twitter_regexp.exec (node.href))))

Se regexp corrisponde alla proprietà href dall'elemento node, imposta la variabile twitter_match per acquisire i valori in una matrice.

return twitter_match [1];

Restituirà la corrispondenza trovata.

Aggiungiamo un "ritorno" nel caso in cui l'elemento abbia una classe, ma non si riferisca a twitter.com; quindi non ci sarà alcuna corrispondenza. Se ritorna falso o NULLO, lo script genera un errore. Con una stringa vuota, mostra un hovercard ma senza che l'utente lo trovi.

Ora, se questo è un po 'troppo complicato, puoi sempre semplificare il processo e aggiungere il nome utente come attributo titolo del tag di ancoraggio.

 Seguimi

E solo restituire il nodo'S titolo attributo. Molto più facile, giusto?

 twitter (". hovercard"). hovercards (username: function (node) return node.title;);

"hovercards" può essere applicato a qualsiasi elemento (anche un div), purché specifichi un nome utente.

 twitter ("# main"). hovercards (username: function () return 'therrorcom';);

3. followButton: invito a seguire con un solo clic

followButton () aggiungerà un pulsante per seguire il parametro username nell'elemento precedentemente specificato.

Il codice seguente aggiungerà un pulsante per seguire Nettuts + in #principale div.

 twttr.anywhere (funzione (twitter) twitter ("# main"). followButton ("nettuts"););

followButton () si aspetta un parametro: il nome utente da seguire. Abbastanza semplice, eh?

4. tweetBox: tweet dal tuo sito

tweetBox () aggiungerà una casella in cui gli utenti possono inserire i loro commenti e twittarli tramite il tuo sito.
tweetBox può ricevere un oggetto come parametro, con le seguenti caratteristiche:

contatore (booleano, valore predefinito true)
Indica se mostrare o meno il contatore per i caratteri rimanenti.
altezza (intero, predefinito 65)
L'altezza della scatola, in pixel.
larghezza (intero, predefinito 515)
La larghezza della scatola, in pixel.
etichetta (stringa, predefinito "Che cosa sta succedendo?")
Il testo sopra la scatola.
defaultContent (stringa, nessuna impostazione predefinita)
Puoi inserire per impostazione predefinita l'URL, un @mention, un #hashtag, ecc.
onTweet (funzione)
Si chiama dopo aver premuto il pulsante Tweet. Riceve due argomenti: tweet di testo normale e tweet HTML.

Un valore predefinito tweetBox può essere chiamato dopo l'elemento con la classe commenti con il seguente frammento.

 twttr.anywhere (funzione (twitter) twitter (". comments"). tweetBox (););

Pertanto, se desideri inviare un'etichetta personalizzata, un contenuto e una richiamata quando il tweet è stato inviato, utilizza questo codice.

 twitter (". comments"). tweetBox (label: 'Cosa ne pensi di questo articolo?', defaultContent: '#nettuts', onTweet: function (plain, html) // Azioni quando viene inviato tweet) ;

onTweet potrebbe essere utile se si intende sostituire l'area di commento predefinita con il CMS che si sta utilizzando. Avresti ancora bisogno di un database e una tabella per mostrare i commenti, giusto? In questo modo puoi incidere un po 'il CMS e creare una richiesta AJAX con onTweet evento per inserire il tweet nel tuo database.

5. Connetti: accedi a un utente per la tua applicazione

Come probabilmente avete visto, gli ultimi due metodi richiedono la conferma per concedere l'autorizzazione all'applicazione. @Anywhere ha un metodo per verificare se l'utente è connesso con l'applicazione (non su Twitter). Puoi usare condizionali per mostrare o meno determinati elementi.

Questo snippet aggiungerà il pulsante di connessione nell'elemento con una classe di commenti.

 twttr.anywhere (funzione (twitter) twitter (". comments"). connectButton (););

Se hai bisogno di un pulsante con una dimensione diversa, puoi passare un oggetto letterale con la dimensione della proprietà e il valore small, medium, large o xlarge. Nota che "medio" è il valore predefinito.

 twttr.anywhere (funzione (twitter) twitter (". comments"). connectButton (size: 'large'););

L'oggetto Twitter include alcuni extra extra; uno è utente corrente, che è un oggetto; l'altro è è connesso(), che è una funzione che restituisce un valore booleano. Da qui, possiamo creare alcune dichiarazioni condizionali.

 twttr.anywhere (funzione (twitter) if (twitter.isConnected ()) alert ('Welcome, you are connected'); else twitter (". comments"). connectButton (););

Se è connesso() ritorna vero, possiamo mostrare alcune informazioni dell'utente, come il nome utente (screen_name), l'immagine del profilo (profile_image_url), i follower o i seguenti. Ecco un elenco delle informazioni a cui l'applicazione può accedere. Vediamo il utente corrente oggetto nel riepilogo finale.

6. Riepilogo finale: mescolare tutto insieme

Modificherò il div con la classe dei commenti.

  Commenti
  @corcholat dice: Un grande tutorial! 
 
 @faelazo dice: Dovresti anche seguire @smashingmag
 
 
  Aggiungi un commento

Ora includiamo jQuery per semplificare le cose. Inserisci, tra e , il seguente codice:

Ora abbiamo uno spazio per aggiungere commenti. Per prima cosa, usiamo il è connesso() condizionale per mostrare un pulsante se l'utente non è registrato nella nostra applicazione; questo pulsante sarà aggiunto all'elemento con un "Inserisci" classe.

 if (twitter.isConnected ()) twitter (". comments"). connectButton ();

Ora usiamo l'attuale oggetto Utente di Twitter. Questo oggetto può recuperare informazioni con il metodo data (). Quindi il seguente snippet recupererà lo screen_name dell'utente.

 twitter.currentUser.data ( 'SCREEN_NAME');

@ Anywhere ci consente di specificare le funzioni di callback per connectButton caratteristica. Come argomento accetta un oggetto con due proprietà: authComplete e disconnessione; entrambe sono funzioni, quindi quando disconnessione viene invocato, potremmo aggiornare la pagina. Lo stesso vale per authComplete. Sostituiamo il connectButton () linea con questo snippet:

 twitter (". comments> .add"). connectButton (authComplete: function (utente) location.reload ();, signOut: function () location.reload (););

Questo è piuttosto semplice: passiamo un oggetto come argomento, quindi impostiamo entrambi disconnessione e authComplete funzioni per ricaricare la pagina. Si noti che ho abbandonato il altro clausola per il è connesso() condizionale al fine di impostare il disconnessione evento.

Quindi, aggiungiamo un tweetBox all'interno del condizionale.

 if (twitter.isConnected ()) $ (". comments> .add> .author"). html (' '+ twitter.currentUser.data (' screen_name ') +' | Disconnessione'); twitter (". comments> .add"). tweetBox (label: 'Cosa ne pensi di questo articolo?', defaultContent: '#nettuts');

Se l'utente ha effettuato l'accesso, dovrebbe essere presente un pulsante Seguimi. Di nuovo, all'interno del condizionale:

 twitter (". comments> .add"). followButton ("nettuts");

Ecco l'intero condizionale, arrotondando tutte le funzionalità di @Anywhere.

 if (twitter.isConnected ()) $ (". comments> .add> .author"). html (' '+ twitter.currentUser.data (' screen_name ') +' | Disconnessione'); twitter (". comments> .add"). tweetBox (label: 'Cosa ne pensi di questo articolo?', defaultContent: '#nettuts'); twitter (". comments> .add"). followButton ("nettuts");

Conclusione

@ Ovunque è ovviamente la risposta di Twitter a Facebook Connect. Sperano di portare questa piattaforma sul maggior numero possibile di siti sul web; e mentre il servizio è ancora giovane, e la documentazione potrebbe sicuramente essere migliorata, è decisamente promettente! Per favore mostraci cosa hai fatto con @Anywhere nei tuoi siti web!

Codice