Share
Velkommen til del tre av "Design and Code an Integrated Facebook App." På dette punktet antar jeg at du har opprettet HTML og CSS for appen din. Hvis ikke, så referer til den første oppføringen i denne serien. I denne delen skal vi ta vår app til neste nivå!
I denne leksjonen tar vi vare på:
Så hold deg til meg, lag deg en kopp te og lykkelig koding!
Før vi begynner med å konvertere HTML til PHP, må vi gjøre noen av våre HTML-objekter funksjonelle. Vi kan gjøre dette ganske enkelt ved hjelp av jQuery-biblioteket. Hvis du ikke har begynt å bruke jQuery-biblioteket ennå, er det nå en god tid å starte. Det er en god introduksjon til Javascript og sannferdig er ikke for vanskelig å bruke. Faktisk kan du lage noen flotte effekter med bare noen få linjer med kode. I vår bloggapp, skal vi bruke jQuery for to ting. For det første skal vi bruke det til vårt levende filtersøk, og for det andre, for våre sidetabeller å la brukerne ha en jevn opplevelse som de overgår fra side til side.
Hvis du husker fra forrige veiledning, inkluderte vi en JavaScript-fil i HTML-dokumenthodet. Nå er det på tide å lage den filen. Så hopp inn i favorittkodeditoren din, og ring filen 'myjava.js'. Vi begynner med å lage dokumentet klar. Dette forteller jQuery å laste alt inn i det når DOM er klar til å bli manipulert.
Når DOM er klar, skjuler vi alle fanene. Vi forsvinner deretter hver side når den tilhørende kategorien klikkes på eller gjøres aktiv. Vi fjerner også aktiv klasse fra fanene og skjul alt innholdet på de andre sidene.
Accentsconagua
var tabContent = $ ('. tab_content'), // Definer fanen som en variabelfaner = $ ('ul.tabs li'); // Definer fanene li som en variabel tabContent.hide (); // Last på siden skjul alt innholdet i alle fanene tabs.eq (0) .addClass ("active"). Show (); // Standard til den første kategorien tabContent.eq (0) .show (); // Vis standard faner innhold // Når brukeren klikker på fanen tabs.click (funksjon (e) var li = $ (dette), // definer denne li som en variabel activeTab = li.find ('a' ); // Få href's attributt verdi (klasse) og fade i tilhørende faner innhold tabs.removeClass ("aktiv"); // Fjern den aktive klassen li.addClass ("aktiv"); // Legg til den aktive kategorien til den valgte kategorien tabContent.hide (); // Skjul alt annet faneinnhold activeTab.fadeIn (); // Fade fanen i e.preventDefault ();); Det neste elementet vi skal bruke jQuery for, er vårt filtersøk. Dette gjør det mulig for brukerne å filtrere søkeresultatene i sanntid mens de skriver. Dette gjøres ved å ta den levende verdien av skjemafeltet og filtrere den med alt som samsvarer med våre "innlegg" divs. Filteret vil da vise "innleggene" div som inneholder verdien og skjuler noen som ikke gjør det.
// Filtrer Søk $ (". Søk"). Nøkkel opp (funksjon () var $ this = $ (dette), filter = $ this.val (), count = 0; $ (". Post"). funksjon () var $ this = $ (dette); hvis ($ this.text (). søk (nytt RegExp (filter, "jeg")) < 0) $this.hide(); else $this.show(); ); $("#filter-count").text(count); ); Nå er det på tide å få denne statiske filen til liv og begynne å trekke inn data fra Facebook og Feedburner. Nå er det nok en god tid å endre navn på filen din fra index.html til index.php og last ned PHP SDK. Du kan laste ned den nyeste kopien av Facebooks PHP SDK fra:
Facebook PHP SDK
Nå må vi nå sette opp vår Facebook-lerretsside. Selv om dette har blitt dekket tidligere, har Facebook nylig oppdatert sin appoppsettingsside; så det er viktig å gå gjennom det nye oppsettet. For det første, last opp index.php til din egen web hosting konto. Ive lastet opp min til en undermappe f.eks. www.yourdomain.com/tut Når du er ferdig, kan du konfigurere appen din ved å gå til https://developers.facebook.com/apps.
På dette tidspunktet klikker du på knappen 'Opprett ny app' øverst til høyre. Skriv inn navnet på appen din, så blir du tatt til oppsettsiden. Facebook lar deg lage mange variasjoner av programmer - fra skrivebord til mobil. I vårt tilfelle må vi velge "App på Facebook". Det er fem viktige felt du må fylle ut for at appen skal kunne fungere. De er uthevet i bildet ovenfor. Når dette har blitt gjort, hvis du går til apps.facebook.com, etterfulgt av hva du skrev inn i "app namespace." I mitt tilfelle var dette "webdesigntuts", så min app domene er: http://apps.facebook.com/webdesigntuts/
Når du går til webadressen din, bør du se indeksfilen din på lerretet på Facebook.
Etter å ha hentet appen til Facebook, er det nå på tide å trekke inn data fra Facebook graph API og la folk logge inn og ut av appen vår.
I katalogen for appen vår legger du til en ny mappe og kaller den 'fb'Åpne SDK-mappen du lastet ned fra GitHub. I det bør du finne et par eksempler: src og noen tester. Ta innholdet fra src mappe og dra den inn i din fb mappe. Dette er litt vi trenger for å koble til Facebook. I vår index.php fil, legg til koden nedenfor og begynn med å inkludere Facebook SDK fra vår "fb'-mappen, og legg til din unike app-ID og hemmelig nøkkel. I koden nedenfor kan du se hvordan dette skal settes opp. Vi knytter hovedsakelig til Facebook og henter brukeren id av personen som bruker vår app. Hvis brukeren har blitt autentisert, genererer vi en variabel for logoutadressen, eller hvis de ikke har det, genererer vi en for påloggingsadressen.
'Din app ID', 'hemmelig' => 'App hemmelig', 'cookies' => 'true',))); // Få appen Bruker ID $ user = $ facebook-> getUser (); hvis ($ bruker) prøv // Hvis brukeren er autentisert, fortsett deretter $ user_profile = $ facebook-> api ('/ me'); fangst (FacebookApiException $ e) error_log ($ e); $ user = null; // Hvis brukeren er autentisert, generer du variabelen for logoutadressen hvis ($ bruker) $ logoutUrl = $ facebook-> getLogoutUrl (); ?> getLoginUrl (); ?> I mellom hvis og ellers uttalelse, vi vil lukke og starte PHP-kodene, slik at vi kan sette inn vår html som vi opprettet tidligere til PHP-siden. Nå, hvis du laster opp siden til webområdet ditt og oppdaterer Facebook-lerretet, bør du nå kunne se appen. Hvis du er logget inn vil du se den; ellers ser du en påloggingsadresse som i bildet nedenfor
"> Logg
Vi har satt opp vår app i Facebook og har opprettet en pålogging og ut for brukerne våre. Alt som er igjen er å erstatte våre dummy data med ekte live data.
Lær mer om YQL.
Den første delen av dataene vi kommer til å trekke inn i vår app, er blogginnleggene. Dette er trukket inn fra vår Feedburner RSS-feed. Vi samler det ved hjelp av YQL. Hvis du ikke har brukt YQL før, bør du definitivt prøve den ut. Det er super enkelt å bruke og fleksibiliteten som den tilbyr, er fantastisk. Hvis du ikke er kjent med det, kan du lære mer om det her og her.
Det vi egentlig gjør er å sende en forespørsel til YQL ved hjelp av lignende syntaks som kan brukes i MYSQL. Vi dekoder deretter dataene som returneres til et JSON-lesbart format, og lagrer det i en variabel slik at vi kan hente bestemte deler av matrise i våre blogginnlegg.
Vi må gjøre tre forespørsler til YQL. De er som følger:
Dette må settes inn før den avsluttende PHP-taggen før HTML-koden starter. Du kan se dette demonstrert i koden nedenfor:
// YQL-spørringen for å få Webdesigntuts + sammendragspostene fra FeedBurner $ yqlurl = "http://query.yahooapis.com/v1/public/yql?q="; $ yqlurl. = urlencode ("velg * fra feed der url =" http://feeds.feedburner.com/webdesigntuts-summary "LIMIT 10"); $ yqlurl. = "& format = json"; $ yqlfeed = file_get_contents ($ yqlurl, true); $ yqlfeed = json_decode ($ yqlfeed); // YQL-spørringen for å få webdesigntuts + innlegg fra feedburner - Vi trenger dette fordi kommentarene bare teller $ yqlurl2 = "http://query.yahooapis.com/v1/public/yql?q="; $ yqlurl2. = urlencode ("velg * fra feed der url =" http://feeds.feedburner.com/webdesigntutsplus "LIMIT 10"); $ yqlurl2. = "& format = json"; $ yqlfeed2 = file_get_contents ($ yqlurl2, true); $ yqlfeed2 = json_decode ($ yqlfeed2); // YQL spørringen for å få webdesigntuts + kategorier. $ yqlurl3 = "http://query.yahooapis.com/v1/public/yql?q="; $ yqlurl3. = urlencode ("SELECT category 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); På dette stadiet skal vi ringe til Facebook-grafen API. Det ligner på hvordan vi ringte til YQL, men det er noen få svingninger mellom de to. Dette er veldig enkelt å gjøre, og bør definitivt være en del av koden du holder i din utdragsmappe som jeg er sikker på at det kommer til å være nyttig. Vi setter en variabel av liker å = '0', ringe og si så; hvis matrise som er returnert inneholder "liker", og sett så vår variabel til antall liker som ble returnert.
// Ring til facebook-grafen api og avkod jsonen for å samle antall liker fra webdesigntuts + facebook side $ json_url = 'https: //graph.facebook.com/webdesigntutsplus'; $ json = file_get_contents ($ json_url); $ json_output = json_decode ($ json); $ liker = 0; hvis ($ json_output-> liker) $ likes = $ json_output-> liker;
Nå som vi har alle våre data lagret i PHP-variabler, må vi ta disse dataene og vise den på vår side. For vårt blogginnlegg gjør vi dette ved å lage en enkel for hver loop og bruk $ fôr som verdien. Vi kan da ekko ut individuelle verdier fra vår JSON matrise ved å bruke navnet på den delen vi ønsker å ekko. YQL-konsollen skal hjelpe deg med å finne disse delene ved å bruke tremodusen.
spørring-> resultater-> element som $ element) ?>lenke;?> "target =" _ blank ">Tittel;?>
av skaperen;?> på pubDate, 0, 9);?>beskrivelse;?>
link;?> "target =" _ blank "> Les mer query-> resultater-> element [$ i ++] -> kommentarer [1]; ?> Kommentarer
I ovennevnte blokk med kode, merk at vi har ekkoed ut antall kommentarer fra '$ yqlfeed2'. Kommentarseksjonen har to deler: Kommentar-URL, og kommentarnummer. Kommentaren url er den første del (0), og antall kommentarer er det andre, del 1]. Vi krever bare antall kommentarer. Vi automatiserer også automatisk varen ved å sette '$ i = 0,'og deretter bruke'element [$ i ++]'Ved å gjøre dette øker varenummeret hver gang innlegget sløyfes, og returnerer antall kommentarer for hvert enkelt innlegg.
Et annet poeng å merke seg er at vi har brukt en innebygd PHP-funksjon, subtr - substr ($ element-> pubDate, 0, -9). Grunnen til at vi har gjort dette skyldes noen merkelige utseende tegn på slutten av vår dato og klokkeslett. Dette fjerner bare de siste ni tegnene (-9), og la vår dato og klokkeslett vises som forventet.
EkkoDet er enkelt å finne antall liker. Vi opprettet variabelen, '$ liker'tidligere, så vi trenger bare å ekko den. Facebook PHP SDK lager også automatisk noen variabler for oss; igjen er det et enkelt tilfelle av ekkoing ut. Alt vi trenger å gjøre er å erstatte våre dummy-data med de dynamiske dataene.
Folk som webdesigntuts+
Hei
Vi er glade for at du stoppet ved webdesigntuts +. Vi håper du nyter vår blogg
Kategorier på webdesigntuts+
I den ovennevnte koden slår vi bare gjennom vår YQL-spørring som finnes i "$ yqlfeed3'. Vi bruker også en annen innebygd PHP-funksjon, str_replace. Vi bruker dette til å erstatte noen mellomrom i kategoriene våre med en '+'tegn. Dette er slik at vi ikke vil ha ødelagte koblinger når vi forsøker å omdirigere brukeren til kategoriene på Webdesigntuts+.
Det første trikset jeg vil vise deg, hjelper oss med å få en feil i Facebook-lerret iframe. I innstillingene for Facebook-apper kan du sette det slik at iframe automatisk endres for å passe til innholdet ditt. Det setter imidlertid også en fryktelig rullepanel ved siden av appen til høyre for Facebooks sidebjelke. Dette ser ikke ut til stor, så vi kan løse dette med en enkel bit av JavaScript som kan plasseres like etter åpningen kropp stikkord. Dette vil endre størrelsen på lerretet vårt slik at det passer til innholdet, og sidebjelken vil være helt til høyre på Facebook i motsetning til vår app.
Det neste trikset jeg vil gjerne vise deg er, når en bruker først besøker appen din, blir de bedt om å logge inn / autorisere. I stedet for å bare vise en lenke, kan vi få en Facebook popup autorisasjon. Du kjenner de jeg snakker om, jeg er sikker på at du har sett dem en million ganger. Dette kan oppnås ved å legge til en annen bit av JavaScript etter vår avsluttende PHP andre setning.
$ loginUrl = $ facebook-> getLoginUrl (array ('redirect_uri' => $ fbconfig ['appUrl'])); skriv ut "> script> top.location.href = '$ loginUrl';";> Så det er det folkens! Dette bringer vår "Design and Code an Integrated Facebook App" -serien til slutt. Jeg håper du har hatt så mye moro å skape det som jeg har skrevet om det.
I september, på den årlige F8-konferansen, annonserte Facebook at de bare hadde overgått 800 millioner årlige brukere. Måten å gå Facebook! Som du kan se, er dette en flott plattform for å markedsføre deg selv, merkevaren eller produktet. Hvilken bedre måte å bruke dette på enn ved å lage ditt eget innfødte utseende og følg Facebook-app. Facebook kunngjorde også, på samme dag, gjenoppretting av brukerprofiler, kalt tidslinje. Med tidslinjen kommer en helt ny ekstra måte for apper som skal integreres i en brukerprofil / tidslinje.
"Filmer du citerer. Sangene du har på å gjenta. Aktiviteten du elsker. Nå er det en ny klasse sosiale programmer som lar deg uttrykke hvem du er gjennom alle de tingene du gjør."
Dette er en spennende tid for oss app-utviklere! Hvis du ennå har hoppet inn, hva venter du på? Ikke bare tenk på å bygge neste app, gå av rumpa og bygge den. Jeg ser frem til å se hva du møter og hvordan du kan ta det du har lært, og sette din egen spinn på den. Du er velkommen til å legge igjen linker til appene dine og kreasjoner i kommentarene nedenfor.
Inntil neste gang, glad design og koding!
