Creating your first Facebook Application – Tutorial

Facebook Application development is now-a-days in a big demand. As the platform of Facebook is growing day by day , as its application development is also increasing day by day. So its a good time to get your hands dirty with Facebook Application Development in order to carry on with such a big platform.

 There are two scenarios for creating facebook applications

1) Premium domain with SSL certificate Enabled :

You can create facebook application , if you have bought a domain with SSL certificate enabled as facebook won’t allow you to create apps for its platform , if you don’t have a domain with SSL.

2) Heroku account :

If you don’t have a premium domain with SSL certificate available , then there is a free way to do it via “Heroku Cloud Platform” , which gives you the capability of storing and retrieving your Facebook application and as well as provide you free “SSL” service too.

In this tutorial we are going to create Facebook Application via Heroku as its free and easy. So without further ado , lets get started…

Steps for Evaluation

____________________________________________

Step 1 : First of all you need to  get to this url : https://developers.facebook.com/ .

Step 2 : Now click on the “Apps” option on the top left corner as shown in below picture.

____________________________________________

____________________________________________

Step 3 : Now what you need to do is to get to this url : https://www.heroku.com/ .

Step 4 : Create your Account in above url that is Heroku Cloud Platform.

Step 5 : After clicking on “App” Option , you will be given an option to choose “Create a new app” click on that as shown.

____________________________________________

____________________________________________

Step 6 :  After clicking on “Create a new App” , You will be prompted to enter your ” Display name” and “Namespace”.

Note  : Display name is used to give a unique name to your app that would be visible. and Namespace is the name or tag via which your app within facebook would be accessible.

____________________________________________

____________________________________________

Step 7 : Now go to “https://dashboard.heroku.com/apps” , after creating your account with heroku you will be confronted with below kind of environment.

____________________________________________

____________________________________________

Step 8 : Now go to this url : https://toolbelt.heroku.com/windows . And download Heroku Toolbelt for Windows.

Note : Heroku Toolbelt is a command line program for uploading , downloading  and updating your heroku facebook applications.

____________________________________________

____________________________________________

Step 9 : After downloading “Heroku Toolbelt” , install it in your computer and shortcut will be added to your desktop , double click on the shortcut and open it and you will see a “windows or linux command line environment”.

Step 10 : Now you need to download the app into your local hard drive. for that type in the following commands in your “Heroku Git Bash”. First of all give your email and password for authentication.

____________________________________________

Commands

____________________________________________

Step i  : Type in the following command and you will be prompted to give your email and password so give it.

$ heroku login

Enter your Heroku credentials.

Email: adam@example.com

Password:*******

Step ii: Then you will be prompted with public key so type "Y" for yes to generate a public key.
Could not find an existing public key.

Would you like to generate one? [Yn] Generating new SSH public key.

Uploading ssh public key /Users/adam/.ssh/id_rsa.pub

Step 11: Now go to https://dashboard.heroku.com/apps and click on “Create a new App” Button.

____________________________________________

____________________________________________

Step 12 : Give a name to your app whatever that would be , and click on “Create a new app” button.

____________________________________________

____________________________________________

Step 13 : Your app will be listed in Under “Apps” Section. Now click on your app.

____________________________________________

____________________________________________

Step 14 : Under “Settings” Option , you will find “git url” as shown , copy this url or take  a note of it.

____________________________________________

____________________________________________

Step 15 : Now open your git command back and type int the following commands

____________________________________________

Commands

____________________________________________

Step i : type in the following command , below is the url of your app at heroku , for accessing it.

Note : git clone is used to download or make a copy of your app present at "Heroku Cloud" to your local hard drive so that you make changes to your app.

$ git clone git@heroku.com:myfirstfacebookappever.git

Step ii : After cloning , go to your downloaded repository either by command line or via GUI.

____________________________________________

Via Command Line

____________________________________________

Step iii : First of all check out in which directory you are present by typing the below command and hit enter. $ ls Step iv: You will see your directory with a name “myfirstfacebookappever” in my case , if you have given some other name you will find it with that name.

____________________________________________

____________________________________________

Step iv: Now navigate to that directory via below command $ cd myfirstfacebookappever

____________________________________________

____________________________________________

Via GUI

____________________________________________

Step v: Navigate to the following url as shown in below picture , according to your own username of windows.

____________________________________________

____________________________________________

Step 16 : Now open “Notepad ++” or any other Text editor your prefer the best and save it in a directory of “myfirstfacebookappever” with a name “index.php”. and type in the following code into it.

Note : To find your “App ID” and “Secret Key” , go to “Facebook Dashboard” where you have created your first app in my case it is

____________________________________________

____________________________________________

Code

____________________________________________

<?php

require 'php-sdk/facebook.php';
$facebook = new Facebook(array(
'appId' => 'YOUR_APP_ID',
'secret' => 'YOUR_SECRET_KEY'
));

?>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> Facebook PHP </title>
</head>
<body>
<h1> Hello World d</h1>

</body>
</html>

____________________________________________

Step 17 : Now go to your new facebook app “Settings” option. and fill in the below blanks

1)  App Domain : The domain of your app

2) Conact Email : Your email address

____________________________________________

____________________________________________

Step 18 : Now save everything and click on “Add Platform” Button. you will be confronted with several options click on “App on facebook option”

____________________________________________

____________________________________________

Step 19 : Now fill in your canvas url , the url at which your app will be displayed within facebook

Note : Must put “/” at the end of “Canvas URL” and “Secure Canvas URL”.

____________________________________________

____________________________________________

Step 20 : Now open your “Git Bash” command line once again and type in the following command to update the changes in your index.php file and upload it to heroku cloud.

____________________________________________

Command

____________________________________________

Step i : $ heroku create

Note : With above command you will be able to create a copy of your application and would be ready to upload it with a new name to your heroku cloud

____________________________________________

____________________________________________

Step ii : $ git add . Note : The above command is used for adding the changes Step iii: git commit -am “changed” Note : The above command is used to commit changes Step iv) : git push heroku master Note : The above command is the final step of uploading every file along with its update to heroku cloud.

____________________________________________

____________________________________________

Step 21 : Now go to url https://dashboard.heroku.com/apps and delete your old app and click on the newly uploaded app and change its name to “myfirstfacebookeverapp”.

____________________________________________

____________________________________________

Now click on the app

____________________________________________

____________________________________________

Step 22 : Rename the app name from “secure-refuge-8166″ to “myfirstfacebookappever” and click on rename button.

____________________________________________

____________________________________________

Step 23 : Now its time to check our application whether it works or not so now go to your “Canvas URL” :https://apps.facebook.com/facebooappever/

____________________________________________

____________________________________________

Reference : You can also find the same blog at http://baidartuts.altervista.org/creating-your-first-facebook-application-tutorial/

____________________________________________