formulier integreren in Facebook pagina

Het is mogelijk om je online bestelformulier te integreren met je eigen Facebook pagina en zo klanten een bestelling te laten plaatsen via je Facebook pagina. Voorbeelden hiervan zijn te vinden op de Facebook pagina van Eenvoudigtebestellen.

Doorloop eerste de gebruikelijke stappen om door in Excel je eigen formulier te maken en deze te uploaden en converteren naar een online bestelformulier. Lees vooraf eerst de tips zodat je een mooier resultaat kunt krijgen en zodat eventuele fouten verholpen kunnen worden.

Opmerking: Een Facebook pagina is maximaal 810 pixels breed. Wil je voorkomen dat gebruikers van links naar rechts moeten scrollen, probeer dan je formulier niet breder te maken dan deze 810 pixels. Omdat kolombreedtes in Excel niet gemeten worden in pixels kun je als hulpmiddel het onderstaande plaatje downloaden en (tijdelijk) in je Excel invoegen. Dit plaatje is 810 pixels breed en geeft dus de juiste indicatie voor de totale breedte van je formulier. Ben je klaar met je formulier in Excel, dan verwijder je het plaatje weer uit je Excel.

In de volgende screenshot is het Excel bestand te zien dat we in dit voorbeeld gebruiken om een online bestelformulier te maken en te integreren met Facebook.

Log in op www.eenvoudigtebestellen.nl zodat je in je eigen beheeromgeving terecht komt en upload het Excel bestand. Eenmaal geupload zie je bovenaan het bestand in de lijst van formulieren verschijnen. Door op de link 'bewerk' te klikken kun je de eigenschappen van het formulier wijzigen. De diverse mogelijkheden zijn beschreven in de beheer sectie. Voor de integratie met Facebook hebben we de publieke URL nodig van het formulier, zoals omcirkeld in de volgende screenshot.

Misschien handig om eerst het online resultaat te bekijken en te testen voordat je verder gaat. Kopieer de URL of webadres in je browser adresbalk en open de website.

Open https://developers.facebook.com/apps in je browser en log in met je standaard Facebook account. De eerste keer zal Facebook je vragen om je als 'ontwikkelaar' te registreren.

Klik op de groene knop '+ Add a New App' rechtsboven en klik vervolgens op de 'WWW website' knop.

We maken geen gebruik van de 'Quick Start' wizard maar gaan gelijk verder naar het menu door op de knop 'Skip and Create Add ID' te klikken.

Vul bij 'Display Name' de naam in van je nieuwe tabblad. Bij 'Categorie' kies de optie 'Apps voor pagina's' en laat de rest van de velden leeg.

Klik op de knop 'Create App ID' waarna je naar de zogeheten 'App Dashboard' wordt geleid. (Het kan zijn dat je eerst een captcha moet oplossen om te bewijzen dat je mens bent.)

Eenmaal in de 'App Dashboard' aangekomen, klik op 'Settings' in het linker menu en vervolgens op de knop '+Add Platform'.

In de popup die verschijnt selecteer je de optie 'Page Tab' als platform.

Vul vervolgens in:

• je e-mailadres in 'Contact Email' (noodzakelijk als je je nieuwe tab publiekelijk wilt maken)
• de URL of webadres van je online formulier uit stap 2 in 'Secure Page Tab URL'
• de naam van de tabblad in 'Page Tab Name'

Je kunt eventueel ook nog een plaatje uploaden bij 'Page Tab Image'. Dit plaatje moet 111 pixels breed en 74 pixels hoog zijn. Klik uiteindelijk op 'Save Changes'.

De volgens stap is een beetje vreemd maar noodzakelijk. Om je nieuwe tabblad toe te voegen aan je Facebook pagina, moet je eerst de volgende URL aanpassen en daarna naar deze URL gaan:

https://www.facebook.com/dialog/pagetab?app_id=JOUW_TOEPASSING_ID&next=JOUW_WEBADRES

Vervang in de URL de onderdelen JOUW_TOEPASSING_ID en JOUW_WEBADRES voor de 'Toepassings-ID' en 'Secure Page Tab URL' zoals bij 'Instellingen' of 'Settings' zijn aangegeven. ]

Bij het voorbeeld dat bij deze beschrijving gebruikt wordt, hoort dan de volgende URL:

https://www.facebook.com/dialog/pagetab?app_id=1639218509693174&next=https://www.eenvoudigtebestellen.nl/bij/voorbeeld/DeBakker.aspx

Als je de URL hebt aangepast en naar die pagina gaat, dan krijg je de volgende popup te zien:

Opmerking: Je moet wel de rol van 'administrator' hebben van de desbetreffende pagina om een nieuw tabblad aan de pagina te kunnen toevoegen.

Je hebt nu een extra tabblad binnen je Faceboek pagina gemaakt en zolang je bent ingelogd op Facebook kun jij deze extra tabblad zien. Als je tevreden bent met het resultaat dan wil natuurlijk dat iedereen (Facebook gebruiker of niet) je extra tabblad kan zien en bestellingen kan doorgeven.

Om je tabblad publiekelijk te maken, klik op 'Status & Review' in het linker menu en vervolgens zet het schuifje van 'NO' naar 'YES'.

Ga vervolgens naar je eigen Facebook pagina (door in de adresbalk van je browser de URL van je Facebook pagina in te typen of door uit de 'App Dashboard' te loggen. Je komt dan weer bij de standaard inlog pagina van Facebook. Log hier weer in.)

Facebook laat standaard 4 tabbladen zien ('Tijdlijn', 'Info', etc.). De overige tabbladen zijn de selecteren via de optie 'Meer'. Eenmaal ingelogd zie je bij 'Meer' ook de optie 'Tabbladen beheren'. Daarmee kun je je tabbladen opnieuw rangschikken en je nieuwe tabblad naar voren halen.

Het uiteindelijke resultaat van het voorbeeld is: https://www.facebook.com/eenvoudigtebestellen/app_1639218509693174/

Facebook heeft verschillende weergaves voor Facebook pagina's op de PC, tablet, mobiele telefoon en via de Facebook app. De weergave en opties voor tablets, mobiele telefoons en de app zijn beperkt waardoor o.a. extra tabbladen niet worden getoond. Om deze beperking te omzeilen zijn er de volgende mogelijkheden:

A. Maak een 'aanzet tot actie' knop

Je kunt op je Facebook pagina een 'aanzet tot actie' knop maken die zichtbaar is op elk platform (PC, tablet, mobiel en app).

Ga naar je Facebook Pagina en klik op 'Aanzet tot actie maken'.

Een venster wordt geopend waarin je een knop kunt kiezen, in dit geval 'Shoppen'. Vul vervolgens de URL of webadres van je bestelformulier in bij het vakje 'Website'.

Klik op de knop 'Maken' om de instellingen op te slaan en de nieuwe knop op de pagina te plaatsen. De knop ziet er in een mobiele browser als volgt uit:

B. Maak een generieke link naar de pagina

De link in stap 7 (https://www.facebook.com/eenvoudigtebestellen/app_1639218509693174/) werkt niet in een browser op een tablet of mobiele telefoon. Facebook zal de gebruiker automatisch naar hun mobiele versie van de website herleiden (beginnend met https://m.facebook.com) waar vervolgens het tabblad niet wordt ondersteund.

Wil je gebruik kunnen maken van één link die zowel op PC's als op tablets en mobiele telefoons werkt, bijvoorbeeld voor het posten van een bericht met daarin de link, doorloop dan de volgende stappen.

Log eerst weer in op https://developers.facebook.com/apps en selecteer de 'App' die je in de vorige stappen hebt aangemaakt. Ga naar de settings (zoals ook in stap 5) en klik op '+ Add Platform'.

Selecteer vervolgens 'Website' als nieuwe platform.

Een nieuwe sectie 'Website' is toegevoegd aan de 'Settings' overzicht. Vul hierin de URL of webadres van je bestelformulier in en klik op 'Save Changes'.

Klik vervolgens op '+ Add Platform' en selecteer 'Facebook Canvas' als nieuwe platform.

Een nieuwe sectie 'Facebook Canvas' is toegevoegd aan de 'Settings' overzicht.

Vul nu een naam in de sectie 'Namespace'. Deze naam bepaalt (zodra je de nieuwe settings hebt opgeslagen) de URL van de 'Canvas Page' e.g. https://apps.facebook.com/naam. Dit wordt tevens de generieke URL of webadres van je nieuwe link naar je bestelformulier op Facebook. Aan de naam zijn een aantal regels verbonden: het moet meer dan 7 karakaters bevatten, mag geen hoofdletters bevatten en moet uniek zijn binnen Facebook.

Vul vervolgens in 'Secure Canvas URL' de volgende URL:

https://www.eenvoudigtebestellen.nl/canvas/redirect.aspx?URL=FACEBOOK_WEBADRES_VAN_TABBLAD&MOBILE=WEBADRES_JOUW_FORMULIER

Waarbij FACEBOOK_WEBADRES_VAN_TABBLAD de volledige URL of webadres van je tabblad in Facebook is (zie stap 7) en waarbij WEBADRES_JOUW_FORMULIER de volledige URL of webadres van je formulier is (zie stap 2).

Bij het voorbeeld dat bij deze beschrijving gebruikt wordt, hoort dan de volgende URL:

https://www.eenvoudigtebestellen.nl/canvas/redirect.aspx?URL=https://www.facebook.com/eenvoudigtebestellen/app/1639218509693174/&MOBILE=https://www.eenvoudigtebestellen.nl/bij/voorbeeld/DeBakker.aspx

Laat het invoerveld 'Mobile Site URL' verder leeg.

Klik op 'Save Changes' om alle nieuwe settings op te slaan. Je ziet dat onder 'Canvas Page' of 'Canvaspagina' de URL is gewijzigd en de 'Namespace' heeft overgenomen.

Gebruik nu de URL onder 'Canvas Page' of 'Canvaspagina' als link naar je Facebook pagina tabblad. Wanneer een gebruiker op deze link klikt dan wordt de gebruiker doorverwezen naar Eenvoudigtebestellen, waar wordt vastgesteld of de gebruiker een PC, tablet of mobiele telefoon gebruikt. Bij een PC wordt de gebruiker naar de volledige Facebook pagina gestuurd. Bij een tablet of mobiele telefoon wordt de gebruiker rechtstreeks naar het bestelformulier op Eenvoudigtebestellen gestuurd.

https://apps.facebook.com/debakker

Wanneer je je online webformulier wilt aanpassen of updaten, dan doe je dit door eerst je oorspronkelijke Excel aan te passen (of helemaal opnieuw te maken) en deze via je beheeromgeving in www.eenvoudigtebestellen.nl te uploaden. Zorg dan dat je eerst je 'oude' webformulier hebt verwijderd en stel bij het nieuwe webformulier de oorspronkelijke URL in (zie stap 2). Hierdoor hoef je verder niets te wijzigen aan je Facebook tabblad.