Share
Bine ați venit la partea a treia a "Design și codificați o aplicație integrată Facebook". În acest moment, presupun că ați creat HTML și CSS pentru aplicația dvs. Dacă nu, consultați prima intrare din această serie. În această parte, vom trece aplicația noastră la nivelul următor!
În această lecție vom avea grijă de:
Stai așa cu mine, fă-ți o ceașcă de ceai și codificați fericit!
Înainte de a începe conversia HTML-ului nostru în PHP, trebuie să facem câteva din obiectele noastre HTML funcționale. Putem face acest lucru destul de ușor folosind biblioteca jQuery. Dacă nu ați început să utilizați încă biblioteca jQuery, atunci acum este cu siguranță un timp excelent pentru a începe. Este o introducere excelentă în Javascript și în mod sincer nu este prea dificil de utilizat. De fapt, puteți crea câteva efecte minunate cu doar câteva rânduri de cod. În aplicația noastră pe blog, vom folosi jQuery pentru două lucruri. În primul rând, o vom folosi pentru căutarea în filme live și, în al doilea rând, pentru filele de pagină pentru a permite utilizatorilor noștri să aibă o experiență lină în timp ce trec de la o pagină la alta.
Dacă vă amintiți din tutorialul anterior, am inclus un fișier JavaScript în antetul nostru de document HTML. Acum este momentul să creați acel fișier. Deci, săriți în editorul de cod preferat și apelați fișierul "myjava.js“. Începem prin crearea documentului gata. Acest lucru îi spune lui jQuery să încarce tot ce se află în el odată ce DOM este gata să fie manipulat.
Când DOM este gata, ascundem toate filele. Apoi, fiecare pagină se estompează când se face clic pe fila corespunzătoare sau se face "activă". De asemenea, eliminăm activ clasă din file și ascunde tot conținutul celorlalte pagini.
Accentsconagua
var tabContent = $ ('. tab_content'), // Definiți fila ca file variabilă = $ ('ul.tabs li'); // Definiți filele li ca o variabilă tabContent.hide (); // La încărcarea paginii ascunde tot conținutul tuturor filelor tabs.eq (0) .addClass ("activ") show (); // Implicit la prima filă tabContent.eq (0) .show (); // Afișează conținutul tab-urilor implicite // Când utilizatorul face clic pe fila tabs.click (funcția (e) var li = $ (this), // definește li ca variabilă activeTab = li.find ('a' ); // Obțineți valoarea atributului href (clasa) și decolorați în fila corespunzătoare tabs content.removeClass ("active"); // Eliminați clasa activă li.addClass ("activ"); fila selectată tabContent.hide (); // Ascundeți toate celelalte fișiere contentTab.fadeIn (); // Fadeți fila în e.preventDefault ();); Următorul element pentru care vom folosi jQuery este căutarea noastră de filtre. Acest lucru va permite utilizatorilor noștri să-și filtreze rezultatele căutării în timp real pe măsură ce tastează. Acest lucru se face prin luarea valorii în viu a câmpului de formular și filtrarea lui cu tot ce se potrivește în cadrul "posturilor" divs. Filtrul va afișa "postările" div care conțin valoarea și ascunde orice nu face.
// Filtrul de căutare $ (". Căutare") () () var $ this = $ (this), filter = $ this.val (), count = 0; $ (" funcția () var $ this = $ (this); dacă ($ this.text (). căutare (nou RegExp (filtru, "i")) < 0) $this.hide(); else $this.show(); ); $("#filter-count").text(count); ); Acum este momentul să aducem la viață acest fișier static și să începem să tragem datele din Facebook și Feedburner. Acum este probabil momentul potrivit pentru redenumirea fișierului index.html la index.php și descărcați fișierul SDK PHP. Puteți descărca cea mai recentă copie a SDK-ului Facebook de la:
Facebook PHP SDK
Acum trebuie să configurați pagina noastră de pană pentru aplicații Facebook. Deși acest lucru a fost acoperit înainte, Facebook a actualizat recent pagina de configurare a aplicației; așa că este important să treceți prin noua configurație. În primul rând, încărcați index.php la propriul cont de gazduire web. Am încărcat-o pe mine la un subfolder de exemplu. www.yourdomain.com/tut Când ați terminat, puteți configura aplicația vizitând https://developers.facebook.com/apps.
În acest moment, faceți clic pe butonul "creați aplicația nouă" din colțul din dreapta sus. Introduceți numele aplicației și veți fi apoi duși la pagina de configurare. Facebook vă permite să creați multe variante de aplicații - de la desktop la mobil. În cazul nostru, trebuie să alegeți aplicația "Apps on Facebook". Există cinci câmpuri esențiale pe care trebuie să le completați pentru ca aplicația dvs. să funcționeze. Acestea sunt evidențiate în imaginea de mai sus. Odată ce ați făcut acest lucru, mergeți la apps.facebook.com, urmat de orice ați introdus în spațiul de nume al aplicației. În cazul meu, acest lucru a fost "webdesigntuts", astfel încât domeniul meu de aplicație este: http://apps.facebook.com/webdesigntuts/
Când mergeți la adresa dvs. de urgență, ar trebui să vedeți fișierul dvs. index în spațiul din panza de pe Facebook.
După aducerea aplicației pe Facebook, este momentul să tragem datele din graficul Facebook API și să permitem utilizatorilor să se conecteze și să intre în aplicația noastră.
În directorul pentru aplicația noastră, adăugați un dosar nou și numiți-l "pensiune completă'Deschideți folderul SDK pe care l-ați descărcat de la GitHub. În el, ar trebui să găsiți câteva exemple: src și câteva teste. Luați conținutul din src dosar și trageți-l în dvs. pensiune completă pliant. Acesta este un pic de care avem nevoie pentru a vă conecta la Facebook. În a noastră index.php fișier, adăugați codul de mai jos începând cu includerea SDK-ului Facebook de la "pensiune completă'și adăugați ID-ul unic al aplicației și cheia secretă. În codul de mai jos, puteți vedea cum ar trebui să fie setat acest lucru. Suntem, în esență, conectați la Facebook și recuperăm utilizatorul id a persoanei care utilizează aplicația noastră. Dacă utilizatorul a fost autentificat, atunci generăm o variabilă pentru urlul de logout sau, dacă nu, vom genera una pentru adresa URL de conectare.
"ID-ul dvs. de aplicație", "secret" => "Secretul aplicației dvs.", "cookies" => "true",)); // Descărcați aplicația User ID $ user = $ facebook-> getUser (); dacă ($ user) try // Dacă utilizatorul a fost autentificat, continuați $ user_profile = $ facebook-> api ('/ me'); captură (FacebookApiException $ e) error_log ($ e); $ user = null; // Dacă utilizatorul este autentificat, atunci generați variabila pentru URL-ul de logout dacă ($ user) $ logoutUrl = $ facebook-> getLogoutUrl (); ?> getLoginUrl (); ?> Între dacă și altfel , vrem să închidem și să lansăm etichetele PHP, astfel încât să putem introduce html-ul pe care l-am creat mai devreme în pagina PHP. Acum, dacă încărcați pagina în spațiul dvs. web și actualizați panza aplicației Facebook, acum ar trebui să vedeți aplicația. Dacă sunteți conectat, veți vedea; în caz contrar, veți vedea o adresă URL de conectare ca în imaginea de mai jos
„> Deconectare
Am configurat aplicația în cadrul Facebook și am creat un cont de conectare și pentru utilizatorii noștri. Tot ce a mai rămas este să înlocuiți datele fictive cu date reale live.
Aflați mai multe despre YQL.
Primul fragment de date pe care vom trage în aplicația noastră sunt postările din blog. Acest lucru este tras în feed-ul nostru Feedburner RSS. Îl colectăm folosind YQL. Dacă nu ați folosit YQL înainte, atunci ar trebui să încercați cu siguranță. Este foarte simplu de utilizat și flexibilitatea pe care o oferă este minunată. Dacă nu sunteți familiarizați cu ea puteți afla mai multe despre ea aici și aici.
Ceea ce facem în realitate este trimiterea unei cereri către YQL utilizând o sintaxă similară care ar putea fi folosită în MYSQL. Apoi decodificăm datele returnate într-un format JSON lizibil și stocăm-o într-o variabilă astfel încât să putem prelua anumite părți ale mulțime în cadrul postărilor din blog.
Trebuie să facem trei solicitări către YQL. Ele sunt după cum urmează:
Acest lucru trebuie introdus înainte de eticheta PHP de închidere înainte de a începe HTML-ul nostru. Puteți vedea acest lucru demonstrat în codul de mai jos:
// Interogarea YQL pentru a obține postările rezumate Webdesigntuts + din FeedBurner $ yqlurl = "http://query.yahooapis.com/v1/public/yql?q="; $ yqlurl. = urlencode ("selectați * din feed unde url =" http://feeds.feedburner.com/webdesigntuts-summary "LIMIT 10"); $ yqlurl. = "& format = json"; $ yqlfeed = file_get_contents ($ yqlurl, true); $ yqlfeed = json_decode ($ yqlfeed); // Interogarea YQL pentru a obține webdesigntuts + posturi de la feedburner - Avem nevoie de acest lucru pentru comentariile conta numai $ yqlurl2 = "http://query.yahooapis.com/v1/public/yql?q="; $ yqlurl2. = urlencode ("selectați * din feed unde url =" http://feeds.feedburner.com/webdesigntutsplus "LIMIT 10"); $ yqlurl2. = "& format = json"; $ yqlfeed2 = file_get_contents ($ yqlurl2, true); $ yqlfeed2 = json_decode ($ yqlfeed2); // Interogarea YQL pentru a obține categoriile webdesigntuts +. $ yqlurl3 = "http://query.yahooapis.com/v1/public/yql?q="; $ yqlurl3. = urlencode ("SELECT categoria FROM feed WHERE url =" http://feeds.feedburner.com/webdesigntuts-summary "LIMIT 10"); $ yqlurl3. = "& format = json"; $ yqlfeed3 = file_get_contents ($ yqlurl3, true); $ yqlfeed3 = json_decode ($ yqlfeed3); În această etapă, vom face un apel la API-ul grafice Facebook. Este similar cu modul în care am efectuat apelurile către YQL, cu toate acestea, există câteva variații ușoare între cele două. Acest lucru este într-adevăr simplu de făcut și ar trebui să fie cu siguranță o secțiune de cod pe care îl păstrați în folderul dvs. de fragmente, deoarece sunt sigur că va veni la îndemână. Am stabilit o variabilă de preferințe = '0', efectuați apelul și apoi spuneți; dacă mulțime care este returnat conține "plăceri", apoi setați variabila noastră "likes" la numărul de plăceri care a fost returnat.
// Efectuați un apel la api-ul graficului Facebook și decodați json-ul pentru a colecta numărul de plăceri de pe pagina webdesigntuts + facebook $ json_url = 'https: //graph.facebook.com/webdesigntutsplus'; $ json = fișier_get_content ($ json_url); $ json_output = json_decode ($ json); $ likes = 0; dacă ($ json_output-> îi place) $ likes = $ json_output-> îi place;
Acum, că avem toate datele stocate în variabilele PHP, trebuie să le luăm și să le afișăm pe pagina noastră. Pentru postarea noastră pe blog, facem acest lucru prin crearea unui simplu pentru fiecare buclă și utilizare $ hrana pentru animale ca valoare. Putem atunci ecou valorile individuale din JSON mulțime utilizând numele părții pe care o dorim ecou. Consola YQL vă va ajuta să găsiți aceste secțiuni utilizând modul copac.
interogare-> rezultate-> element ca element $) ?>link ";" target = "_ blank">titlu;?>
de creator;?> pe pubDate, 0, -9);?>descriere;?>
link;?> "target =" _ blank "> Citiți mai multe query-> rezultate-> Element [$ i ++] -> Comentarii [1]; ?> Comentarii
În blocul de mai sus, rețineți că avem ecounumărul de comentarii din "$ yqlfeed2“. Secțiunea de comentarii are două părți: urlul comentariului și numărul comentariului. Adresa URL a comentariului este prima partea (0), iar numărul de comentarii este al doilea, partea 1]. Avem nevoie doar de numărul de comentarii. De asemenea, creștem automat elementul prin setarea "$ i = 0,"și apoi folosind"articol [$ i ++]"Prin acest lucru, numărul elementului va crește cu fiecare dată când postul este rupt și va returna numărul de comentarii pentru fiecare post individual.
Un alt punct de reținut este faptul că am folosit o funcție construită în PHP, subtr - substr ($ item-> pubDate, 0, -9). Motivul pentru care am făcut acest lucru se datorează unor personaje ciudate care arată la sfârșitul zilei și timpului. Acest lucru elimină pur și simplu ultimele nouă caractere (-9) și ne lasă data și ora să apară conform așteptărilor.
Ecounumărul de plăceri este simplu; am creat variabila "$ likes"mai devreme, așa că trebuie pur și simplu ecou aceasta. SDK-ul Facebook PHP, de asemenea, creează automat unele variabile pentru noi; din nou, este un caz simplu ecouîn afară. Tot ce trebuie să facem este să înlocuim datele fictive cu datele dinamice.
Oameni ca webdesigntuts+
Bună
Ne bucurăm că te-ai oprit la webdesigntuts +. Sperăm să vă bucurați de blogul nostru
Categorii pe webdesigntuts+
În codul de mai sus, ne purtăm pur și simplu prin interogarea noastră YQL conținută în '$ yqlfeed3“. De asemenea, folosim o altă funcție construită în PHP, str_replace. Utilizăm acest lucru pentru a înlocui orice spații din categoriile noastre cu un "+' semn. Acest lucru este astfel încât nu vom avea legături întrerupte atunci când încercăm să redirecționăm utilizatorul la categoriile de pe Webdesigntuts+.
Primul truc pe care aș vrea să-ți arăt-o ne ajută să facem o problemă în cadrul iframe-ului de canvas Facebook. În setările aplicației dvs. Facebook, o puteți seta astfel încât iframe-ul să fie redimensionat automat pentru a se potrivi cu conținutul dvs. dar, de asemenea, pune o bara de derulare oribil de lângă aplicația dvs. în partea dreaptă a barei laterale Facebook. Acest lucru nu pare prea mare, deci putem rezolva acest lucru cu un simplu bit de JavaScript care poate fi plasat imediat după deschiderea noastră corp etichetă. Acest lucru va redimensiona pânza noastră pentru a se potrivi conținutului, iar bara laterală va fi la extrema dreaptă a Facebook, spre deosebire de aplicația noastră.
Următorul truc pe care aș vrea să vă arăt este că atunci când un utilizator vă accesează prima dată aplicația, acesta va fi rugat să se autentifice sau să-l autorizeze. Mai degrabă decât afișarea pur și simplu a unui link, putem avea o autorizație pop-up Facebook. Știți pe cei despre care vorbesc, sunt sigur că le-ați văzut de un milion de ori. Acest lucru poate fi realizat prin adăugarea unui alt bit de JavaScript după declarația noastră de închidere PHP else.
$ loginUrl = $ facebook-> getLoginUrl (array ('redirect_uri' => $ fbconfig ['appUrl'])); print "> script> top.location.href = '$ loginUrl';";> Deci, asta-i oameni buni! Acest lucru aduce conceptul de "Design și codificare a unei aplicații integrate Facebook" la final. Sper că ai avut parte de multă distracție creând-o așa cum am scris despre asta.
În septembrie, în cadrul Conferinței anuale F8, Facebook a anunțat că tocmai a depășit 800 de milioane de utilizatori anuali. Mod de a merge Facebook! După cum puteți vedea, aceasta este o platformă excelentă pentru promovarea dvs., a mărcii dvs. sau a produsului dvs. Ce modalitate mai bună de a utiliza acest lucru decât prin crearea propriului aspect nativ și simțiți aplicația Facebook. Facebook a anunțat, de asemenea, în aceeași zi, reinventarea profilurilor de utilizatori, numită Cronologie. Cu Timeline vine un mod complet nou pentru ca aplicațiile să fie integrate într-un profil / cronologie a utilizatorilor.
"Filmele pe care le citezi, melodiile pe care le-ai repetat, activitățile pe care le-ai iubit, și acum există o nouă clasă de aplicații sociale care îți permit să îți exprimi cine ești prin toate lucrurile pe care le faci".
Acesta este un moment interesant pentru dezvoltatorii de aplicații! Dacă ați sărit încă, ce așteptați? Nu vă gândiți doar la construirea aplicației următoare, scoateți fundul și construiți-l. Aștept cu nerăbdare să văd ce vă propuneți și cum puteți să luați ceea ce ați învățat și să vă puneți pe voi înșivă. Simțiți-vă liber să lăsați linkuri către aplicațiile și creațiile dvs. în comentariile de mai jos.
Până data viitoare, proiectarea fericită și codarea!
