Simple Facebook Like Gate with Heroku Hosting

Learn the basics of how to create a Simple Facebook Like Gate for your Facebook Page App.

'Like Gate' is a Facebook gate in which a visitor must go through in order to view a specific app tab content of your Facebook fan page. The visitor must 'like' the page before viewing the content. This is also called a 'Fan Gate'.

First a simple Facebook app will be created and added to a Facebook page profile tab. Then a Facebook like gate will be integrated into the app.

Visit the completed Facebook like gate demo - PHP Sri Lanka Facebook fan page.

Creating and Configuring Facebook App

Sign into the Facebook developers account. If you don't have one yet, create an account. It is free.

Simple Facebook Like Gate with Heroku Hosting


Click on the 'Apps' tab on the top menu bar. See highlighted in picture below. Then click on the '+ Create New App' button.


You will be presented with 'Create New App' dialog box. Fill the App name and Namespace. Make sure you tick the Web Hosting option. I am going to use free app hosting provided by 'Heroku'. Then continue with the app setup.


Select PHP development environment as PHP. I am going to use PHP SDK for this simple app development.


After the setup your app will be assigned a URL pointing to Heroku servers. Browse to that location and find the live demo app. We will modify this app slightly later on this exercise.


The default app page provides information and configuration of your new app. I am going to use this app inside a Page Tab. Select 'Page Tab' section and give the app a name. Be sure to select Wide (810px) option before saving changes.


Have a look at your new Facebook App. In the new Facebook App click on the 'Learn How to Edit This App' link. You will be presented with information regarding how to edit this app further.


This is part one. Read the other parts too.

Part 1: Simple Facebook Like Gate with Heroku Hosting
Part 2: Developing and Deploying with Heroku
Part 3: Implementing the Facebook Like Gate

No comments:

Post a Comment