Een eigen pagina ‘applicatie’ toevoegen aan je Facebook fanpagina!

4

Dit is mijn allereerste blog, vandaar dat ik nog een beetje aan het kijken ben naar de mogelijkheden binnen mijn website. De laatste tijd is er veel veranderd binnen de Facebook omgeving. Vandaar dat mijn eerste blog gaat over het toevoegen van een eigen simpele Facebook applicatie. Veel mensen noemen dit ook wel een ‘tabpagina’. Maar je kan dit ook een menu-item of externe pagina noemen.

Wat heb je nodig?
Er zijn een aantal dingen nodig om een applicatie aan je Facebook fanpagina toe te voegen. Allereerst heb je een eigen Facebook fanpagina nodig. Het is dus niet mogelijk om een eigen applicatie toe te voegen aan je persoonlijke Facebook profiel. Daarnaast heb je een eigen server nodig waar je de gewenste pagina’s die je wilt toevoegen op kan hosten. Ik gebruik in het onderstaande voorbeeld een pagina van Pinterest. Maar het is de bedoeling dat je deze tutorial gebruikt voor het toevoegen van je eigen ontworpen applicatie. Je moet dus al een eigen applicatie gehost hebben op de server van je website.

Stap 1: Facebook developers account
Voor het toevoegen van een applicatie op je Facebook fanpagina heb je een Facebook developers account nodig. Ga naar developers.facebook.com en log-in met je gebruikelijke Facebook gegevens.

Stap 1

Stap 1: Inloggen in je Developers Account


Stap 2: Applicatie overzicht

Klik bovenin de menubalk van de Facebook developer omgeving op ‘Apps’. Je komt nu op een overzichtspagina van alle applicaties die je hebt ontworpen.

Overzicht Facebook Developer Account

Stap 2: Overzicht van je Developers Account


Stap 3: Applicatie aanmaken

Klik rechts bovenin net onder de menubalk op ‘Create New App’. Nu komt er een pop-up formulier waarop je een aantal gegevens mag invullen. Zoals hieronder staat weergegeven.

Applicatie Aanmaken

Stap 3.1: Het aanmaken van een applicatie

Als voorbeeld voeg ik de Weeronline Pinterestpagina toe aan de fanpagina van Eivissa Media. Ik gebruik dit in mijn voorbeeld zodat iedereen het zelf uit kan proberen.

Invullen Applicatie Gegevens

Stap 3.2: Invullen van Applicatie Gegevens

Vul bij ‘App Name’ de gewenste naam van je applicatie in en vul bij ‘App Namespace’ een andere naam in. App Namespace is een soort unique ID van de applicatie die je gaat toevoegen. Bij de ‘App Namespace’ zijn cijfers niet toegestaan.

Klik daarna op ‘continue’ om verder te gaan.


Stap 4: Gegevens van de applicatie

Nu kom je op de onderstaande overzichtspagina van de applicatie. Vul hier de gewenste gegevens in van je applicatie.

Invullen van Facebook gegevens

Stap 4: Invullen van Facebook Gegevens

Naam Omschrijving
Display name: Is de naam die je wenst te koppelen aan de applicatie.
Namespace: Unique ID van je applicatie.
Contact e-mail: Vul hier een geldig e-mailadres in. Mocht er iets mis gaan of mochten gebruikers vragen hebben over je applicatie. Dan kunnen ze je bereiken.
App Domains: Vul hier de domeinnaam in van je website. Als het bijvoorbeeld mijn eigen applicatie is, vul ik hier www.eivissamedia.nl in.
Hosting URL: Niet nodig. Maar dit is als je applicatie via een externe partner van Facebook wilt hosten.
Sandbox Mode: Als je de applicatie alleen wilt testen, kun je de applicatie alleen voor developers zichtbaar maken.

Stap 5: Gegevens van de applicatie pagina
Na het invullen van de gewenste gegevens, kan je nu kiezen waar je de applicatie aan wilt toevoegen. Zoals je ziet is het mogelijk om voor verschillende extensies je applicatie te ontwikkelen.

Deze tutorial is gericht op het toevoegen van een applicatie binnen de omgeving van je Facebook fanpagina. Daarom klikken wij op ‘Page tab’. Na het klikken op ‘Page tab’ kun meer informatie invullen over je applicatie. Zoals in het onderstaande screenshot.

Invullen van Facebook applicatie gegevens

Stap 5: Invullen van Facebook Applicatie Gegevens

Naam Omschrijving
Page Tab Name: De naam van je applicatie.
Page Tab URL: Vul hier de URL in naar de applicatie. Dus niet naar de homepage van je website. Maar echt de hosting van je applicatie of pagina.
Secure Page TAB URL: Vul hier de SSL ‘beveiligde’ URL in van naar je applicatie. Dit is tegenwoordig verplicht op Facebook. De URL begint met: https://.
Page Tab Edit URL: Hebben wij niet nodig. Maar dit kan gebruikt worden zodat je developers de Applicatie nog kunnen aanpassen.
Page Tab Image: Selecteer hier de afbeelding die je wilt tonen in het menu van Facebook.
Page Tab Width: Sinds de nieuwe tijdlijn van Facebook zijn er twee formaten van de tabpagina’s binnen de Facebook omgeving. Als je de pagina smal hebt opgemaakt is het verstandig om 520 pixels aan te klikken. Maar als deze applicatie is ontworpen voor de huidige Facebook standaard kun je gewoon ‘Wide 810px’ aanklikken.

Klik op ‘save’ om alle bestanden op te slaan.


Stap 6: Toevoegen van de applicatie

Nu kunnen wij de applicatie als tab toevoegen aan de gewenste Facebookfanpagina. Bovenin het overzicht van je applicatie, staat een App ID. Met deze cijfers kun je de applicatie toevoegen aan je fanpagina.

Gebruik de onderstaande URL om de applicatie toe te voegen aan je Facebookfanpagina. Wijzig in de URL de ‘APPLICATIE_ID’ met je eigen App ID die bovenaan de overzichtspagina staat van je net toegevoegde applicatie (zie onderstaande screenshot 6.1).
Vul bij ‘DE_APP_URL’ de URL in van je applicatie, deze heb je ook ingevuld bij stap 5.
Ik vul hier meestal de Secure Page TAB URL in.

http://www.facebook.com/dialog/pagetab?app_id=APPLICATIE_ID&next=DE_APP_URL

Applicatie ID

Stap 6.1: Gebruik je Applicatie ID

Na het surfen naar deze URL in de browser, kom je op de activatiepagina om je pagina daadwerkelijk toe te voegen. Selecteer de gewenste fanpagina waaraan je de applicatie wilt toevoegen.

Klik daarna op ‘Add Page Tab’.

Applicatie fanpagina selecteren

Stap 6.2: Selecteer je Fanpagina


Bekijk je fanpagina!

Surf nu naar de Facebookfanpagina en je zult zien dat de applicatie is toegevoegd.

Nog even dit:
Deze tutorial is bedoeld om de omgeving van het toevoegen van Facebook applicaties te verkennen. Via de tutorial kun je via een makkelijke wijze een externe pagina toevoegen aan je Facebookfanpagina. Binnen de Facebook developer omgeving kun je verder kijken wat er allemaal mogelijk is.
Mochten er nog onduidelijkheden, opmerkingen of suggesties zijn, laat deze dan achter via een reactie. ×

Succes!

4 Comments

  1. Hey Patrick,

    Tof dat je bent begonnen met bloggen! Facebook is een mooi onderwerp, ik krijg bij mijn blog daar de meeste bezoekers op en ook de meeste vragen over. Mochten ze vragen over Facebook apps hebben stuur ik ze mooi hiernaar toe!

    Ik ben benieuwd naar je volgende blog (als deze komt?)

    Groeten,
    Mark

    • Hoi Mark,

      Thanks voor je interesse! Je mag ze allemaal doorsturen, leuk! Mijn volgende blog komt eind volgende week online, ik ben nog een beetje aan het puzzelen welk onderwerp het gaat worden.

      Volg me anders ook op Twitter ;).

      Groeten,
      Patrick

  2. Margie E. Miranda says:

    Om gebruik te maken van de meeste functies van de graph api, heb je een access token (beveiligde sleutel) nodig. In deze post leg ik in het kort uit hoe je via een facebook applicatie een (tijdloze) token kan opvragen.

  3. vera says:

    Tanx! super handleiding :)

Leave a comment