Subscribe to My adventures in coding!        RSS Feed

Facebook and Heroku web application startup

Icon Leave Comment
What do I need?

Favorite PHP IDE or editor

Heroku Toolbelt ( )

Facebook user ( )
Facebook developer ( )
Heroku ( Created through Facebook)

Lets get started

Once you have a developers account on facebook you can begin. The first thing you should do is take a good look at the Docs ( https://developers.f...ocs/guides/web/ ). Once you are familiar with the layout of the docs then we can begin.

We first go to and click the button that says “+ Create New App”. This will give you a lightbox with a form to name your app and also give it a namespace. The name is the name that you would search for to find the app on facebook. The namespace is the the url name that will be used. On the same lightbox is a box that says “Yes, I would like free web hosting provided by Heroku”, this box will need to be check. Then click “continue”. You will then get a security check, enter the code and select continue.
On the next page you will see a new lightbox with you heroku hosting questions. The first thing is the environment, we will select PHP. Then we input an email to use for the heroku login. Once these are filled we can click create.

You now have a live facebook web application! Should we stop there? No. We will build a “kidz Jokes” app for the example.

Creating our application

Heroku setup:
If you have a heroku account and have downloaded / installed the heroku Toolbelt, you can skip this section.

The first thing you will need to do to set up you heroku account is to check your email and click the link to take you to heroku and create a password.

The next step will be to download and install the heroku toolbelt. This will give you access to the heroku command-line client software. The software will allow you to use Git to access your files and upload your files. If you are not familiar with Git wikipedia says,

“In software development, Git (/ɡɪt/) is a distributed revision control and source code management (SCM) system with an emphasis on speed.[3] Initially designed and developed by Linus Torvalds for Linux kernel development, Git has since been adopted by many other projects.

Every Git working directory is a full-fledged repository with complete history and full revision tracking capabilities, not dependent on network access or a central server.”

Once you have downloaded and installed the heroku toolbelt you can login using the Git Bash software that was included. You will need to type heroku login in the prompt and hit enter. It will then prompt you to enter your email. This is the same email you used when you create your application on facebook. It will then prompt for your password. You should now be logged in to heroku’s git service.

Downloading your files:
When we created our app a set of files was added to your heroku account as a placeholder for your app so you can see that it is live on Facebook. We will now download these files so we can begin working on our app.

While still in the Git Bash software, and logged in to heroku ( described above ) we will change to the directory you want to download the files. Now we need to clone our project. In the command line tool you will type “git clone [email protected]:yourUrl.git -o heroku” where yourUrl is the git url of your app on heroku. If you dont know your git url you can logon to and see the details of your app or look at the app tab of your facebook developers account.

Your files will now be in a folder titled your git url name where you had your git software pointing prior to downloading the site pages.

Editing your application:
Now that your files are downloaded we can begin to build our application. You will need to open you app files in your favorite PHP editor or IDE ( I use netbeans ). The first file to change is the index.php file. We will rename it to index_old.php so we still have it for reference if needed. Then you will need to create a new index.php file.

In the new index.php file you will need to create a small html page to view from facebook. I chose to use a simple hello world page.

With the files changed we need to upload the new files to heroku so we can see our application work.

First we need to commit the changes to the files to our local Git repository. We will again be using Git Bash to do this. You will still need to be logged into heroku and be in the directory where your local files are being held. Then we will use the commit command to add the changes along with a comment of what we did for future reference. The commit will look like this “git commit -am “Changed name of the original index.php and added new index.php for testing””. This will add the changes and the new file to your local repository.

Once this is completed you can push the files up to the heroku server. To do this we need to use the push command. But, before we push we need to make sure our remote location is set to heroku by using “git remote add heroku [email protected]”. This will make sure the remote location is heroku. Now to upload the files to heroku. For this we will use “git push heroku” to change the files on the heroku server.

Now to see if it works. We need to now go to and click on the apps tag to see you application listing. Click on the application’s name and then the edit app button. Then you will need to click on the section that says “App on facebook” and add your heroku url to the canvas url section as http:// and the Secure canvas url as http:// ( Facebook will not allow a canvas page to not use https:// protocol ). Now you can save your application setting and test it.

To test your application got to, where yourNamespace is the namespace you gave the app when we created it.

There you should see your application on a canvas in the facebook site.

Congratulations you just created your first application on facebook and edited it.

Next will be how to use the facebook social plug-ins with this application.

I also added a pdf of this for you to have.
Attached File  Facebookappbeginnerstutorial.pdf (234.09K)
Number of downloads: 205

0 Comments On This Entry


Trackbacks for this entry [ Trackback URL ]

There are no Trackbacks for this entry