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 URL voor HTTPS- toegang - 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 rechtsboven op de groene knop Registreren als je dit nog niet hebt gedaan. 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 Nieuwe app maken . 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 uniek zijn, dus neem niet eens de moeite met iets als "testapp" of je krijgt 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 app-detailpagina zou je ook het type app willen instellen als een 'Paginatab' en ervoor zorgen 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-toolbelt voor je systeem kunt downloaden. 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 volledig willekeurig - in mijn geval was het dry-woodland-7743 - het is 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. 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 "geliefden" -status zou aangeven. 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 een waar of een onwaar - die u vertelt of de gebruiker de pagina leuk vond of niet. U kunt dit gebruiken met een eenvoudige if- instructie om inhoud a of b te tonen :
Plaats dat net na de openingstag 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. Hier is de uitgeklede code die ik uiteindelijk heb gebruikt (dit is een afbeelding - kopieer de plak uit PasteBin als je dat wilt) :
U moet de gedeelten met de tekst 'geen fan' en 'fan' bewerken om respectievelijk uw standaard- en geheime content 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
Zodra u alle benodigde bewerkingen in uw bestand hebt aangebracht, moet u een back-up van Heroku maken - dit doen we door onze lokale kopie naar de "master branch" bij Heroku te "pushen". 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
Vervang YOUR_APP_ID door de ID die wordt vermeld in uw app-gegevens en YOUR_APP_URL_ON_HEROKU met de URL voor uw Heroku-hosting. Als u deze speciale URL laadt, wordt vervolgens het dialoogvenster 'Aan uw pagina toevoegen' geopend. Hier kunt u de juiste merkpagina 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, zal mijn vervangende index.php je tonen als een fan of een niet-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.