Hoe maak je een Facebook app?

Hoe maak je een Facebook app?

1018 woorden

Facebook is booming business. Met 751 miljoen actieve gebruikers op 31 maart 2013 is het bereik enorm. Daar kan je goed gebruik van maken!

← terug

Steeds meer bedrijven ontdekken Facebook en willen hun klanten bereiken via Facebook. Dat kan op meerdere manieren. Bijvoorbeeld door het toevoegen van een ‘vind ik leuk’ knopje op je website. De gebruiker maakt op die manier gratis reclame voor je website op zijn of haar eigen Facebook tijdlijn. Deze tijdlijn wordt weer door al zijn of haar vrienden gezien. Een andere manier is door bezoekers iets gratis te geven, dat ze alleen via je Facebook pagina kunnen krijgen. Bijvoorbeeld een prijsvraag of actie.

In dit artikel wil ik in het kort uitleggen en laten zien hoe je een actie pagina kunt maken op Facebook. Dit wordt een Pagina Tab genoemd.

Update 16 januari 2014:
De Facebook Developers omgeving heeft een iets andere interface gekregen. De uitleg volgt in hoofdlijnen de zelfde stappen. Ik heb een aantal nieuwe screenshots toegevoegd onderaan dit bericht. Op een later moment zal ik het blog bericht updaten met de nieuwe afbeeldingen.
Bekijk screenshots.

Update november 2014:
Sinds november 2014 is het niet meer mogelijk om de likes van een pagina eenvoudig op te halen. Facebook ontmoedigt alle ‘like gate’ pagina’s en wil ‘merk commitment’ in plaats van ‘tijdelijk liken om te winnen’.

Update januari 2016:
De interface van Facebook is weer gewijzigd. Ik heb de nieuwe screenshots verwerkt.

Waarom een Facebook app?

Een van de manieren om je doelgroep te lokken naar je Facebook pagina is door het maken van een Facebook Tab app. Dat is een sub pagina die draait onder de Facebook pagina van je bedrijf of vereniging.

Dat ziet er zo uit:

Voorbeeld van een Facebook Pagina

Als je een app hebt aangemaakt komt er een knop in de navigatie van de pagina te staan. Als daar op wordt geklikt wordt de inhoud van de actie pagina ingeladen, binnen de website van Facebook.

Dit is dus een uiting binnen jouw eigen Facebook pagina, die je volledig zelf kan inrichten. Facebook staat niet toe dat je de standaard ‘tijdlijn’ weergave aanpast, dus dit is een perfecte manier om binnen de vertrouwde omgeving van Facebook een eigen actie te promoten.

Hoe ga je te werk?

1. Registreren als developer

Registreer jezelf als ‘Developer’ bij Facebook. Dit doe je op https://developers.facebook.com

2. Facebook app maken

Maak een nieuwe Facebook App aan via https://developers.facebook.com/apps. Rechts bovenaan de pagina staat een knopje ‘+ Add a New App’.

Nieuwe app maken

Geef aan dat je een ‘Website’ app wilt maken.

Selecteer website

3. Gegevens invoeren

Kies rechtsboven voor ‘Skip and Create App ID’.

Kies voor skip

Geef je ‘Display Name’ en een ‘Categorie’ op.

Gegevens invoeren

Let op: De naam mag niet het woord ‘Facebook’ bevatten.

Note: In deze uitleg ga ik er vanuit dat je zelf een Facebook actie pagina op je eigen website hebt staan. Mocht je dit niet hebben neem dan even contact op. Ik bied speciale Facebook actie hosting aan inclusief SSL certificaat.

4. Veiligheidscontrole

Voer de beveiligingscontrole in. In mijn geval zijn dat foto’s van een polshorloge.

Captcha controle

5. Basis pagina

Je komt nu op het Dashboard van de app terecht.

Basis pagina van de Facebook app

6. Pagina tab aanmaken

Klik links op ‘Settings’.

Settings

Klik op ‘Add Platform’ en kies voor ‘Page Tab’.

Add platform

Voer de ‘Secure Page Tab URL’ en de ‘Page Tab Name’ in. De Secure Page Tab URL is de pagina die je wil inladen binnen Facebook.

Voeg eventueel een afbeelding toe van 111x74 pixels. Dit kan later ook nog. Vergeet niet de pagina op te slaan.

Gegevens invoeren

Note: Sinds oktober 2011 is het verplicht om de pagina’s via HTTPS aan te bieden.

7. Koppel de tab aan je pagina

  • Onthoud de App ID en de Secure Page Tab URL

  • Open de volgende link om de App toe te voegen aan je pagina. Vervang de {app-id} en de {url}:

https://www.facebook.com/dialog/pagetab?app_id={app-id}&next={url}

8. Koppel je tab aan je pagina

Kies aan welke pagina je de Page Tab wil toevoegen.

Koppel aan pagina

De pagina is nu toegevoegd.

9. Publiceer je pagina

Vergeet niet nadat je klaar bent met testen om de pagina te publiceren.

Publiceer je pagina

Dat kan je doen via het kopje ‘App Review’ met de knop rechts in beeld.

Publiceer je pagina

10. Klaar!

Ga naar je Facebook pagina en bekijk het resultaat.

Wat kan je er uiteindelijk mee?

Op de gekoppelde pagina kan je je eigen actie voeren. Met dit voorbeeld script kan je controleren of de pagina binnen Facebook wordt ingeladen.

Voorbeeld PHP script

<?php

// ============================================================================
// Facebook detections
// ============================================================================

// Check if the request is signed to see if the page is loaded in Facebook
$signed_request = $_REQUEST["signed_request"];
list($encoded_sig, $payload) = explode('.', $signed_request, 2);
$data = json_decode(base64_decode(strtr($payload, '-_', '+/')), true);

// Debug
var_dump($data);

// ============================================================================
// Are we inside Facebook? If not quit the page.
// ============================================================================
if(empty($data)) {
  die("This can only be loaded from Facebook...");
}

?>

Bron: Facebook developers docs - signed_request

Heb je wat gehad aan dit artikel?

Als je dit artikel nuttig vond, wil ik je vragen om mijn pagina leuk te vinden op Facebook.

Facebook like

Alvast bedankt!


Meer informatie over Facebook apps vind je in dit artikel van Jaap Jacobs: Wat je nog niet weet over Facebook Apps.

Rutger Laurman
~ webontwikkelaar en adviseur

Freelance front-end webontwikkelaar met voorliefde voor gebruiksvriendelijkheid en interfaceontwerp. Samen met freelancers en internet bureau's uit regio Utrecht maak ik al meer dan 15 jaar websites en webapplicaties.