Creating Facebook Applications Tutorials [Part-1] The Setup

If you are reading this post then you must be probably wondering about "How do people make those Funny Horoscope Apps and those Top Mutual Friends Apps on Facebook? ". You have come to the right place my friend.. Because I was in that situation a couple of months ago. So here I bring to you my experience on Creating Facebook apps from scratch. In this Tutorial Series I will cover topic from the Basics of Creating Facebook Apps to the Best Practices of App development like Tagging, Photo Uploads, Games, Socializing your site etc.. I will also show you how to make a simple Facebook app Called "Top Mutual Friends". 

But before I begin I felt free to assume that You have sound Knowledge on PHP MySQL, JavaScript and HTML n CSS of-course. If you have no idea what these things are than please go through w3schools.com to get a brief idea about the languages and continue with this tutorial.

OK! Lets get Started with the Setting up your Developers Account then.. :)

Before you can start creating apps, you need to have a facebook developers account. To have one is as easy as opening a website (literally). Just go to http://developers.facebook.com after signing in to your facebook account. If you are new to Facebook Developers (Which you obviously are :P) and have opened it for the first time then, you will see a webpage something like this below. 

http://developers.facebook.com

You will see a  Register Now  button on top. Click on it!. Now if you have a verified facebook account, your "Registration" (I skipped most of it.. Was more like a survey :D) will continue with the normal flow. Or else it will ask you to verify your account via Phone(Please don't use your Mom's phone coz your facebook "updates" will get texted to her XD.. Eee.. ). 

Once you have verified and all set, Click on the button again. Accept the terms and conditions. You may or may NOT fill in the second step which looks like this on the right --->

Same on the third step. Hit OK. and "Yay! you are a Facebook Developer now" - Thats what they said :P

Once you have been welcomed as an developer, you will be redirected to your Apps Dashboard. Or if somehow got lost exploring the documentations(i will be covering those in later posts), You can click on the  Apps  menu on top. 

Now quickly click on  + Create New App  button. A Dialog box will pop up asking for App's high-priority details like

1. Your Apps Name : Your Applications Name which will appear on the search results . There is no restriction in choice of character but keep it within 32 chars. 
2. App Name Space :  The app namespace is used for defining custom Open Graph actions and objects (e.g., namespace:action) and for the URL for Apps on Facebook (e.g., http://apps.facebook.com/namespace). Means its like a variable facebook uses to address your app. It doesnt accept Caps or Spaces. As a PHP developer i would recommend you to use an Underscore ( _ ) than a hyphen ( - )
3. Web Hosting : If you already have a Web Host its well and good. If not you can apply for one at Heroku Services. You need a Web Host to host your app even if you are building apps inside facebook or even for websites with facebook login. You will get the idea why in my next blog.

Once you are done choosing an wonderful name and a namespace for your app. Hit Continue. After that you will be redirected to you App's setting page. 

Here you have do set some more fields before you can finally start building an App. 

Now the first thing you will notice about page is the App ID and the App Secret. App ID is the number that helps facebook to find your app from millions of apps. App Secret is like a key that helps to authenticate the Application and also is used to generate access tokens which gives the app access to users public/private data. Never share your App Secret or keep it public . You can reset  your app secret if it was disclosed by any chance. (Oops... I will have to reset mine now :D)

Fill in the details.. Keep in mind if you are hosing your app in a subdomain of website then do NOT include "www" in the url. Cahoose a category that your app belongs. Always enable the Sandbox Mode during development to avoid Negative feedback get your App removed before launching (True Story :( ).

Now Select how would you integrate your app with facebook.  The two options shown above are almost the same from the development perspective but still there are some differences. 

I would prefer "Apps on Facebook" if i have a SSL certificate i.e my website can also run on HTTPS Secure protocol. If you dont have that feature you can pay some extra bucks to your Web host and get it. This has been made mandatory by facebook on October. 

OR. If you want thing for free like me.. you can select "Website with Facebook Login" . Just give the URL to the address where you have hosted your app. on your web sever. You can use your Paid hosts or can use a free host with php that has CURL_INIT and JSON_DECODE functions enabled. I would recommend www.000webhost.com which provides unrestricted php access.

Now another difference between these two are, apps on facebook have their own side bar access etc. Which can be useful if you want to make Games or interactive applications on facebook. Games from Zenga like Farmville, MafiaWars, etc.. are integrated with this option. Whereas on the other hand the "website with facebook" option will redirect you to your site. I will go through this concept in my next posts. 

Choose the one that is best for you and Save.. We are done with the first step  of building a Facebook application. Until i write my next piece of tutorial about "Facebook App design Basics and Concepts". Do play around with the different options on the side menu.

Namaste!

(If you need any further help in starting your Apps, you can drop in your queries in the comments box and the author will make things simpler for you)