Share
Benvenuti alla terza parte di "Progettare e codificare un'app di Facebook integrata". A questo punto, presumo che tu abbia creato HTML e CSS per la tua app. In caso contrario, fare riferimento alla prima voce di questa serie. In questa parte, porteremo la nostra app al livello successivo!
In questa lezione, ci occuperemo di:
Quindi resta con me, preparati una tazza di tè e una buona programmazione!
Prima di iniziare a convertire il nostro HTML in PHP, dobbiamo rendere funzionali alcuni dei nostri oggetti HTML. Possiamo farlo abbastanza facilmente usando la libreria jQuery. Se non hai ancora iniziato a utilizzare la libreria jQuery, ora è sicuramente un ottimo momento per iniziare. È un'ottima introduzione a Javascript e, sinceramente, non è troppo difficile da usare. In effetti, puoi creare alcuni fantastici effetti con solo poche righe di codice. Nella nostra app per blog, useremo jQuery per due cose. In primo luogo, lo useremo per la nostra ricerca di filtri live e, in secondo luogo, per le nostre schede di pagina per consentire ai nostri utenti di vivere un'esperienza fluida mentre passano da una pagina all'altra.
Se ricordi dal tutorial precedente, abbiamo incluso un file JavaScript nella nostra intestazione del documento HTML. Ora è il momento di creare quel file. Quindi entra nel tuo editor di codice preferito e chiama il file 'myjava.js'. Iniziamo creando il documento pronto. Questo dice a jQuery di caricare tutto al suo interno una volta che il DOM è pronto per essere manipolato.
Quando il DOM è pronto, nascondiamo tutte le schede. Dopodiché svaniamo ogni pagina quando si fa clic sulla scheda corrispondente o su "attiva". Rimuoviamo anche il attivo classe dalle schede e nascondere tutto il contenuto delle altre pagine.
Accentsconagua
var tabContent = $ ('. tab_content'), // Definire la scheda come una variabile tabs = $ ('ul.tabs li'); // Definire le schede li come variabile tabContent.hide (); // Al caricamento della pagina nascondi tutti i contenuti di tutte le schede tabs.eq (0) .addClass ("attivo"). Show (); // Predefinito alla prima scheda tabContent.eq (0) .show (); // Mostra il contenuto delle schede predefinite // Quando l'utente fa clic sulla scheda tabs.click (function (e) var li = $ (this), // definisce questo come variabile activeTab = li.find ('a' // Trova il valore dell'attributo href (classe) e dissolvenza nel contenuto delle schede corrispondenti tabs.removeClass ("attivo"); // Rimuovi la classe attiva li.addClass ("attivo"); // Aggiungi la scheda attiva a la scheda selezionata tabContent.hide (); // Nascondi tutti gli altri contenuti della scheda activeTab.fadeIn (); // Dissolvenza della scheda in e.preventDefault ();); Il prossimo oggetto che useremo per jQuery è la nostra ricerca di filtri. Ciò consentirà ai nostri utenti di filtrare i loro risultati di ricerca in tempo reale mentre scrivono. Questo viene fatto prendendo il valore dal vivo del campo del modulo e filtrandolo con qualsiasi cosa corrisponda ai nostri "post" divS. Il filtro mostrerà i "post" div che contengono il valore e nascondono quelli che non lo sono.
// Ricerca filtro $ (". Ricerca"). Keyup (function () var $ this = $ (this), filter = $ this.val (), count = 0; $ (". Post"). Each ( function () var $ this = $ (this); if ($ this.text (). search (new RegExp (filter, "i")) < 0) $this.hide(); else $this.show(); ); $("#filter-count").text(count); ); Ora è il momento di dare vita a questo file statico e iniziare a inserire dati da Facebook e Feedburner. Ora è probabilmente un buon momento per rinominare il tuo file da index.html a index.php e scarica l'SDK PHP. Puoi scaricare l'ultima versione dell'SDK PHP di Facebook da:
Facebook PHP SDK
Ora dobbiamo ora configurare la pagina di canvas dell'app Facebook. Sebbene questo sia già stato trattato in precedenza, Facebook ha recentemente aggiornato la pagina di configurazione dell'app; quindi è importante passare attraverso la nuova configurazione. Innanzitutto, carica il index.php al tuo account di hosting web. Ho caricato il mio in una sottocartella es. www.yourdomain.com/tut Al termine, puoi configurare la tua app visitando https://developers.facebook.com/apps.
A questo punto, fai clic sul pulsante "crea nuova app" nell'angolo in alto a destra. Inserisci il nome della tua app e verrai indirizzato alla pagina di configurazione. Facebook ti consente di creare molte varianti di app, dal desktop al mobile. Nel nostro caso, dobbiamo scegliere l'app su Facebook. Ci sono cinque campi essenziali che devi compilare affinché la tua app funzioni. Sono evidenziati nell'immagine sopra. Una volta che questo è stato fatto, se vai su apps.facebook.com, seguito da quello che hai inserito nello spazio dei nomi dell'app. Nel mio caso, questo era "webdesigntuts", quindi il mio dominio dell'app è: http://apps.facebook.com/webdesigntuts/
Quando vai al tuo URL, dovresti vedere il tuo file di indice all'interno dell'area di disegno su Facebook.
Dopo aver portato l'app su Facebook, è ora di inserire i dati dall'API del grafico di Facebook e consentire alle persone di accedere e uscire dalla nostra app.
Nella directory della nostra app, aggiungi una nuova cartella e chiamala 'fb'Apri la cartella SDK che hai scaricato da GitHub. In esso, dovresti trovare un paio di esempi: lo src e alcuni test. Prendi il contenuto dal src cartella e trascinalo nel tuo fb cartella. Questo è il bit di cui abbiamo bisogno per connettersi a Facebook. Nel nostro index.php file, aggiungi il codice seguente iniziando con incluso l'SDK di Facebook dal nostro 'fb'cartella e aggiungi l'ID app univoco e la chiave segreta. Nel codice qui sotto, puoi vedere come dovrebbe essere configurato. Ci stiamo essenzialmente connettendo a Facebook e recuperando l'utente id della persona che sta usando la nostra app. Se l'utente è stato autenticato, allora stiamo generando una variabile per l'url di logout o, in caso contrario, ne stiamo generando uno per l'url di accesso.
'Your App ID', 'secret' => 'Your App Secret', 'cookies' => 'true',)); // Ottieni l'ID utente dell'app $ user = $ facebook-> getUser (); if ($ user) try // Se l'utente è stato autenticato, procedi $ user_profile = $ facebook-> api ('/ me'); catch (FacebookApiException $ e) error_log ($ e); $ utente = null; // Se l'utente è autenticato, genera la variabile per l'URL di disconnessione se ($ utente) $ logoutUrl = $ facebook-> getLogoutUrl (); ?> getLoginUrl (); ?> Tra il Se e altro dichiarazione, vogliamo chiudere e avviare i tag PHP in modo che possiamo inserire il nostro html che abbiamo creato in precedenza nella pagina PHP. Ora se carichi la tua pagina nel tuo spazio web e aggiorni la tela dell'app Facebook, dovresti essere in grado di vedere l'app. Se sei loggato lo vedrai; altrimenti, vedrai una url di accesso come nell'immagine qui sotto
"> Esci
Abbiamo configurato la nostra app su Facebook e creato un login e una uscita per i nostri utenti. Non resta che sostituire i nostri dati fittizi con dati reali in tempo reale.
Ulteriori informazioni su YQL.
Il primo bit di dati che inseriremo nella nostra app sono i post del blog. Questo è ottenuto dal nostro feed RSS di Feedburner. Lo raccogliamo usando YQL. Se non hai già usato YQL, dovresti provarlo definitivamente. È super semplice da usare e la flessibilità che offre è eccezionale. Se non lo conosci, puoi saperne di più qui e qui.
In pratica, stiamo inviando una richiesta a YQL utilizzando una sintassi simile che potrebbe essere utilizzata in MYSQL. Decodifichiamo quindi i dati che vengono restituiti in un formato leggibile JSON e li memorizziamo in una variabile in modo da poter recuperare parti specifiche del schieramento all'interno dei nostri post sul blog.
Dobbiamo fare tre richieste a YQL. Sono come segue:
Questo deve essere inserito prima del tag PHP di chiusura prima dell'avvio del nostro codice HTML. Puoi vedere questo dimostrato nel codice qui sotto:
// La query YQL per ottenere i post di Webdesigntuts + summary da FeedBurner $ yqlurl = "http://query.yahooapis.com/v1/public/yql?q="; $ yqlurl. = urlencode ("seleziona * dal feed dove url =" http://feeds.feedburner.com/webdesigntuts-summary "LIMIT 10"); $ yqlurl. = "& format = json"; $ yqlfeed = file_get_contents ($ yqlurl, true); $ yqlfeed = json_decode ($ yqlfeed); // La query YQL per ottenere i post di webdesigntuts + da feedburner - Ne abbiamo bisogno per i commenti contiamo solo $ yqlurl2 = "http://query.yahooapis.com/v1/public/yql?q="; $ yqlurl2. = urlencode ("seleziona * dal feed dove url =" http://feeds.feedburner.com/webdesigntutsplus "LIMIT 10"); $ yqlurl2. = "& format = json"; $ yqlfeed2 = file_get_contents ($ yqlurl2, true); $ yqlfeed2 = json_decode ($ yqlfeed2); // La query YQL per ottenere le categorie 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); In questa fase, effettueremo una chiamata all'API del grafico di Facebook. È simile a come abbiamo effettuato le chiamate a YQL, tuttavia ci sono alcune lievi variazioni tra i due. Questo è veramente semplice da fare e dovrebbe essere sicuramente una sezione di codice che si tiene nella cartella snippet, come sono sicuro che sarà utile. Impostiamo una variabile di Mi piace = '0', fai la chiamata e poi dì; se la schieramento che viene restituito contiene "Mi piace", quindi imposta la variabile "Mi piace" al numero di Mi piace che è stato restituito.
// Effettua una chiamata al grafico di facebook api e decodifica il jSON per raccogliere il numero di "Mi piace" dalla pagina webdesigntuts + facebook $ json_url = 'https: //graph.facebook.com/webdesigntutsplus'; $ json = file_get_contents ($ json_url); $ json_output = json_decode ($ json); $ likes = 0; if ($ json_output-> likes) $ likes = $ json_output-> likes;
Ora che abbiamo tutti i nostri dati memorizzati in variabili PHP, dobbiamo prendere quei dati e visualizzarli sulla nostra pagina. Per il nostro post sul blog, lo facciamo creando un semplice per ciascuno loop e utilizzo $ mangime come il valore. Possiamo quindi eco fuori singoli valori dal nostro JSON schieramento usando il nome della parte che desideriamo eco. La console YQL dovrebbe aiutarti a trovare queste sezioni usando la modalità ad albero.
query-> risultati-> oggetto come $ articolo) ?>link;?> "target =" _ blank ">titolo;?>
di creatore;?> on pubDate, 0, -9);?>description;?>
link;?> "target =" _ blank "> Ulteriori informazioni query->> Risultati della voce [$ i ++] -> Commenti [1]; ?> Commenti
Nel blocco di codice sopra, nota che abbiamo ecoeliminato il numero di commenti da '$ yqlfeed2'. La sezione dei commenti ha due parti: l'URL del commento e il numero del commento. L'url del commento è il primo parte (0), e il numero di commenti è il secondo, parte 1]. Richiediamo solo il numero di commenti. Inoltre, incrementiamo automaticamente l'articolo impostando '$ i = 0,'e poi usando'item [$ i ++]"In questo modo, il numero dell'articolo aumenterà ogni volta che il post verrà interrotto e restituirà il numero di commenti per ogni singolo post.
Un altro punto da notare è che abbiamo utilizzato una funzione PHP integrata, subtr - substr ($ item-> pubDate, 0, -9). Il motivo per cui lo abbiamo fatto è dovuto a personaggi dall'aspetto strano alla fine della nostra data e ora. Questo semplicemente rimuove gli ultimi nove caratteri (-9) e lascia la nostra data e ora che appaiono come previsto.
Ecoil numero di Mi piace è semplice; abbiamo creato la variabile '$ calibro'prima, quindi abbiamo semplicemente bisogno di eco esso. L'SDK PHP di Facebook crea automaticamente anche alcune variabili per noi; ancora una volta è un semplice caso di ecofuori. Tutto ciò che dobbiamo fare è sostituire i nostri dati fittizi con i dati dinamici.
Alla gente piacciono i webdesigntuts+
Ciao
Siamo lieti che tu ti sia fermato a webdesigntuts +. Speriamo che il nostro blog ti piaccia
Categorie su webdesigntuts+
Nel codice sopra, semplicemente passiamo in rassegna la nostra query YQL contenuta in '$ yqlfeed3'. Usiamo anche un'altra funzione PHP incorporata, str_replace. Usiamo questo per sostituire qualsiasi spazio nelle nostre categorie con un '+' cartello. Questo è così che non avremo collegamenti interrotti quando tenteremo di reindirizzare l'utente alle categorie su Webdesigntuts+.
Il primo trucco che vorrei mostrarti ci aiuta a superare un bug nell'iframe della tela di Facebook. Nelle impostazioni dell'app Facebook, puoi impostarlo in modo che l'iframe venga ridimensionato automaticamente per adattarsi al tuo contenuto; tuttavia, mette anche una barra di scorrimento orribile accanto alla tua app a destra della barra laterale di Facebook. Questo non sembra troppo bello, quindi possiamo risolvere questo con un semplice bit di JavaScript che può essere posizionato subito dopo la nostra apertura corpo etichetta. Questo ridimensionerà la nostra tela per adattarla al contenuto e la sidebar sarà all'estrema destra di Facebook rispetto alla nostra app.
Il trucco successivo che vorrei mostrarti è che quando un utente visita la tua app per la prima volta, gli verrà chiesto di accedere / autorizzare. Piuttosto che visualizzare semplicemente un link, possiamo avere un'autorizzazione popup di Facebook. Sai di quelli di cui sto parlando, sono sicuro che li hai visti un milione di volte. Questo può essere ottenuto aggiungendo un altro bit di JavaScript dopo la nostra dichiarazione di chiusura di PHP else.
$ loginUrl = $ facebook-> getLoginUrl (array ('redirect_uri' => $ fbconfig ['appUrl'])); stampa "> script> top.location.href = '$ loginUrl';";> Quindi è gente! Ciò porta alla conclusione della nostra serie "Design e codice di un'app Facebook integrata". Spero ti sia divertito tanto a crearlo come ho scritto su di esso.
Questo settembre, alla conferenza annuale F8, Facebook ha annunciato di aver appena superato gli 800 milioni di utenti annuali. Modo di andare su Facebook! Come puoi vedere, questa è una grande piattaforma per promuovere te stesso, il tuo marchio o il tuo prodotto. Quale modo migliore di utilizzare questo rispetto alla creazione della tua app Facebook originale. Facebook ha anche annunciato, lo stesso giorno, la reinvenzione dei profili utente, chiamata Timeline. Con Timeline arriva un modo completamente nuovo per integrare le app in un profilo / cronologia degli utenti.
"I film che hai citato, le canzoni che hai ripetuto, le attività che ami ora c'è una nuova classe di app social che ti permettono di esprimere chi sei attraverso tutte le cose che fai".
Questo è un momento entusiasmante per noi sviluppatori di app! Se sei già saltato dentro, cosa stai aspettando? Non pensare solo a costruire la prossima app, togliti il culo e costruiscilo. Non vedo l'ora di vedere cosa ti viene in mente e come puoi prendere ciò che hai imparato, e metterti la testa. Sentiti libero di lasciare link alle tue app e creazioni nei commenti qui sotto.
Alla prossima, felice progettazione e programmazione!
