Share
Welkom bij deel drie van "Ontwerp en codeer een geïntegreerde Facebook-app". Op dit moment ga ik ervan uit dat u de HTML en CSS voor uw app hebt gemaakt. Zo niet, raadpleeg dan het eerste item in deze serie. In dit deel gaan we onze app naar een hoger niveau tillen!
In deze les zorgen we voor:
Dus blijf bij mij, maak een kopje thee en blije codering!
Voordat we beginnen met het converteren van onze HTML naar PHP, moeten we een paar van onze HTML-objecten functioneel maken. We kunnen dit vrij gemakkelijk doen met behulp van de jQuery-bibliotheek. Als u nog niet bent begonnen met het gebruik van de jQuery-bibliotheek, is het nu absoluut een goed moment om te beginnen. Het is een geweldige introductie tot Javascript en naar waarheid is het niet te moeilijk om te gebruiken. Je kunt zelfs enkele geweldige effecten maken met slechts een paar regels code. In onze blog-app gaan we jQuery gebruiken voor twee dingen. Ten eerste gaan we het gebruiken voor onze live filterzoekopdracht en ten tweede voor onze paginatabbladen om onze gebruikers een soepele ervaring te bieden terwijl ze van pagina naar pagina overstappen.
Als u het zich herinnert van de vorige zelfstudie, hebben we een JavaScript-bestand toegevoegd aan onze HTML-documentkop. Nu is het tijd om dat bestand te maken. Dus spring in je favoriete code-editor en bel het bestand 'myjava.js'. We beginnen met het document klaar te maken. Dit vertelt jQuery om alles erin te laden zodra de DOM klaar is om te worden gemanipuleerd.
Wanneer de DOM gereed is, verbergen we alle tabbladen. Vervolgens vervagen we elke pagina wanneer op het bijbehorende tabblad wordt geklikt of 'actief' wordt gemaakt. We verwijderen ook de actief klasse van de tabbladen en verberg alle inhoud van de andere pagina's.
Accentsconagua
var tabContent = $ ('. tab_content'), // Definieer het tabblad als een variabele tabs = $ ('ul.tabs li'); // Definieer de tabbladen li als een variabele tabContent.hide (); // On page load verberg alle inhoud van alle tabbladen tabs.eq (0) .addClass ("active"). Show (); // Standaard naar het eerste tabblad tabContent.eq (0) .show (); // Toon de inhoud van de standaardtabbladen // Wanneer de gebruiker op de tabtabs klikt. Klik (functie (e) var li = $ (this), // definieer deze li als een variabele activeTab = li.find ('a' ); // Haal de attribuutwaarde (class) van de href op en fade in de bijbehorende tabbladen content tabs.removeClass ("active"); // Verwijder de actieve klasse li.addClass ("active"); // Voeg het actieve tabblad toe aan het geselecteerde tabblad tabContent.hide (); // Verberg alle andere tabbladinhoud activeTab.fadeIn (); // Vervaag het tabblad in e.preventDefault ();); Het volgende item waarvoor we jQuery gebruiken, is onze filterzoekopdracht. Hierdoor kunnen onze gebruikers hun zoekresultaten in realtime filteren terwijl ze typen. Dit wordt gedaan door de actuele waarde van het formulierveld te nemen en te filteren met alles wat overeenkomt met onze 'berichten' divs. Het filter toont vervolgens de 'berichten' div die de waarde bevatten en die verbergen die niet.
// Filter Search $ (". Search"). Keyup (function () var $ this = $ (this), filter = $ this.val (), count = 0; $ (". Post"). Each ( function () var $ this = $ (this); if ($ this.text (). search (nieuwe RegExp (filter, "i")) < 0) $this.hide(); else $this.show(); ); $("#filter-count").text(count); ); Nu is het tijd om dit statische bestand tot leven te brengen en gegevens van Facebook en Feedburner in te voeren. Dit is waarschijnlijk een goed moment om uw bestand een nieuwe naam te geven index.html naar index.php en download de PHP SDK. Je kunt de nieuwste versie van Facebook's PHP SDK downloaden van:
Facebook PHP SDK
Nu moeten we de canvaspagina van onze Facebook-app instellen. Hoewel dit al eerder is behandeld, heeft Facebook onlangs de pagina voor het instellen van de app bijgewerkt. dus het is belangrijk om de nieuwe instellingen te doorlopen. Upload eerst het index.php naar uw eigen webhostingaccount. Ive uploadde mijn naar een submap bv. www.yourdomain.com/tut Als je klaar bent, kun je je app instellen door naar https://developers.facebook.com/apps te gaan.
Klik nu op de knop 'Nieuwe app maken' in de rechterbovenhoek. Voer de naam van uw app in en u wordt vervolgens naar de instellingenpagina geleid. Met Facebook kun je veel verschillende soorten apps maken - van desktop tot mobiel. In ons geval moeten we de 'App op Facebook' kiezen. Er zijn vijf essentiële velden die u moet invullen om uw app te laten werken. Ze zijn gemarkeerd in de bovenstaande afbeelding. Zodra dit is gedaan, als je naar apps.facebook.com gaat, gevolgd door wat je hebt ingevoerd in de 'app namespace'. In mijn geval was dit 'webdesigntuts', dus mijn app-domein is: http://apps.facebook.com/webdesigntuts/
Wanneer u naar uw URL gaat, zou u uw indexbestand binnen de canvasruimte op Facebook moeten zien.
Nadat je de app op Facebook hebt gezet, is het nu tijd om gegevens uit de grafiek-API van Facebook in te voeren en mensen in en uit onze app te laten inloggen..
Voeg in de directory voor onze app een nieuwe map toe en noem deze 'fb'Open de SDK-map die u hebt gedownload vanuit GitHub. Daarin zou u een paar voorbeelden moeten vinden: de src en enkele tests. Neem de inhoud van de src map en sleep het naar uw fb map. Dit is het bit dat we nodig hebben om verbinding te maken met Facebook. In onze index.php bestand, voeg de onderstaande code toe, beginnend met inclusief de Facebook SDK van onze 'fb'map en voeg uw unieke app-ID en geheime sleutel toe. In de onderstaande code kunt u zien hoe dit moet worden ingesteld. We verbinden ons in essentie met Facebook en halen de gebruiker op ID kaart van de persoon die onze app gebruikt. Als de gebruiker is geverifieerd, genereren we een variabele voor de afmeldings-URL of, als dat niet het geval is, genereren we er een voor de aanmeldings-URL..
'Uw app-ID', 'geheim' => 'Uw app-geheim', 'cookies' => 'waar',)); // Download de app User ID $ user = $ facebook-> getUser (); if ($ user) try // Als de gebruiker is geverifieerd, ga dan verder $ user_profile = $ facebook-> api ('/ me'); catch (FacebookApiException $ e) error_log ($ e); $ user = null; // Als de gebruiker is geverifieerd, genereert u de variabele voor de afmeldings-URL als ($ gebruiker) $ logoutUrl = $ facebook-> getLogoutUrl (); ?> getLoginUrl (); ?> Tussen de als en anders verklaring, we willen de PHP-tags sluiten en starten, zodat we onze html die we eerder hebben gemaakt kunnen invoegen in de PHP-pagina. Als u nu uw pagina uploadt naar uw webruimte en het canvas van de Facebook-app ververst, zou u nu de app moeten kunnen zien. Als u bent ingelogd, ziet u het; anders ziet u een inlog-URL zoals in de onderstaande afbeelding
"> Afmelden
We hebben onze app ingesteld op Facebook en hebben een login en een uitweg gemaakt voor onze gebruikers. Het enige dat overblijft is om onze dummygegevens te vervangen door echte live gegevens.
Meer informatie over YQL.
Het eerste stukje gegevens dat we in onze app willen opnemen, zijn de blogposts. Dit wordt opgehaald uit onze Feedburner RSS-feed. We verzamelen het met behulp van YQL. Als u YQL nog niet eerder hebt gebruikt, moet u het zeker eens proberen. Het is super eenvoudig te gebruiken en de flexibiliteit die het biedt is geweldig. Als u hier niet bekend mee bent, kunt u hier en hier meer informatie vinden.
Wat we in feite doen, is het verzenden van een verzoek naar YQL met behulp van vergelijkbare syntaxis die mogelijk wordt gebruikt in MYSQL. Vervolgens decoderen we de gegevens die worden geretourneerd naar een JSON-leesbare indeling en slaan we die op in een variabele zodat we specifieke delen van de rangschikking binnen onze blogberichten.
We moeten drie verzoeken aan YQL doen. Ze zijn als volgt:
Dit moet vóór de afsluitende PHP-tag worden ingevoegd voordat onze HTML wordt gestart. U kunt dit zien aangetoond in de onderstaande code:
// De YQL-query voor het ophalen van de Webdesigntuts + samenvatting van berichten van FeedBurner $ yqlurl = "http://query.yahooapis.com/v1/public/yql?q="; $ yqlurl. = urlencode ("select * from feed where url =" http://feeds.feedburner.com/webdesigntuts-summary "LIMIT 10"); $ yqlurl. = "& format = json"; $ yqlfeed = file_get_contents ($ yqlurl, true); $ yqlfeed = json_decode ($ yqlfeed); // De YQL-query om de webdesigntuts + berichten van feedburner te krijgen - We hebben dit alleen nodig voor de opmerkingen count $ yqlurl2 = "http://query.yahooapis.com/v1/public/yql?q="; $ yqlurl2. = urlencode ("select * from feed waarbij url =" http://feeds.feedburner.com/webdesigntutsplus "LIMIT 10"); $ yqlurl2. = "& format = json"; $ yqlfeed2 = file_get_contents ($ yqlurl2, true); $ yqlfeed2 = json_decode ($ yqlfeed2); // De YQL-query om de webdesigntuts + categorieën te krijgen. $ 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); In dit stadium bellen we naar de Facebook-grafiek-API. Het is vergelijkbaar met hoe we de oproepen naar YQL hebben gemaakt, maar er zijn een paar kleine variaties tussen de twee. Dit is heel eenvoudig om te doen en zou zeker een deel van de code moeten zijn dat je in je snippets-map bewaart, want ik weet zeker dat het van pas zal komen. We hebben een variabele van likes ingesteld op = '0', de oproep doen en dan zeggen; als het rangschikking die wordt teruggestuurd bevat 'vind-ik-leuks' en stel onze vind-variabele in op het aantal vind-ik-leuks dat is geretourneerd.
// Bel naar de facebook-grafiek api en decodeer de json om het aantal likes te verzamelen van de webdesigntuts + facebookpagina $ 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-> vind-ik-leuks;
Nu we al onze gegevens in PHP-variabelen hebben opgeslagen, moeten we die gegevens opnemen en op onze pagina weergeven. Voor onze blogpost doen we dit door een eenvoudig te maken voor elk loop en gebruiken $-feed als de waarde. Dat kunnen we dan echo individuele waarden uit onze JSON rangschikking door de naam te gebruiken van het onderdeel dat we willen echo. De YQL-console moet u helpen deze secties te vinden met behulp van de boomstructuur.
query-> resultaten-> item als $ item) ?>link;?> "target =" _ blank ">title;?>
door maker;?> aan pubDate, 0, -9);?>beschrijving;?>
link;?> "target =" _ blank "> Meer lezen query-> resultaatgerichte> punt [$ i ++] -> opmerkingen [1]; ?> Opmerkingen
In het bovenstaande codeblok noteren we dat echouit het aantal reacties van '$ yqlfeed2'. Het commentaargedeelte bestaat uit twee delen: commentaar-URL en opmerkingennummer. De reactie-URL is de eerste deel (0), en het aantal reacties is de tweede, deel 1]. We hebben alleen het aantal reacties nodig. We verhogen het item ook automatisch door '$ i = 0,'en dan gebruiken'Item [$ i ++]'Door dit te doen, zal het itemnummer telkens toenemen als het bericht wordt doorgelust en zal het aantal reacties voor elke afzonderlijke post worden geretourneerd.
Een ander punt om op te merken is dat we een ingebouwde PHP-functie hebben gebruikt, subtr - substr ($ item-> pubDate, 0, -9). De reden waarom we dit hebben gedaan is te wijten aan een aantal vreemd uitziende personages aan het einde van onze datum en tijd. Hiermee worden alleen de laatste negen tekens verwijderd (-9) en blijven de datum en tijd zoals verwacht verschijnen.
Echohet aantal vind-ik-leuks is eenvoudig; we hebben de variabele gemaakt, '$ houdt'eerder, dus dat moeten we gewoon doen echo het. De Facebook PHP SDK creëert ook automatisch een aantal variabelen voor ons; opnieuw is het een eenvoudig geval van echouit. Het enige dat we moeten doen is onze dummygegevens vervangen door de dynamische gegevens.
Mensen houden van webdesigntuts+
Hoi
We zijn blij dat je bent langsgekomen bij webdesigntuts +. We hopen dat je geniet van onze blog
Categorieën op webdesigntuts+
In de bovenstaande code doorlopen we eenvoudigweg onze YQL-query in '$ yqlfeed3'. We gebruiken ook een andere ingebouwde PHP-functie, str_replace. We gebruiken dit om spaties in onze categorieën te vervangen door een '+' teken. Dit is zodat we geen verbroken koppelingen hebben wanneer we de gebruiker proberen om te leiden naar de categorieën op Webdesigntuts+.
De eerste truc die ik je wil laten zien, helpt ons om een bug in het Facebook-canvas-iframe te omzeilen. In de instellingen van uw Facebook-app kunt u het zo instellen dat het iframe automatisch wordt aangepast aan uw inhoud; het plaatst echter ook een vreselijke schuifbalk naast je app rechts van de zijbalk van Facebook. Dit ziet er niet geweldig uit, dus we kunnen dit oplossen met een eenvoudig stukje JavaScript dat vlak na onze opening kan worden geplaatst lichaam label. Hiermee wordt het formaat van ons canvas aangepast aan de inhoud en de zijbalk bevindt zich helemaal rechts van Facebook in tegenstelling tot onze app.
De volgende truc die ik u wil laten zien, is dat wanneer een gebruiker uw app voor het eerst bezoekt, deze wordt gevraagd om in te loggen / autoriseren. In plaats van alleen een link weer te geven, kunnen we een pop-upmachtiging voor Facebook hebben. Je weet waar ik het over heb, ik weet zeker dat je ze een miljoen keer hebt gezien. Dit kan worden bereikt door een ander bit JavaScript toe te voegen na onze afsluitende PHP else-instructie.
$ loginUrl = $ facebook-> getLoginUrl (array ('redirect_uri' => $ fbconfig ['appUrl'])); print "> script> top.location.href = '$ loginUrl';";> Dus dat zijn de mensen! Dit brengt een einde aan onze serie 'Design and Code an Integrated Facebook App'. Ik hoop dat je net zoveel plezier hebt gehad met het maken ervan als ik erover heb geschreven.
In september kondigde Facebook tijdens de jaarlijkse F8-conferentie aan dat ze net 800 miljoen jaarlijkse gebruikers hadden overschreden. Goed gedaan op Facebook! Zoals u kunt zien, is dit een geweldig platform om uzelf, uw merk of uw product te promoten. Wat is een betere manier om dit te gebruiken dan door uw eigen native look and feel Facebook-app te maken. Facebook kondigde op dezelfde dag ook de heruitvinding aan van gebruikersprofielen, genaamd Timeline. Met Tijdlijn komt een geheel nieuwe manier om apps te integreren in een gebruikersprofiel / tijdlijn.
"De films die je citeert, de nummers die je hebt herhaald, de activiteiten waar je van houdt Nu is er een nieuwe klasse sociale apps waarmee je kunt uitdrukken wie je bent door alles wat je doet."
Dit is een spannende tijd voor ons app-ontwikkelaars! Als je nog bent gesprongen, waar wacht je nog op? Denk niet alleen maar na over het bouwen van de volgende app, ga van je stuk en bouw het op. Ik kijk er naar uit om te zien wat je bedacht en hoe je kunt nemen wat je hebt geleerd, en er je eigen draai aan kunt geven. Voel je vrij om links naar je apps en creaties achter te laten in de reacties hieronder.
Tot de volgende keer, gelukkig ontwerpen en coderen!
