I have been working on development of a facebook app from the last few weeks. I had some initial hiccups initially with trying to figure out where what was and what that does and why and so on.. I found some tutorials on the net, some of them were outdated, some were incomplete.. It seemed complete, but never worked after I did what it asked me to do... Some of the reasons were because of facebook updating their API quite often, some changes in the way the API is used by different code writers and so on... Well, to add to this, I am an amateur web developer and had little programming stints with MySql and PHP. Well it was first hard to figure out what $_POST["name"] does while trying to figure out the bigger picture of getting the app working..
I have wondered always why some of the things are not as straight as they should be always. Well I have found an answer to suit me.. Things are not straight after all.. Where's the fun if everything is straight and what would celebrations mean after something is accomplished. I have been successful in getting the stuff to work after some struggle with each of the different components. I would like to celebrate it with a toast to facebook, PHP, MySql and notepad++... Well Also I would like to contribute this programmer's tutorial of “how to write a facebook app?" Well its targeted at people like me: who wants to get it work, but are struggling to understand a lot of things that are necessary to make it work...
Well, I assume there must be a number of tutorials on the internet out there by now.. How is this different from the rest? Well, for one it’s new and updated to the latest facebook API, and secondly as I mentioned earlier, my target audience is slightly novice and people who want to make things work, but struggling to find the smaller pieces of the huge Jigsaw puzzle. Well for the professionals, there might be some stuff that I might be doing wrong too... You could add to the community by commenting on the right and wrong parts... Third and most importantly, I shall also target my tutorial in helping the people setup a web hosting service for the facebook app. This could be quite a challenge as I faced it myself. Will try to keep it easy read, and detailed, so bear with the stuff you already know...
I will divide the tutorial into 2 parts..
FACEBOOK APP TUTORIAL
Target Platform: Windows OS, Requirements: Text Editor, SSH Connectivity Tool, Web Browser, facebook account, web hosting account, SFTP/FTP Client, Database Admin,
For the starters, download a copy of Notepad++. This will be your editor for editing PHP files. You could simple use the windows notepad too, but only it does not support syntax highlighting, Multi-File View, Brace and Indent Guide, and lot other feature which will help in writing syntax free php scripts. Believe me, you will NEED it.
Now to create an app, first you need to have the facebook developer app in your profile. Login to facebook and add it here. Once you have allowed the app to have access to your profile, you are ready to create your first app...
CREATING YOUR APPLICATION: GETTING THE API KEY
After you agree to the terms and conditions of facebook and give it a name, you will see the settings screen for your app. It’s got some important information about your app like the Application ID, API key and Secret... These are the keys used by facebook to authenticate and differentiate your app from others. Keep it a secret.
The URL to return Call is the next thing that needs to be entered. This is the location of the actual web server where you will be adding the files. There are a lot of free hosting services available out there. I used the Solaris based- Joyent FB accelerator. They support Facebook application hosting specifically and are configured to handle the traffic trend for a popular facebook app. Well, What’s more it’s free for the first year.
WEB HOSTING AND CONFIGURATION
So next step is to create a free account with the Joyent web hosting service. Create using a simple form here. You will need to add the API key in the form. Once created, you will be mailed a list of passwords to your mail id. Don’t get alarmed, I will go through each and every one for your benefit.
You have just got the domain name for your new facebook app which becomes the base for URL to return Call to be entered in the app settings. For now just add the domain name created by the hosting service as the URL to return Call. You will need a SSH connectivity tool like Putty or OpenSSH. I have used the Putty in this tutorial which has whole load of other utilities too.
You will have to configure Putty to access your Shell. Under configuration, Create a hostname as SSHShellUserName@domainName. Select SSH, port 22, and when the port is opened, you will type the password. This terminal has just logged you in as a user on your web server. So you can access the web files here type :
cd /home//web/public
to access the web server directory. This is where all your web files will go into.. Another thing you would need is a SFTP client. I used filezilla client for this purpose and works amazing. You could also use the FireFTP addon for Mozilla.
With filezilla, you need to again create a profile under the site manager and add the SFTPUserName (same as the ShellUserName) and the password also. Under servertype, choose SFTP SSH file transfer type. I chose Putty and Filezilla both to accomplish different operations easily. Putty would help you in passing some specific instruction and listing and grep. You could do it with Filezilla also but more elegant in doing it on the terminal. To increase productivity under advanced tab in the site manager in filezilla, you could specify the default directories to be opened when a connection is successful. Once in, on your right is the web server and you can access the various directories here. Careful while doing anything erratic here, unless you know what you are doing. You could as well see the Public directory of your web server in the explorer type view.
I created a folder under the public folder for the new facebook app. So you might be required to make the modification in the Facebook >> Developer >> App Settings. Change the URL to return Call value from
“DomainName” to “DomainName//”*
*Do not forget to end it with the slash.
Next step is to configure the MySQL for Joyent for which the details can be found here. Its a straight forward process using the combination of Filezilla and Putty.
Joyent has a decent site admin to manage databases, but I prefer phpMyAdmin over the default one. You could download it here and unzip the zipped file and copy it in the public folder. So your structure looks like this
Public >> phpMyAdmin
Documentation regarding the configuration of phpMyAdmin for your site can be found here. This step is required to setup the username and password to access the phpMyAdmin configuration page from the browser.
CREATING YOUR APPLICATION: CONFIGURING YOUR APP
We are nearly there.. Now it’s time to get back to our facebook app. Here just complete the other text fields. I am including some of the confusing ones only. The rest are straight forward.
BASIC>
PAGES>
CANVAS>
ADVANCED>
This is the end of Part 1 . Rest in Part 2…
I have wondered always why some of the things are not as straight as they should be always. Well I have found an answer to suit me.. Things are not straight after all.. Where's the fun if everything is straight and what would celebrations mean after something is accomplished. I have been successful in getting the stuff to work after some struggle with each of the different components. I would like to celebrate it with a toast to facebook, PHP, MySql and notepad++... Well Also I would like to contribute this programmer's tutorial of “how to write a facebook app?" Well its targeted at people like me: who wants to get it work, but are struggling to understand a lot of things that are necessary to make it work...
Well, I assume there must be a number of tutorials on the internet out there by now.. How is this different from the rest? Well, for one it’s new and updated to the latest facebook API, and secondly as I mentioned earlier, my target audience is slightly novice and people who want to make things work, but struggling to find the smaller pieces of the huge Jigsaw puzzle. Well for the professionals, there might be some stuff that I might be doing wrong too... You could add to the community by commenting on the right and wrong parts... Third and most importantly, I shall also target my tutorial in helping the people setup a web hosting service for the facebook app. This could be quite a challenge as I faced it myself. Will try to keep it easy read, and detailed, so bear with the stuff you already know...
I will divide the tutorial into 2 parts..
FACEBOOK APP TUTORIAL
Target Platform: Windows OS, Requirements: Text Editor, SSH Connectivity Tool, Web Browser, facebook account, web hosting account, SFTP/FTP Client, Database Admin,
For the starters, download a copy of Notepad++. This will be your editor for editing PHP files. You could simple use the windows notepad too, but only it does not support syntax highlighting, Multi-File View, Brace and Indent Guide, and lot other feature which will help in writing syntax free php scripts. Believe me, you will NEED it.
Now to create an app, first you need to have the facebook developer app in your profile. Login to facebook and add it here. Once you have allowed the app to have access to your profile, you are ready to create your first app...
CREATING YOUR APPLICATION: GETTING THE API KEY
Go into developers and you will need to setup a new application.
After you agree to the terms and conditions of facebook and give it a name, you will see the settings screen for your app. It’s got some important information about your app like the Application ID, API key and Secret... These are the keys used by facebook to authenticate and differentiate your app from others. Keep it a secret.
The URL to return Call is the next thing that needs to be entered. This is the location of the actual web server where you will be adding the files. There are a lot of free hosting services available out there. I used the Solaris based- Joyent FB accelerator. They support Facebook application hosting specifically and are configured to handle the traffic trend for a popular facebook app. Well, What’s more it’s free for the first year.
“Well, just wanted to add here that all the apps used by me are free and mostly open source. If you like to use them, then please be generous in donating to these communities. It takes a lot of hard work to create a free application that ease out some of your daily work load and costs them money. Every bit of your support will encourage us and them to do more for the community. “
WEB HOSTING AND CONFIGURATION
So next step is to create a free account with the Joyent web hosting service. Create using a simple form here. You will need to add the API key in the form. Once created, you will be mailed a list of passwords to your mail id. Don’t get alarmed, I will go through each and every one for your benefit.
You have just got the domain name for your new facebook app which becomes the base for URL to return Call to be entered in the app settings. For now just add the domain name created by the hosting service as the URL to return Call. You will need a SSH connectivity tool like Putty or OpenSSH. I have used the Putty in this tutorial which has whole load of other utilities too.
You will have to configure Putty to access your Shell. Under configuration, Create a hostname as SSHShellUserName@domainName. Select SSH, port 22, and when the port is opened, you will type the password. This terminal has just logged you in as a user on your web server. So you can access the web files here type :
cd /home/
to access the web server directory. This is where all your web files will go into.. Another thing you would need is a SFTP client. I used filezilla client for this purpose and works amazing. You could also use the FireFTP addon for Mozilla.
“I moved from using Mozilla to Chrome recently and am really loving the way chrome looks and feels. The only thing I was not happy with the initial release was the inability to open closed tabs. With this feature, and the fantastic homepage which includes your bookmarks (instead of taking menu space) and the recently visited sites and their thumbnails and of course a list of the recently closed sites. I am falling in love with chrome... “
“DomainName” to “DomainName/
Next step is to configure the MySQL for Joyent for which the details can be found here. Its a straight forward process using the combination of Filezilla and Putty.
Joyent has a decent site admin to manage databases, but I prefer phpMyAdmin over the default one. You could download it here and unzip the zipped file and copy it in the public folder. So your structure looks like this
Documentation regarding the configuration of phpMyAdmin for your site can be found here. This step is required to setup the username and password to access the phpMyAdmin configuration page from the browser.
CREATING YOUR APPLICATION: CONFIGURING YOUR APP
We are nearly there.. Now it’s time to get back to our facebook app. Here just complete the other text fields. I am including some of the confusing ones only. The rest are straight forward.
BASIC>
- ICON: Choose an Icon for your app
- DEVELOPERS: A list of developers who can access the app when in sandbox mode (developmental stage) Careful who you give access to, S/he can access the API Key as well as the Secret if he is a developer.
- DEFAULT CANVAS: Wide
- POST Add Redirect URL: Could be the same as the domain URL or in this format http://apps.facebook/
- CANVAS Page URL: Include the
in here - BOOKMARK URL: same as the CANVAS URL
- RENDER METHOD: Choose FBML as the app I will be describing wil be in FBML. You could later change it to IFrame as and when required
- CANVAS WIDTH: Full Width (760 px)
- SANDBOX MODE: Enable it during the developmental stage
- MOBILE INTEGRATION: not needed for this application so DISABLED
- JavaScript API Library White list Exception: DISABLED for this application