Graag ontgrendelen hoe je een eenvoudige Facebook-fanpoort bouwt zonder te betalen voor hosting

Houd er van of verafschuwd het, iedereen en hun hond is tegenwoordig op Facebook; dus net als alles wat populair is in het leven, is het volkomen ondermijnd door marketingtypen. Een ongelooflijk effectief gebruik van een door Facebook gehoste merkpagina is mensen ertoe aan te zetten de pagina leuk te vinden door een aantal geheime leden-alleen inhoud te maken; meestal aangeduid als een “ventilatorpoort”. Dit is gevuld met exclusieve video's, downloads of misschien een winkelbon - we gebruiken er een bij MakeUseOf om onze fans gemakkelijk toegang te geven tot alle huidige wedstrijden.

Dit soort eenvoudige Facebook-app was in het verleden relatief eenvoudig te maken, maar Facebook vereist nu dat alle pagina-tab-apps een veilige versie hebben - een HTTPS toegang tot de URL - maar dat is nog eens $ 100 per jaar bovenop uw bestaande hostingkosten voor uw site. Zelfs als u een kleine e-commerce winkel runt, kunt u PayPal als betaalprovider gebruiken en daarom geen SSL-certificaten nodig hebben. Maar maak je geen zorgen, want Facebook is ook een partnerschap aangegaan met Heroku - een cloudhostingbedrijf - wat betekent dat je je eigen eenvoudige Facebook-app kunt maken en gratis op een veilige server kunt hosten. Wil meer weten? Lees verder terwijl ik een eenvoudige app-pagina op een Facebook-fanpage maak, gratis gehost op Heroku.

Registreer als een ontwikkelaar

Voordat u apps gaat maken, moet u een geregistreerde ontwikkelaar zijn. Ga naar developers.facebook.com om aan de slag te gaan en klik op green Registreren knop rechtsboven indien nog niet. Je hebt wel een telefoonnummer nodig om te registreren, maar verder is het gratis.

Als u al bent geregistreerd, klikt u met de grote klik op Apps in de bovenste werkbalk om een ​​overzicht te krijgen van uw huidige apps.

Maak een nieuwe app

Hier begint het plezier. Klik op Maak een nieuwe app. De naamgeving doet er niet echt toe, maar kies duidelijk iets dat relevant is. Het naamruimteveld wordt toegevoegd aan de URL van uw fanpagina wanneer de gebruiker op dat tabblad klikt; je kunt het leeg laten, maar dan zien ze de app-ID in de URL, wat een beetje lelijker is. De naamruimte moet ook zijn uniek, dus maak je niet eens druk met zoiets “testapp” anders krijg je een foutmelding. Schakel ten slotte het vakje in dat aangeeft dat u gratis hosting van Heroku wilt.

Na het invullen van de captcha, wordt je uitgenodigd om het type hosting te kiezen dat je van Heroku wilt - selecteer PHP en accepteer. Facebook maakt automatisch een nieuw account voor je bij Heroku als je dit nog niet hebt en vult de URL-instellingen vooraf in je basisbegrippen in, wat leuk is. In feite is het erg moeilijk om deze stap omhoog te verprutsen.

Op de pagina met app-gegevens zou je ook het type app willen instellen dat een app is “Paginatab”, en zorg ervoor dat de relevante URL's daar ook worden ingevoerd - ook dit zou automatisch moeten zijn. Sla dan op.

Heroku First Steps

Wanneer je klaar bent, ontvang je een e-mail van Heroku met details over hoe je je wachtwoord kunt wijzigen en de Heroku kunt downloaden “gereedschapsgordel” voor uw systeem. Voor degenen onder u die niet bekend zijn met Heroku, is het geen traditionele host in die zin dat u zich kunt aanmelden bij een FTP-adres en bestanden kunt uploaden; in plaats daarvan werkt Heroku met Git, een versiecontrolesysteem. Nadat u de toolbelt hebt geïnstalleerd, moet u de site eerst klonen naar uw lokale schijf - dit geeft u een directory die een spiegel is van wat wordt gehost op Heroku. Wanneer u wijzigingen in deze bestanden aanbrengt, synchroniseert u ze allemaal opnieuw om Heroku bij te werken.

De instructies voor deze eerste synchronisatie zijn opgenomen in uw welkomst-e-mail en het is een eenvoudige eenregelige opdracht die uniek is voor uw hostingadres - kopieer en plak gewoon vanuit de e-mail. Uw hosting-URL is volkomen willekeurig - in mijn geval was dat droog-bos-7743 - het wordt willekeurig gegenereerd en maakt helemaal niet uit, omdat gebruikers het niet zullen zien. Open de nieuw aangemaakte map en kijk rond.

Heroku heeft behoorlijk veel functionaliteit ingebracht, maar we hebben het meeste niet nodig. Doe open index.php en kijk rond. Zoek de volgende regels bij het begin van het bestand:

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

en onmiddellijk daarna, kopieer in deze:

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

Maak je geen zorgen als dit allemaal te ingewikkeld voor je is - ik zal je binnenkort een voltooide sjabloon geven. Een ondertekend verzoek wordt vanaf Facebook naar uw app gestuurd, die informatie bevat over de gebruiker - of deze beheerderstoegang heeft en of deze de pagina leuk vond of niet. Als u precies wilt weten wat er wordt verzonden, voegt u het volgende toe:

print_r ($ signed_request);

en je krijgt een volledige afdruk van het ondertekende verzoekobject.

Op dit punt moet ik toegeven dat ik echt moeite had om het ondertekende verzoek aan het werk te krijgen - het leek erop dat Heroku de gegevens bij het laden van de pagina aan het ontdoen was, en dat was pas na het laden van de JS API (een goede 10 seconden na het laden van de eerste pagina) ) die de pagina zou verversen en de juiste aangeven “vond” -status. Dankzij deze Stack Overflow-vraag leek de oplossing de code te verwijderen die HTTPS afdwingt voor onbeveiligde gebruikers. Verwijder het volgende blok code aan het begin van de sjabloon:

// Garandeer HTTPS bij productie als (substr (AppInfo :: getUrl (), 0, 8)! = 'Https: //' && $ _SERVER ['REMOTE_ADDR']! = '127.0.0.1') header ('Location : https: // '. $ _SERVER [' HTTP_HOST ']. $ _SERVER [' REQUEST_URI ']); Uitgang(); 

Nu, wanneer de pagina is geladen, hebt u een Booleaanse variabele - dat is a waar of a vals - die je vertelt of de gebruiker de pagina leuk vond of niet. Je kunt dit gebruiken met een simpele als verklaring om beide inhoud te tonen een of b:

Plaats dat vlak na de opening tag in index.php. Als je een voorbeeld hebt bekeken van je pagina op Heroku, zul je merken dat er heel veel extra functionaliteiten zijn, zoals pagina's die je leuk vond, knoppen om updates te posten enz. We hebben dat echt niet echt nodig, dus ik alles eruit gehaald inclusief de JavaScript SDK voor Facebook, waarbij alleen de CSS en onze fan-poort overblijven. Dit is de uitgeklede code die ik heb gebruikt (dit is een afbeelding - kopieer de plak van PasteBin als je dat wilt):

Je zou de delen die zeggen moeten bewerken “geen fan” en “ventilator” om uw standaard- en geheime inhoud respectievelijk te bevatten. Als u uw inhoud liever in een apart bestand bewaart, gebruikt u:

omvatten ( "secret.html");

om externe bestanden te importeren.

Synchroniseer met Heroku

Nadat u alle benodigde bewerkingen in uw bestand heeft aangebracht, moet u synchroniseren met Heroku - dit doen we door “voortvarend” onze lokale kopie naar de “hoofdtak” bij Heroku. Zorg ervoor dat je in de juiste directory staat vanaf de opdrachtregel, typ:

git commit -am "verandert berichten"

(u kunt wijzigingenbericht vervangen door een notitie voor uzelf over de wijzigingen die u deze keer hebt aangebracht - het is een goede gewoonte om deze gegevens bij te houden)

en dan

git push heroku master

Wacht tot het commando is voltooid, want het kan even duren.

Laatste stap: voeg de app toe aan uw pagina

Nu de app is gebouwd, moeten we deze als een tabblad toevoegen aan uw merkpagina. Merkwaardig genoeg wordt dit gedaan met behulp van een speciaal ontworpen URL:

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

Vervangen YOUR_APP_ID met de ID vermeld op uw app-gegevens, en YOUR_APP_URL_ON_HEROKU met de URL voor uw Heroku-hosting. Het laden van deze speciale URL zal dan de “toevoegen aan uw pagina” dialoogvenster, waaruit u de juiste merkpagina kunt selecteren om uw paginatab toe te voegen.

Dan hey presto - het zal een nieuwe knop op je pagina zijn, zoals deze:

Zoals u kunt zien, hebben we nog geen afbeelding voor het tabblad opgegeven, zodat deze als standaard wordt weergegeven. U kunt dit doen op de pagina met app-gegevens. Dat is eigenlijk alles; als je dat tabblad laadt, mijn vervanger index.php zal je ofwel laten zien als een ventilator of a geen fan. Of wat je ook hebt aangepast om te laten zien:

Ik geef toe - dit proces was moeilijker dan ik had verwacht, maar het vermijdt volledig de noodzaak om iets op je eigen server te hosten of SSL-gecertificeerd te worden. Als je vragen of problemen hebt, vraag het dan in de comments en ik zal proberen te helpen. Als de commentaren zijn gesloten, ga dan naar onze Answers-website; en alsjeblieft, als je deze tutorial nuttig vond, deel hem dan op je favoriete sociale netwerk. Ook wilt u waarschijnlijk onze gratis, complete gids voor sociale-mediamarketing bekijken en overwegen ook Pinterest aan uw strategie toe te voegen.

Ontdek meer over: App-ontwikkeling, Facebook.