How to Integrate your applications into facebook

Desember 3, 2007 in MyWorld
Tags: facebook, web application

I would like to sharing my experience about integrating my web php application into facebook. I found out that is not as hard as what i’ve thought before, it is an easy, but I think integrate your application into face book is easier if you are using iframe than using FBML (FaceBook Markup Language). So in this article, I would like to demonstrate integrating my own application into facebook.

As you can see above this, here is my 4 applications in facebook, all is integrate by iframe method not by FBML. Let me describe each applications

Kronologger and UpdateKronologger is application for my micro-blogging social network,
One Application that named kronologger is application to read friend’s status in google map version. URL direct link is http://kronologger.com/map/last20kron.php
If you have account at facebook , you can see at http://apps.facebook.com/livekronologger If you like to add this application to your facebook account, you can add here

Second Application is UpdateKronologger. This Application for Posting Blog in Kronologger.com (MicroBlogging Social Network). See this application in facebook here. If you like to Add Application, Add here

Third Application is Disitu.Com , Disitu.Com is Blogging about Latest Information Technology, including Games, Gadget, Web, Software, Hardware and IT Related. you can see here, and you can add here

Now, The Last Application is RepublikBlog.com , This is Indonesian Blogosphere on the Map, I will use this application’s case for demonstrateing how to integrate your Application into facebook.

First of all, Create Application in your server. I create new file in my own server and i put my application in here http://republikblog.com/fb/fbrepublikblog.php

This is my application, Before Integrating your application into facebook, you must put your application in your server not in facebook’s server, remember this. If you like to see source code , you can see below this picture

Now you have application reside in your server, now the next step is register applicationin facebook account. Now you must go to facebook.com, sign in and open http://facebook.com/developers

Click Set Up New Application, see picture below this

Well, Entry name of your application, your email, your callback url, your canvas page url, application type and so on. see picture below this

CallBack URL is file that you have made in your own server. In Canvas Page URL, you should entry name of your application there. if your application is Sample then your application will reside in http://apps.facebook.com/Sample , mine is republikblog, so my application in facebook is located at http://apps.facebook.com/republikblog

In Canvas Page URL, Mark User Iframe instead of Use FBML. By the way, if you have known about FBML (FaceBook Markup Language) , you better to mark your application as use Iframe. In Application Type, Mark your application as a website.

Fill the rest of form application. Including Integration Points

Side Nav URL adalah Icon yang berada disamping menu pemilik account facebook. isikan dengan http://apps.facebook.com/[name of your application]. Mine is http://apps.facebook.com/republikblog

Now, if everythings all right, your application now will ready to use by yours or your friends. here is the screen shot of my application

That’s all. it is pretty easy. But it would be nice if you mastery FBML, and set up your application into facebook as FBML not as Iframe.