Share
Twitter oriunde este o soluție "one-script-include" de la Twitter pentru a aduce puterea platformei lor de comunicare pe site-ul dvs. Vom construi un mic script jQuery care utilizează Twitter oriunde pentru utilizatorii dvs..
Primul pas în procesul Twitter Anywhere este de a crea o aplicație. Înregistrarea poate fi găsită aici. Singurul domeniu care ar putea provoca orice nivel de confuzie este URL-ul Callback. Acesta va fi folosit atunci când Twitter autentifică utilizatorul; specifică locul în care doriți să trimiteți utilizatorului autentificat pe site-ul dvs. Pentru majoritatea aplicațiilor mai mici, pagina de pornire a site-ului va fi, probabil, suficientă pentru aplicațiile mai mari, dar este posibil să doriți să direcționați utilizatorul înapoi către o zonă care servește conținut adecvat pentru utilizatorii autentificați.
Un aspect important care merită menționat este tipul aplicației. Acum, acest lucru nu va apărea în procesul de creare a aplicației, dar va fi disponibil accesând aplicațiile, găsindu-vă noua aplicație, făcând clic pe fila Setări de lângă Detalii și schimbând butonul radio de la "Numai citire" la "Citire și scriere" "în secțiunile Tipul aplicației.
Pentru a fi sincer, mi-e jenant să admit cât timp a trecut, în timp ce depanarea, înainte să mă gândesc să mă uit aici!
Folosind Twitter oriunde, ne vom concentra acum pe caracteristica Tweet Box. Cutia Tweet oferă o transparență excelentă între site-ul dvs. și Twitter, permițând utilizatorilor să tweet direct în contul lor fără a părăsi site-ul dvs. și, mai important, să continuați să interacționați cu conținutul dvs..
Scriptul jQuery pe care o vom scrie astăzi poate fi ușor adaptat într-un plugin jQuery sau WordPress. Scriptul va detecta utilizatorul subliniind o bucată de text, de exemplu, postarea pe blog, și va afișa un buton "Tweet this". Odată ce utilizatorul dă clic pe acest buton, scriptul va lua textul evidențiat și va apela funcția Tweet Box din Twitter oriunde, inserând textul evidențiat ca corp de tweet.
Utilizatorul poate fie să părăsească tweet-ul așa cum este - cu un link înapoi la pagina pe care sunt pe - sau pot edita orice parte a acestuia înainte de tweeting.
Securitatea este vitală aici; cel mai mic fragment de utilizare incorectă și utilizatorul va revoca accesul în setările lor și nu se va întoarce probabil să dea aplicației dvs. oa doua șansă. Deci, oferiți întotdeauna utilizatorului o previzualizare a exact ceea ce va fi postat în contul său; este, în general, o practică bună să le faceți să apese butonul înainte de a procesa tweet-ul.
Scriptul va permite de asemenea utilizatorului să facă clic pe oricare dintre imaginile dvs. și să obțină același efect Tweet Box. În acest caz special, tweet-ul va face referire la adresa URL directă a imaginii.
După cum puteți vedea mai sus, trebuie să includeți câteva fișiere JavaScript pentru a face pluginul să funcționeze corect.
$ (document) .ready (funcția () );
Vom începe în fișierul nostru JavaScript, conținând totul în cadrul metodei jQuery de pregătire a documentului. Totul se va declanșa după încărcarea completă a DOM, ne salvează de orice erori potențiale.
funcția getSelectionText () var text = ""; dacă (window.getSelection) text = window.getSelection (). toString (); altfel dacă (document.selection && document.selection.type! = "Control") text = document.selection.createRange () text; retur text;
Codul de mai sus vă va permite să luați textul marcat de la utilizator după ce l-ați selectat. Acest cod este o funcție destul de standard și poate fi găsit (și documentat) pe tot parcursul internetului.
Accentsconagua
$ ('. post'). mouseup (functie () $ ('# tweetThis'). Apoi, putem începe să interacționăm cu utilizatorul cu un eveniment de mouse-up. În această pagină particulară de HTML, am creat un div cu o clasă de "post“. Pentru tutorial, țintim doar acest lucru div astfel încât codul să nu ruleze de fiecare dată când utilizatorul se mută pe pagină. Odată ce utilizatorul se mișcă în acest sens div, vom afișa un buton către utilizator care îi permite să tweet textul evidențiat.
$ ( "# Oriunde") draggable ().;
Această metodă utilizează jQuery UI pentru a permite utilizatorului să gliseze poșta Tweet în jurul valorii de timp. Noi nu oferim nici o opțiune, deoarece funcția implicită va fi suficientă pentru ceea ce facem.
$ ('# tweetThis'), faceți clic pe (funcția () $ ('# tbox'). T ("# tbox"). TweetBox (înălțime: 100, lățime: 400, implicitContent: '' '+ $ .trim (text) +' '-' + document.title + '-' window.location.href );); $ ('# oriunde'); arată ();); Aici este locul unde va avea loc carnea funcționalității plug-in-ului nostru. După ce faceți clic pe butonul "Tweet This", vom începe prin golirea conținutului casetei Tweet. Acest lucru permite utilizatorului să evidențieze o altă bucată de text și tweet-ul în locul acestuia.
Următoarea linie va declara o variabilă care să mențină textul selectat al utilizatorului din apelul nostru pentru funcții. Apoi efectuăm o verificare rapidă pentru a determina dacă utilizatorul a selectat vreun text și a continuat cu inițierea Tweet Box.
Din documentația oficială:
"Fișierul JavaScript @Anywhere stabilește un singur obiect global (
twttr). Pentru a utiliza @Anywhere, apelațioriundeși trimiteți un apel invers. Callback-ul va primi o instanță a Clientului API Twitter (numită "T"prin convenție) ca singurul său argument. Toate caracteristicile @Anywhere sunt disponibile ca membri ai Twitter API Client."
Acest lucru înseamnă că puteți apela oricare dintre aceste metode pe Clientul API Twitter ("T"): Auto-linkarea numelor de utilizator Twitter, a hovercards, a butoanelor Urmărire, a casetei Tweet, de conectare la utilizator și înscriere. Aplicația dvs. poate efectua mai multe apeluri către "oriunde", deci nu vă fie teamă de limitarea funcționalității site-ului dvs.!
După cum puteți vedea, vom viza apoi "#tbox", pentru a fi completat cu caracteristica Tweet Box Tweet.După cum ați fi observat, dacă lucrați cu jQuery, folosiți selectori CSS asemănători atunci când interogați DOM.
Dacă ar trebui să sunăm .tweetBox (); fără vreo opțiune, atunci Tweet Box va lua proprietățile din valorile implicite prezentate în Documentație. Noi folosim defaultContent proprietate pentru a insera textul selectat de utilizator într-un Tweet, împreună cu titlul și locația curentă a paginii. Folosim jQuery $ .trim funcția de a scăpa de orice spațiu nedorit din selecția utilizatorului, ceea ce le-ar costa caracterele în Tweet.
Apoi, putem afișa caseta creată Tweet către utilizator, gata pentru aprobarea și tweet-ul!
$ ('img') faceți clic pe (funcția () var url = $ (aceasta) .attr ('src'); twtt.anywhere (funcția (T) 100, lățime: 400, implicitContent: 'Verificați această imagine:' + url);)) $ ('# anywhere'). Codul de mai sus oferă utilizatorului posibilitatea de a tweet o adresă URL directă a imaginii în contul său. Am creat cutia Tweet, exact ca mai înainte, dar folosim "src"din"img'element de data aceasta ca variabila dinamica in loc de textul evidentiat.
Acest lucru ar putea fi ușor adaptat pentru videoclipurile HTML5, dacă doriți să le vizați în locul imaginilor.
$ ('# hide') faceți clic pe (funcția () $ ('# tbox'). ); Codul de mai sus permite pur și simplu utilizatorului să se debaraseze de Tweet Box după ce au tweeted sau dacă își schimbă mintea despre tweeting. Goliți-o div element gata pentru următorul URL text sau imagine selectat.
Acest tip de funcționalitate s-ar potrivi perfect unui blog.
Având acest cod adaptat într-un plugin WordPress ar permite utilizatorilor să citeze ghilimele din articolele dvs., crescând expunerea și răspândind conținutul dvs. pe internet.
URL-ul tweetingului imaginii se va potrivi frumos pe un site de portofoliu de fotografie sau de design web unde utilizatorul vă poate tweet piesele de lucru. Sau, acest script ar putea fi transformat într-un plugin jQuery format corect pentru a fi folosit pe orice site web; static; CMS condus sau Tumblr - posibilitățile sunt nesfârșite.
Platforma Twitter Anywhere este o modalitate fantastică de a păstra funcționalitatea Twitter pe site-ul dvs..
Platforma Twitter Anywhere este o modalitate fantastică de a păstra funcționalitatea Twitter pe site-ul dvs. Din experiența personală, cred că este doar: un strat. Nu m-aș simți confortabil construind o întreagă aplicație cu ea. Documentația este destul de subțire și primul lucru pe care îl puteți observa atunci când îl folosiți este cât de mult are potențialul, cât de multă funcționalitate ar putea fi acolo și cum lipsește parțial chiar acum.
De exemplu, în prezent, puteți să preluați contorul Preferințe al unui utilizator - doar contorul, fără conținut. Această funcționalitate suplimentară ar face Twitter Anywhere să se ridice la nivelul cu API-ul Server Side REST care există deja, alimentând aplicații foarte complexe.
Mult noroc cu această platformă și încercați să găsiți un caz de utilizare interesant pentru unele dintre caracteristicile sale ușor de implementat! Între timp, verificați demo-ul Copybot. Vă mulțumim pentru lectură!
