Friday, November 2, 2007

Create First Facebook Application


Getting Started:
To create your Facebook application you need a Facebook account. You can sign up free for Facebook at www.facebook.com. Once you have your account you’ll need to install the Facebook developer application. This little tool will allow you to generate your application profile and get an API key. Once you’ve logged into Facebook visit: www.facebook.com/developers/ or click the following link to add the developer Application.

Add the Facebook Developer

I have developed my Facebook application in PHP. You no need to write a single line of code to interact with facebook, All things are given by Facebook it self as a PHP Rest Client library files. You want to just use those APIs to interact with facebook to your appliction. You can grab the PHP version of the library at developers.facebook.com/resources.php. Download the ‘PHP (4 and 5) Client Library’.

Once you’ve downloaded the library unzip it into a folder that is accessible by your PHP scripts. So you would have something like /php_include_directory/facebook/ and in that folder you will have the entire Facebook PHP Client Library (3 folders: client, footprints, php4client). I’m using PHP5 so my examples will be using the “client” directory of the library. The footprints folder is an example application.

Configure Your Application Settings:
Facebook requires that you register each application you make. Once you’ve logged into Facebook and installed the developer application go to the developer panel (or click here). Inside the developer application click “Set Up New Application”.

Required Fields:
1. Application Name: This is important because it’s what users will see when they are browsing the application directory. Currently the name field is the only thing used when searching for applications. So it’s at this point.

Optional Fields:
1. Support E-mail:
You need to provide your email address. The facebook developers contact you through this email address when any new updates or any problems in your application.

2. Callback URL: This is where things start to get confusing; a callback URL is meant to be the root directory with the slash included, of the content for your facebook application on your server. For my application, i place the facebook application directory in my server's root; this callback URL is crucially important as it is your end of the Facebook application service. If this URL is not provided correctly your application will not work.

Facebook call back URLs work essential like proxy servers, including caching. The reason for this? Obviously Facebook doesn’t want applications with crappy hosts diminishing the results for its users, so it caches FBML (Facebook Markup Language) output and checks periodically for updates.

Eg: http://www.myserver.com/myfacebookapplication/

3. Canvas page URL: The canvas page URL is simply the Facebook virtual directory pointing for the content in your application.

Eg: http://apps.facebook.com/myfacebookapplication/

4. Application Type: This one is pretty simple; if you’re designing a desktop application that connects to Facebook for some operations, then check the desktop option. If you’re designing an application that can be run off of your website, then pick website.

5. Mobile Integration: sorry i didn't used this option.

6. IP Addresses of Servers Making Requests: You can restrict to access your application except from some IPs through using this optional field. Provide comma separated IP addresses here to access your application.

7.Can your application be added on Facebook?: If you want users to be able to add your application to their facebook account, then check the yes button. This means that users will be able to access the canvas page, add your application to their profiles, and post news feed items regarding your application.
Note: If you are still in the development stage of your application, don’t check the “no” button because you want to prevent users from accessing your application, as this will also prevent you and any developers you are working with from testing the application as a user; check the “only developer’s may install application” checkbox further down the page to prevent normal users from tampering with your application in production.

8. Terms of Service (TOS) URL: The terms of service URL is meant to be a link to a terms of service document hosted on your server; unless you’re trying to build a Facebook app where you can potentially run into some privacy issues, I’d recommend leaving this blank.

9. Application Icon: First, every application should have an icon, period. Your icon will be shown alongside your application name in every instance the app name is displayed, so it’s important for establishing branding. The icon dimensions are 16 by 16 pixels and it must in the GIF format.

10. Post-Add URL: This URL can be on your local hosting, and users are redirected from Facebook to here immediately after adding your application.

Eg. http://app.facebook.com/myapplication/install.php

11. Application Description: Self-explanatory. This is the description that appears next to your application on the “About Application XYZ….” page.

12. Post-Remove URL: When a user selects to remove your application they are not sent to the ‘Post-Remove URL’ as they have removed the application and so will have no further contact with it. A POST request will be sent to this address in the background however containing the uid of the leaving user.

13. Default FBML: This is the FBML that will be visible in the profile by default.

14. Default Profile Box Column: There are two columns on any Facebook profile page: the wide one on the right and the narrow one on the left. Users can drag and drop your application on their profile to either column, but if you want to specify a default column you can do it here.

15. Developer’s Only Mode: If you don’t want any noobs (normal people) messing around with your application while you’re still in the process of developing and testing it, check this button.

16. Side Nav URL: This is an important one. If you want Facebook users who have installed your application to be able to access it via sidebar, you need to provide them with a URL so they can have a link on their sidebar. For many applications this link is the application’s primary entry point.

17. Privacy URL: If you have some custom privacy options that you’d like your users to be able to set, place a URL to that here. Again, it can be internal like my sidenav example or external.

18. Help URL: If you have a help page for your users you can place a link to it (internal or external to Facebook, again) here. Although I have no idea where it actually appears as I have tried looking for mine.

19. Private Installation: If you want to prevent information about your application from appearing on news feeds or mini feeds then check this box.

20. Upload URLs: If you want to allow uploads in your application you need to fill out both of these fields. Frankly, I don’t know quite how the action field works, but the callback URL is just your local URL for handling the file upload.

Getting API and Secret Key: You should now see your application listed with a unique API Key and Secrete code (Navigation link : Click developer in the left panel and then click My Applicaitons link). You’ll use these within your application.



There are a number of API calls, and a list of them can be found here:
developers.facebook.com/documentation.php

Resources and Further Reading

These are very helpful pieces of information that I highly recommend reading before you get too far into making your Facebook application.

And of course the official documentation / developer site:

Other Facebook tutorials and how-to articles:

1 comment:

  1. ya its nice tutorial. Can u give sample application link u have developed.

    ReplyDelete

Yahoo! News: Technology News