Liker å låse opp Hvordan bygge en grunnleggende Facebook Fan Gate uten å betale for Hosting

Elsker det eller loathe det, alle og deres hund er på Facebook i dag; slik som alt som er populært i livet, har det blitt fullstendig undergravd av markedsføringstyper. En utrolig effektiv bruk av en Facebook-hostet merkevareside er å incentivisere folk til å like siden ved å skape noe hemmelig, kun medlemskap, vanligvis referert til som a “fan gate”. Dette er fylt med eksklusive videoer, nedlastinger eller kanskje en kjøpekupong - vi bruker en her på MakeUseOf for å gi våre fans lett tilgang til alle dagens konkurranser.

Denne typen grunnleggende Facebook-app var relativt enkel å lage tidligere, men Facebook krever nå at alle sidefanebutene skal ha en sikker versjon - en HTTPS tilgang url - men det er en annen $ 100 per år på toppen av eksisterende hostingkostnader for nettstedet ditt. Selv om du driver en liten e-handelsbutikk, kan du bruke PayPal som betalingsleverandør og har derfor ikke behov for SSL-sertifikater. Men bekymre deg ikke, da Facebook også har samarbeidet med Heroku - et cloud hosting-selskap - som betyr at du kan lage din egen grunnleggende Facebook-app, og vert det gratis, på en sikker server. Vil du vite mer? Les videre da jeg lager en grunnleggende Facebook fan-gate side fan app, hosted gratis, på Heroku.

Registrer som utvikler

Før du gjør noen programmer, må du være en registrert utvikler. Gå til developers.facebook.com for å komme i gang, og klikk på det grønne Registrere knappen øverst til høyre hvis ikke allerede. Du trenger et telefonnummer for å registrere, men ellers er det gratis.

Hvis du allerede er registrert, klikker du på Applikasjoner øverst på verktøylinjen for å få oversikt over de nåværende appene dine.

Opprett en ny app

Her begynner moroa. Klikk på Opprett ny app. Navngivningen spiller ingen rolle, men velger selvsagt noe relevant. Navnefeltfeltet vil bli lagt til fanens side-URL når brukeren klikker på den kategorien. Du kan la det være tomt, men så ser de app-ID-en i nettadressen i stedet, noe som er litt ugligere. Navneområdet må også være unik, så ikke engang bry deg med noe som “testapp” eller du får en feil. Endelig merk av i boksen som sier at du vil ha gratis hosting fra Heroku.

Etter at du har fylt ut captchaen, vil du bli invitert til å velge hvilken type hosting du vil ha fra Heroku - velg PHP, og godta. Facebook vil automatisk opprette en ny konto for deg på Heroku hvis du ikke allerede har en, og pre-populere URL-innstillingene i grunnleggende, noe som er fint av dem. Faktisk er det veldig vanskelig å ødelegge dette trinnet.

Fra appdetaljer-siden vil du også angi hvilken type app som skal være en “Side-fanen”, og sørg for at de aktuelle nettadressene er oppgitt der - igjen, dette bør være automatisk. Deretter lagre.

Heroku første skritt

Når du er ferdig, får du en epost fra Heroku med detaljer om hvordan du endrer passordet ditt, og laster ned Heroku “verktøybelte” for systemet ditt. For de som ikke er kjent med Heroku, er det ikke en tradisjonell vert i den forstand at du kan logge inn på en FTP-adresse og laste opp filer. I stedet arbeider Heroku med Git, et versjonskontrollsystem. Når du har installert verktøybeltet, må du først klone nettstedet til din lokale stasjon - dette gir deg en katalog som er et speil av hva som er hostet på Heroku. Når du gjør endringer i disse filene, synkroniserer du dem alle tilbake igjen for å oppdatere Heroku.

Instruksjonene for å gjøre denne første synkroniseringen finnes i din velkomst-e-post, og det er en enkel en-linjekommando som er unik for din hostingadresse - bare kopier og lim inn fra e-posten. Din webadresse er helt vilkårlig - i mitt tilfelle var det tørr-skog-7743 - det er tilfeldig generert og spiller ingen rolle i det hele tatt fordi brukere ikke ser det. Åpne den nylig opprettede katalogen, og ta en titt rundt.

Heroku har lagt inn ganske mye funksjonalitet, men vi trenger ikke mesteparten av det. Åpne opp index.php og ta en titt rundt. Finn følgende linjer nær starten på filen:

$ facebook = ny Facebook (array ('appId' => AppInfo :: appID (), 'secret' => AppInfo :: appSecret (),' sharedSession '=> true,' trustForwarded '=> true,));

og umiddelbart etter det, kopier i disse:

$ signed_request = $ facebook-> getSignedRequest (); $ liked = $ signed_request ['side'] ['liked'];

Ikke bekymre deg om dette er altfor komplisert for deg - jeg gir deg en ferdig mal snart. En signert forespørsel sendes til appen din fra Facebook, som inneholder litt informasjon om brukeren - om de har admin tilgang og om de har likt siden eller ikke. Hvis du vil vite nøyaktig hva som er sendt, legg til følgende:

print_r ($ signed_request);

og du får en full utskrift av det signerte forespørselsobjektet.

På dette tidspunktet bør jeg innrømme at jeg hadde reelle problemer med å få den signerte forespørselen til å fungere - det viste seg at Heroku fjernet dataene på sidebelastning, og det var først etter at du lastet inn JS API (en god 10 sekunder etter den første siden lasten ) at siden skulle oppdatere og angi riktig “likte” status. Takket være dette Stack Overflow-spørsmålet, syntes løsningen å strekke ut koden som håndhever HTTPS for usikrede brukere. Slett følgende kodenavn ved begynnelsen av malen:

// Foreta https om produksjon hvis (substr (AppInfo :: getUrl (), 0, 8)! = 'Https: //' && $ _SERVER ['REMOTE_ADDR']! = '127.0.0.1') header : https: // '. $ _SERVER [' HTTP_HOST ']. $ _SERVER [' REQUEST_URI ']); exit(); 

Nå, når siden er lastet, har du en boolsk variabel - det er en ekte eller a falsk - som forteller deg om brukeren har likt siden eller ikke. Du kan bruke dette med en enkel hvis uttalelse for å vise enten innhold en eller b:

Plasser det like etter åpningen tag inn index.php. Nå, hvis du har forhåndsvisning på siden din på Heroku, vil du se at den har en rekke ekstra funksjonaliteter, viser sider du har likt, knapper for å legge inn oppdateringer osv. - Vi trenger ikke noe av det virkelig, så jeg fjernet alt sammen, inkludert JavaScript SDK for Facebook, forlater bare CSS og vår fan-gate. Her er fjernet koden jeg endte opp med å bruke (dette er et bilde - kopi lim fra PasteBin hvis du ønsker det):

Du bør redigere seksjonene som sier “ikke en fan” og “fan” å inneholde henholdsvis standard og hemmelig innhold. Hvis du foretrekker å beholde innholdet i en egen fil, bruk:

omfatte ( "secret.html");

for å importere eksterne filer.

Synkroniser med Heroku

Når du har gjort alle nødvendige endringer i filen din, må du synkronisere sikkerhetskopiering med Heroku - vi gjør dette ved “skyve” vår lokale kopi til “master gren” på Heroku. Kontroller at du er i riktig katalog fra kommandolinjen, skriv inn:

git commit -am "endrer meldinger"

(du kan erstatte endringsmeldinger med et notat til deg selv om hvilke endringer du faktisk gjorde denne gangen - det er god praksis å beholde disse postene)

og så

git push heroku master

Vent til kommandoen er ferdig, som det kan ta en stund.

Endelig trinn: Legg til appen på siden din

Nå som appen er bygget, må vi faktisk legge den til som en fane til merkesiden din. Merkelig er dette gjort ved hjelp av en spesiallaget URL:

https://www.facebook.com/dialog/pagetab?app_id=YOUR_APP_ID&redirect_uri=YOUR_APP_URL_ON_HEROKU

Erstatte YOUR_APP_ID med IDen som er oppført på appens detaljer, og YOUR_APP_URL_ON_HEROKU med URL for din Heroku hosting. Når du laster inn denne spesielle nettadressen, starter du “legg til på siden din” dialog, hvor du kan velge den riktige merkesiden for å legge til sidefanen din til.

Så hei presto - det blir en ny knapp på siden din, slik:

Som du kan se, har vi ikke angitt et bilde for fanen ennå, men det er igjen som standard - du kan gjøre dette fra appsiden din. Det er egentlig det skjønt; hvis du laster den kategorien, min erstatning index.php vil enten vise deg som en fan eller a ikke fan. Eller hva du tilpasset den til å vise:

Jeg innrømmer - denne prosessen var vanskeligere enn jeg forventet, men det unngår helt behovet for å være vert for noe på din egen server eller få SSL-sertifisert. Hvis du har noen spørsmål eller problemer, spør deg bort i kommentarene, og jeg vil prøve å hjelpe deg. Hvis kommentarene er stengt, gå videre til vårt svarsted; og vær så snill, hvis du fant denne veiledningen nyttig, vennligst del den på ditt favoritt sosiale nettverk. Dessuten vil du sikkert sjekke ut vår gratis, komplette guide til sosiale medier markedsføring, og vurdere å legge Pinterest til din strategi også.

Utforsk mer om: App Utvikling, Facebook.