Gilla att låsa upp hur man bygger en grundläggande Facebook Fan Gate utan att betala för hosting

Älskar det eller lurar det, alla och deras hund är på Facebook nuförtiden; så som någonting som är populärt i livet, har det helt undergrävts av marknadsföringstyper. En otroligt effektiv användning av en Facebook-värdsidans sida är att incitamenta människor att tycka om sidan genom att skapa något hemligt medlemmars enda innehåll. vanligen kallad a “fläktporten”. Detta är fyllt med exklusiva videor, nedladdningar eller kanske en köpkupong - vi använder en här på MakeUseOf för att ge våra fans lätt tillgång till alla aktuella tävlingar.

Den här typen av grundläggande Facebook-app var relativt enkelt att skapa tidigare, men Facebook kräver nu att alla sidfliksprogram ska ha en säker version - en HTTPS access url - men det är ytterligare $ 100 per år utöver dina befintliga värdkostnader för din webbplats. Även om du kör en liten e-handelsbutik kan du använda PayPal som betalningsleverantör och behöver därför inte SSL-certifikat. Men oroa dig inte, eftersom Facebook också har samarbetat med Heroku - ett molnföretag - vilket innebär att du kan skapa din egen grundläggande Facebook-app och värd det gratis, på en säker server. Vill veta mer? Läs vidare när jag gör en grundläggande Facebook fan-gate sida fliken app, värd gratis, på Heroku.

Registrera som utvecklare

Innan du gör några appar måste du vara en registrerad utvecklare. Gå till developers.facebook.com för att komma igång och klicka på den gröna Registrera knappen högst upp till höger om inte redan. Du behöver ett telefonnummer för att registrera dig, men annars är det gratis.

Om du redan är registrerad klickar du på Apps högst upp på verktygsfältet för att få en översikt över dina aktuella appar.

Skapa en ny app

Här är där kulan börjar. Klicka på Skapa ny app. Namnet spelar ingen roll, men väljer självklart något som är relevant. Fältet Namnrymd läggs till på din fan-sida-URL när användaren klickar på den fliken. du kan lämna den tom, men då kommer de att se app-id i webbadressen istället, vilket är lite illaluktande. Namnutrymmet måste också vara unik, så stör inte ens med något liknande “TestApp” eller du får ett fel. Slutligen markera rutan som säger att du vill ha gratis hosting från Heroku.

Efter att ha fyllt i captcha kommer du att bli inbjuden att välja vilken typ av webbhotell du vill ha från Heroku - välj PHP och acceptera. Facebook skapar automatiskt ett nytt konto för dig på Heroku om du inte redan har en och förfyller URL-inställningarna i dina grunder, vilket är trevligt av dem. Det är faktiskt väldigt svårt att röra detta steg upp.

På appens informationssida vill du också ange vilken typ av app som ska vara en “Sidfliken”, och se till att de relevanta webbadresserna är inskrivna där också - det ska igen vara automatiskt. Spara sedan.

Heroku första stegen

När du är klar får du ett mail från Heroku med information om hur du byter lösenord och laddar ner Heroku “verktygsbälte” för ditt system. För dig som inte är bekant med Heroku är det inte en traditionell värd i den meningen att du kan logga in på en FTP-adress och ladda upp filer. istället arbetar Heroku med Git, ett versionsstyrningssystem. När du har installerat verktygsremmen måste du först klona webbplatsen till din lokala enhet - det här ger dig en katalog som är en spegel av vad som finns på Heroku. När du ändrar dessa filer synkroniserar du dem alla igen för att uppdatera Heroku.

Instruktionerna för att göra den här första synkroniseringen finns i ditt välkomna e-postmeddelande, och det är ett enkelt en-linjekommando som är unikt för din värdadress - kopiera och klistra in från e-postmeddelandet. Din webbadress är fullständigt godtycklig - i mitt fall var det torr-skogsmark-7743 - det genereras slumpmässigt och spelar ingen roll alls eftersom användarna inte ser den. Öppna den nyskapade katalogen och ta en titt.

Heroku har lagt in en hel del funktionalitet, men vi behöver inte det mesta. Öppna index.php och ta en titt runt. Hitta följande rader nära början av filen:

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

och omedelbart efter det, kopiera i dessa:

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

Oroa dig inte om det här är alltför komplicerat för dig - jag ger dig en färdig mall snart. En signerad förfrågan skickas till din app från Facebook, som innehåller viss information om användaren - oavsett om de har administratörsbehörighet och huruvida de har gillat sidan eller inte. Om du vill veta exakt vad som skickas lägger du till följande:

print_r ($ signed_request);

och du får en fullständig utskrift av det undertecknade förfråganobjektet.

Vid den här tiden borde jag erkänna att jag hade verkliga problem med att få den underskattade förfrågan att fungera - det visade sig att Heroku tog bort data på sidbelastning, och det var först efter att ha laddat JS API (en bra 10 sekunder efter den första sidladden ) att sidan skulle uppdatera och ange rätt “omtyckt” status. Tack vare denna Stack Overflow-fråga såg lösningen att koda ut koden som styr HTTPS för osäkrade användare. Ta bort följande kodkod i början av mallen:

// Förbättra https om produktion om (substr (AppInfo :: getUrl (), 0, 8)! = 'Https: //' && $ _SERVER ['REMOTE_ADDR']! = '127.0.0.1') header : https: // '. $ _SERVER [' HTTP_HOST ']. $ _SERVER [' REQUEST_URI ']); utgång(); 

Nu när sidan är laddad har du en booles variabel - det är en Sann eller a falsk - som berättar om användaren har gillat sidan eller inte. Du kan använda det här med en enkel om uttalande för att visa antingen innehåll en eller b:

Placera det strax efter öppningen tagga in index.php. Nu, om du har förhandsgranskat din sida på Heroku, kommer du märka att den har en hel del ytterligare funktioner, visar sidor du har velat, knappar för att posta uppdateringar etc - vi behöver inte något av det verkligen, så jag tagit bort allt inklusive JavaScript-SDK för Facebook, lämnar endast CSS och vår fläktport. Här är den borttagna koden som jag slutade använda (det här är en bild - kopiera klistra in från PasteBin om du vill):

Du bör redigera de avsnitt som säger “inte ett fan” och “fläkt” att innehålla ditt standard- och hemliga innehåll. Om du föredrar att hålla innehållet i en separat fil, använd:

inkluderar ( "secret.html");

för att importera externa filer.

Synkronisera med Heroku

När du har gjort alla nödvändiga ändringar i din fil måste du synkronisera säkerhetskopiering med Heroku - vi gör det här för “tryckande” vår lokala kopia till “huvudgren” på Heroku. Se till att du är i rätt katalog från kommandoraden, skriv:

git commit -am "ändrar meddelanden"

(du kan ersätta ändringsmeddelanden med en anteckning om dig själv av vilka ändringar du faktiskt gjort den här gången - det är bra att hålla dessa poster)

och då

git push heroku master

Vänta på att kommandot ska slutföras, eftersom det kan ta ett tag.

Slutsteg: Lägg till appen till din sida

Nu när appen är uppbyggd måste vi faktiskt lägga till den som en flik till din varumärkessida. Kärleksfullt görs detta med en specialtillverkad URL:

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

Byta ut YOUR_APP_ID med det ID som anges på dina appuppgifter, och YOUR_APP_URL_ON_HEROKU med webbadressen för din Heroku värd. Om du laddar den här speciella webbadressen startar du sedan “lägg till på din sida” dialogrutan, där du kan välja rätt varumärkessida för att lägga till sidfliken till.

Då hej presto - det blir en ny knapp på din sida, så här:

Som du kan se har vi inte angett en bild för fliken ändå, men den är kvar som standard - du kan göra det på din appinformationssida. Det är dock i princip om du laddar den fliken, min ersättning index.php kommer antingen visa dig som en fläkt eller a inte fan. Eller vad du anpassade för att visa:

Jag ska erkänna - den här processen var hårdare än vad jag förväntade mig, men det undviker helt att behöva vara värd för någonting på din egen server eller få SSL-certifierad. Om du har några frågor eller problem, fråga i kommentarerna och jag försöker hjälpa till. Om kommentarerna är stängda, gå vidare till vår svarssida; och snälla, om du hittade den här handledningen hjälp, dela den på ditt favorit sociala nätverk. Du kommer också noga att kolla in vår gratis, fullständiga guide till marknadsföring av sociala medier och överväga att lägga till Pinterest i din strategi också.

Utforska mer om: Apputveckling, Facebook.