Utilizarea serviciului Twitter @Anywhere în 6 pași

Săptămâna trecută, Twitter a lansat @Anywhere, care, cu doar câteva linii adăugate în codul dvs., poate aduce toate funcționalitățile platformei Twitter pe site-ul dvs. @Anywhere poate permite orice, de la conversia unui nume simplu @ într-un link clicabil, chiar pentru a crea noi tweets direct de pe site-ul dvs. personal. Vă voi arăta exact cum să faceți acest lucru în acest tutorial!

Înainte de a începe, creați o aplicație

Pentru a începe să utilizați @Anywhere, trebuie să aveți o cheie API. Ce? Nu o ai? Nici o problema. Doar du-te aici și înregistrați o nouă cerere (nu-l înregistrați de aici).

Dacă aveți un server local instalat, setați-l la un domeniu (developertutorial.com, de exemplu), deoarece nu va funcționa cu localhost (dacă nu știți cum, consultați acest tutorial, partea de fișier gazdă este deosebit de important).
Dacă nu aveți un server local, lăsați această secțiune necompletată. Amintiți-vă că pentru producție, va trebui să-l setați la domeniul pe care lucrați.

În sfârșit, setați tipul de acces implicit la Read & Write. Este foarte important!

Acum, veți fi redirecționat (ă) la pagina cu setările aplicației. Copiați cheia de consum (cheia API) și începeți să utilizați @Anywhere.

Inclusiv Javascript @ Anywhere

Deschideți noul fișier HTML și, în interiorul tag, include:

Codul dvs. ar trebui să arate astfel:

    @Oriunde     ...

A inlocui APIKey cu cheia API a aplicației pe care ați primit-o în pasul anterior. Parametrul v = 1 este versiunea. Poate că în viitor, Twitter va adăuga noi caracteristici și poate sintaxe noi. Pentru a preveni ruperea codului @Anywhere existent, aceștia vor păstra codul vechi dacă este specificat. Versiunea 1 acceptă fiecare browser major, inclusiv IE6.

După includerea acestui fișier JavaScript, putem accesa twttr obiect, care va invoca oriunde() funcția cu un parametru când @Anywhere este pregătită:

 twttr.anywhere (funcția (twitter) // Acțiuni când @Anywhere este gata);

Parametrul (în acest caz stare de nervozitate) este obiectul pe care îl vom folosi, similar cu cel al lui jQuery $.

Apoi, trebuie să creați o bază HTML. Copiați și inserați următorul cod și plasați-l în eticheta "body".

   Postarea pe blog
  Acesta este un test de test post de blog @ Anywhere by @twitter.
 Dacă v-ați bucurat de acest tutorial, vă rugăm să urmați-mă și să păstrați legătura cu @ NETTUTS pentru mai multă minunată.
 
 
  Comentarii
  @corcholat spune: Un astfel de tutorial grozav! 
 
 @faelazo spune: Ar trebui să urmați și @smashingmag

Acum hai să intrăm.

1. linkifyUsers: Conversia @ ceva în Link-uri

@Anywhere ne permite să convertim @ mențiuni în linkuri. Această funcție este numită linkifyUsers, și este destul de drept înainte: setează elementul HTML pe care doriți să-l convertiți la un link.

Deoarece vrem ca toate denumirile documentului să fie convertite în link-uri, sunăm doar linkifyUsers () funcția în elementul corpului:

 (funcția (twitter) twitter ("corp"). linkifyUsers (););

Așa cum am menționat anterior, parametrul "twitter", în cadrul funcției de apel invers, este asemănător cu aliasul "$" al lui jQuery; f dorim să convertim numerele în link-uri, dar numai cele dintr-o anumită secțiune, putem folosi un selector CSS, după cum se arată mai jos.

 twttr.anywhere (funcția (twitter) twitter (".post") linkifyUsers (););

linkifyUsers () acceptă un obiect ca parametru, cu două proprietăți: numele clasei și succes. Cu numele clasei, puteți specifica o clasă care va fi aplicată atunci când se găsesc mențiunile; De exemplu, ați putea adăuga o clasă "roșie" nesemantică și specificați în CSS:

 .roșu culoare: # f00;

Iată codul.

 ((nume_clasic: "roșu"));;

2. Cărți de vizită: Afișați informații suplimentare despre Hover

hovercards () convertește @mențiuni la linkuri, dar încarcă și o mică sugestie pop-up cu mouseover. Iată un exemplu de utilizare a acestuia.

 twttr.anywhere (funcția (twitter) twitter.hovercards (););

in orice caz, hovercards () este suficient de flexibil pentru a include anumite elemente, chiar dacă acestea nu au o mențiune în ele. În HTML, am legătura "urmați-mă" http://twitter.com/faelazo; dar @unde este suficient de inteligent pentru a converti acest link la o carte de hover. Prin adăugarea unei clase de "hovercard" la eticheta de ancorare, Twitter va ocupa restul!

 twttr.anywhere (funcția (twitter) // Găsiți @mentions și se leagă ca de obicei twitter ("body") hovercards (); / / Hai să găsim elementele care au un hovercard clasa de hovercard ("hovercard"). (nume utilizator: functie (nod) var twitter_regexp = /twitter\.com\/([a-z0-9_]*)\/?(.*)?/gi; daca (node.href.match (twitter_regexp) && (twitter_match = twitter_regexp.exec (node.href))) întoarcere twitter_match [1]; return ";););

nume de utilizator parametrul are o funcție cu un parametru care va fi obiectul găsit (în acest caz nodul). Iată ce se întâmplă în interiorul funcției, linie cu linie.

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

Aceasta este o expresie regulată. Se va potrivi a twitter.com/ șir cu valori alfanumerice și o subliniere.

dacă (node.href.match (twitter_regexp) && (twitter_match = twitter_regexp.exec (node.href)))

Dacă regexp se potrivește cu proprietatea href din elementul nod, atunci setați variabila twitter_match pentru a capta valorile într-un tablou.

returnați twitter_match [1];

Se va returna meciul găsit.

Adăugăm un "return" doar în cazul în care elementul are o clasă, dar nu se referă la acesta twitter.com; astfel încât nu va fi nici o potrivire. Dacă se întoarce fals sau NUL, scriptul aruncă o eroare. Cu un șir gol, acesta afișează o hovercard, dar nu a fost găsit niciun utilizator.

Acum, dacă acest lucru este un pic prea complicat, puteți oricând să simplificați procesul și să adăugați numele de utilizator ca atribut de titlu al etichetei de ancorare.

 urmați-mă

Și întoarce-o nodul„s titlu atribut. Mult mai ușor, corect?

 (username: function (node) return node.title;);

"hovercards" pot fi aplicate oricarui element (chiar div), atata timp cat specifica un nume de utilizator.

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

3. followButton: Invitați să urmați cu doar un singur clic

Butonul de urmărire() va adăuga un buton pentru a urma parametrul nume de utilizator în elementul specificat anterior.

Următorul cod va adăuga un buton pentru a urmări Nettuts + în #principal div.

 (funcția (twitter) twitter ("# principal"). followButton ("nettuts"););

Butonul de urmărire() se așteaptă un parametru: numele de utilizator pe care să îl urmați. Destul de simplu, eh?

4. tweetBox: Tweets de pe site-ul dvs.

tweetBox () va adăuga o casetă în care utilizatorii pot să introducă comentariile lor și să le trimișeze prin intermediul site-ului dvs..
tweetBox poate primi un obiect ca parametru, cu următoarele proprietăți:

tejghea (boolean, implicit true)
Indiferent dacă doriți sau nu să afișați contorul pentru caracterele rămase.
înălţime (număr întreg, implicit 65)
Înălțimea casetei, în pixeli.
lăţime (număr întreg, implicit 515)
Lățimea cutiei, în pixeli.
eticheta (șir, implicit "Ce se întâmplă?")
Textul de deasupra casetei.
defaultContent (șir, implicit nici unul)
Puteți introduce în mod prestabilit adresa URL, o mențiune, o #hashtag etc..
onTweet (funcţie)
Se numește după ce este apăsat butonul tweet. Primeste doua argumente: tweet text simplu si tweet HTML.

O valoare implicită tweetBox poate fi apelat după elementul cu clasa de comentarii cu următorul fragment.

 twttr.anywhere (funcția (twitter) twitter ("comentarii") tweetBox (););

Deci, dacă doriți o etichetă personalizată, un conținut și un apel invers atunci când tweet-ul a fost trimis, utilizați acest cod.

 tweetBox (etichetă: "Ce părere aveți despre acest articol?", implicitContent: "#nettuts", onTweet: funcția (plain, html) ;

onTweet ar putea fi util dacă intenționați să înlocuiți zona de comentarii implicită cu CMS pe care îl utilizați. Încă veți avea nevoie de o bază de date și un tabel pentru a afișa comentariile, nu? Deci, puteți hack CMS un pic și să facă o cerere AJAX cu onTweet eveniment pentru a introduce tweet-ul în baza de date.

5. conectați: conectați un utilizator la aplicația dvs.

După cum probabil ați văzut, ultimele două metode necesită confirmarea pentru a acorda permisiunea pentru aplicație. @Anywhere are o metodă pentru a verifica dacă utilizatorul este conectat la aplicație (nu pe twitter). Puteți utiliza condiționările pentru a afișa anumite elemente sau nu.

Acest fragment va adăuga butonul de conectare din element cu o clasă de comentarii.

 twttr.anywhere (functie (twitter) twitter ("comentarii") connectButton (););

Dacă aveți nevoie de un buton cu o altă dimensiune, puteți trece un obiect literal cu dimensiunea și valoarea proprietății mici, medii, mari sau xmări. Rețineți că valoarea "mediu" este valoarea implicită.

 (dimensiune: 'mare'););

Obiectul Twitter include câteva bunuri suplimentare; unul este utilizator curent, care este un obiect; celălalt este este conectat(), care este o funcție care returnează un boolean. De aici, putem crea câteva afirmații condiționate.

 (twitter) (unde (twitter)) if (twitter.isConnected ()) alertă ('Bine ați venit, sunteți conectat');

Dacă este conectat() se intoarce Adevărat, putem afișa câteva informații despre utilizatori, cum ar fi numele de utilizator (numele_paginei), imaginea profilului (profile_image_url), următorii sau următorii. Iată o listă pentru informațiile pe care aplicația le poate accesa. Să vedem utilizator curent obiect în roundup final.

6. Breviar final: amestecând-o cu toții împreună

Voi modifica div cu clasa de comentarii.

  Comentarii
  @corcholat spune: Un astfel de tutorial grozav! 
 
 @faelazo spune: Ar trebui să urmați și @smashingmag
 
 
  Adauga comentariu

Acum să includeți jQuery pentru a face lucrurile un pic mai ușor. Inserați, între și , următorul cod:

Acum avem un spațiu pentru a adăuga comentarii. Mai întâi, hai să folosim este conectat() condiționată de afișarea unui buton dacă utilizatorul nu este semnat în aplicația noastră; acest buton va fi atașat elementului cu un "adăuga" clasă.

 dacă (twitter.isConnected ()) twitter ("comentarii") connectButton ();

Acum hai să folosim obiectul currentUser al lui Twitter. Acest obiect poate prelua informații cu metoda data (). Deci, fragmentul următor va prelua numele_exemplu al utilizatorului.

 twitter.currentUser.data ( 'SCREEN_NAME');

@Anywhere ne permite să specificăm funcții de apel invers pentru connectButton caracteristică. Ca argument, acceptă un obiect cu două proprietăți: authComplete și Sign out; ambele sunt funcții, atunci când Sign out este invocată, am putea reîmprospăta pagina. Același lucru este valabil pentru authComplete. Să înlocuim connectButton () line cu acest fragment:

 (authComplete: function (user) loc.reload ();, signOut: function () loc.reload (););

Acest lucru este destul de drept: treceți un obiect ca argument, apoi setați ambele Sign out și authComplete funcții pentru reîncărcarea paginii. Rețineți că am renunțat altfel clauza pentru este conectat() condiționată pentru a seta Sign out eveniment.

Apoi, să adăugăm o tweetBox în interiorul condiționată.

 dacă (twitter.isConnected ()) $ (". comments> .add> .author"). html (' '+ twitter.currentUser.data (' screen_name ') +' Sign out'); tweetBox (etichetă: "Ce părere aveți despre acest articol?", defaultContent: "#nettuts");

Dacă utilizatorul este conectat, trebuie să fie un buton de urmărire. Din nou, în condițional:

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

Iată întregul condițional, rotunjind toate caracteristicile @Anywhere.

 dacă (twitter.isConnected ()) $ (". comments> .add> .author"). html (' '+ twitter.currentUser.data (' screen_name ') +' Sign out'); tweetBox (etichetă: "Ce părere aveți despre acest articol?", defaultContent: "#nettuts"); twitter (". comentarii> .add"). followButton ("nettuts");

Concluzie

@Anywhere este evident răspunsul Twitter la Facebook Connect. Ei speră să aducă această platformă la cât mai multe site-uri de pe web; și în timp ce serviciul este încă tânăr, iar documentația ar putea fi cu siguranță îmbunătățită, este cu siguranță promițătoare! Vă rugăm să ne arătați ce ați făcut cu @Anywhere pe propriile dvs. site-uri web!

Cod