Ozeetee Blog

Beginner iframe based Facebook app. Facebook Hello World app !! Your first Facebook app using PHP . After reading this post you will be able to do the following :

1. Setup a development environment to develop cool and awesome Facebook apps using PHP.
2. Create, setup and run your own iframe based Hello World Facebook app on Facebook.
3. Ask publishing permission from user.
4. Publish a hello world status message on your wall using a click.
5. Upload a Hello world image to user album.
6. Able to use Facebook PHP SDK and call Facebook Graph api using PHP.

You need to setup a development environment for developing Facebook apps. You need a local server for running your application, you need a IDE (Integrated Development Environment) for writing your PHP code and you need Facebook PHP SDK to talk to Facebook Graph api.

In this post I am just going to setup the server and make you run your first Facebook Hello world app. I am going to skip setting up the IDE section and cover it in my future post. For editing php files you can use any text editor. I use Notepad++. Download and install it from here.

If you already have a php development environment with web-server installed you can skip to step 3.

1. Download and install Wamp server

Wamp stands for Windows Apache MySql and PHP. Its a fully configured server for php. Click here to go to Wamp server home. Download and install latest version of Wamp server. Installation is very simple and just one click. Just install with the default values. If you have installed it to C:\ drive ie. C:\wamp. Then your web root will be C:\wamp\www. This is the folder where all your php files will reside. i.e. all your apps will reside here. I will reference this folder (C:\wamp\www) as <webroot> afterwards.

2. Start your Wamp server

In windows goto Start > WampServer> Start Wamp server. It may take a while to completely start the server. Check the status icon of the Wamp server in windows task bar. The status should be running. To check whether the serve is running or not open browser and type address http://localhost/. This should open up the default page of the server. If you are unable to see any page, click the icon on the task bar and restart all services.

3. Download Hello World Facebook app from github

I have created a hello world Facebook app containing all the necessary files for creating an iframe based Facebook app. Download all the files from here.

4. Put all the files into hello folder into your webroot

1. Create a folder hello in your <webroot>.
2. Put all the files download into the hello folder
3. Structure would be <webroot>/hello/index.php.

5. Register your app on Facebook

5.1 Go to  Facebook developer.

5.2 Click +Create New App button

5.3 Enter App Name as Hello World and click Continue

5.4. You will be asked to enter the Captcha image to pass the security check.

5.5. You will be shown the app configuration screen. Fill as follow 

In the App Display Name enter Hello World (Prefilled).

In the App Namespace enter your own value. Something like hello-<yourName> or anything you like. If you fill “hello-gaurav” then your app url would be http://apps.facebook.com/hello-gaurav.

Enter your Contact Email

Click on App on Facebook button

Enter Canvas URL as http://localhost/hello/

Click Save to save the configuration.

6. Change config.php file

Open <webroot>/hello/config.php file using any text editor. Change the variables $appId, $appSecret and $canvasPage from the values generated in step 5.5 (See above). 

1
2
3
4

// Fill the following after registering your app in Facebook
$appId = '208979572494583'; // Change this to according to your configuration
$appSecret = '6d4a9681a7ad82a979886b2c1005536b'; // Change this to according to your configuration
$canvasPage = "http://apps.facebook.com/hello-gaurav/"; // Change this to according to your configuration

7. You are done. Now run the application.

Congratulations you are now done. Now run the application be going to your canvas page url generated in step 5.5 (See above). ie http://apps.facebook.com/<your_name_space>/

Click on the links and see the result. Enjoy .

In my next post I am going to tell you about the IDE to be used for developing Facebook apps. Stay tune and keep following me.