what this Facebook Development !! Complete information on it !!

what this Facebook  Development !! Complete information on it !!

Getting Ready for Facebook Application Development Keeping with its user focus, Facebook makes it easy to both set up and maintain applications. Because your application doesn’t live on Facebook’s servers, you need to put certain things in place before you start developing. This chapter will cover setting up your environment so you can start coding your application. It will also cover some of the tools that Facebook provides you to help develop and debug your code. Getting to know a new platform can be daunting, especially one that has so many facets like the Facebook platform. To help you get your feet wet with the different aspects of the platform, Facebook provides you with a couple tools that let you explore the core API functions, test your Facebook Query Language, and see how your Facebook Markup Language will look in the different areas of the Facebook site. What’s Needed To get up and running with developing an online Facebook application, you need to have three things in place: • A valid Facebook account • Access to a web server running a supported middleware language • The client library for your particular middleware language If you’re working on a desktop application, you still need a Facebook account (for authentication), but you will need only the client library for your language because your interactions with the Facebook servers will be handled by your program and not a web server. 10 Getting Ready for Facebook Application Development Creating a Facebook Account Setting up a Facebook account is a simple process. If you don’t already have one, don’t worry; it’s free, and anyone can sign up to use Facebook. Just point your browser to http://www.facebook.com, and click the Sign Up button (see Figure 2-1). Figure 2-1. The Facebook sign-up screen The form asks a few simple questions about you and will send you a confirmation email to verify your e-mail address. After you confirm your account, you have the opportunity to join a network. These networks are grouped by academic institutions, locations, and businesses and are at the core of Facebook’s social structure’s organization. Once you join a network, you are able to access information about the people in that network. Understanding Facebook Layout and Terms If you’re new to Facebook (or even if you’ve been using it for a while), it’s useful to understand how Facebook names the elements in its layout. Facebook utilizes both two- and Getting Ready for Facebook Application Development 11 three-column layouts for different parts of its site with a header and footer containing global links. Except for the header and footer, users can edit their content layout. This is an important design consideration, because depending on where your content is loaded on a user’s page, you need to take into account different widths. On the far left of all pages, users have access to the different applications they have installed in the navigation bar. By default, only four appear (see Figure 2-2), so, depending on how many applications your user has, your application might not appear in their navigation bar. Obviously, if you’re designing an application, you want folks to not only use it but to also have it in a convenient location on their Facebook pages. Figure 2-2. The Facebook left navigation box When users first log in, they are taken to their canvas page. In Facebook-speak, a canvas page is the wide content on the right side of the web page, as shown in Figure 2-3. These pages generally have two- and three-column layouts, with the left application navigation, content in the center pane, and, for three-column layouts, “useful” information on the right such as upcoming birthdays for your friends, invitations to join groups or become friends with individuals, and the ability to update your status (telling your friends what you’re doing). 12 Getting Ready for Facebook Application Development Figure 2-3. The Facebook canvas page Another important page is the profile page. This is the page you see when you log on to Facebook. The layout on this page is slightly different from the canvas pages. There are still three columns, and the application navigation is still on the left. However, the content column (referred to as wide) has shifted to the far right, and it is separated from the application navigation panel by what Facebook calls the narrow column. Because users can change the layout of their pages, it’s important that you have multiple displays for your application depending on the column in which it’s located. Setting Up Your Server Since you host your own Facebook application, there is some setup you need to do on your web space. If you don’t have a web site (or access to one) that runs PHP, Java, or one of the unsupported languages with a client library, you can use one of the free web hosts available. You will need a middleware application server to handle the business logic for your application because Facebook provides methods only for retrieving data and displaying certain information. I’ll be using PHP for the examples in this book, but they should be relatively straightforward to translate into other languages. Getting Ready for Facebook Application Development 13 You can download the client libraries for all languages from http://developer.facebook.com/resources.php. If you’re using a *nix system (including OS X), you can simply do the following: wget http://developers.facebook.com/clientlibs/facebook-platform.tar.gz tar zxvf facebook-platform.tar.gz mv facebook-platform The previous snippet moves both the PHP 4 and PHP 5 libraries (along with the Footprints sample application). The PHP 4 library is in the folder php4client, and the PHP 5 library is in the client folder. Most likely you will be working with one library or the other, so you really need to move only one of the folders to your server to work on your application. Note ➡ Need some hosting? Joyent (http://www.joyent.com) recently partnered with Facebook to provide a free year of hosting for Facebook applications (http://joyent.com/developers/facebook). There is a waiting list, but it is a pretty good deal for a really good host. Other hosts that have a proven track record with Facebook apps include MediaTemple (http://www.mediatemple.net) and Dreamhost (http://www.dreamhost.com/). If you’re thinking smaller, you might want to try RunHosting (http://facebook.runhosting.com) or 110MB (http://www.110mb.com). It’s good to look at a few and see which one offers the best fit for what you want to do. Many of these web sites also have free database hosting (usually MySQL), which is a great way to get up and running with Facebook application development. Adding the Developer Application Once you have an account and have set up a server environment, the next step is to add Facebook’s Developer application. Go to http://www.facebook.com/developers, and install the application. Figure 2-4 shows the screen that users are presented with when installing a new application. The check boxes allow certain 

functionality to be performed by the application, and they give users the ability to turn certain aspects of the application on and off. Once you have read the platform application’s terms of use, just click the Add Developer button to install the Developer application. 14 Getting Ready for Facebook Application Development Figure 2-4. Facebook’s Developer application installation screen Once you’ve installed Developer, you are directed to a Facebook application that helps you manage the applications you are developing, including the most recent entries on the discussion board, news about the Facebook platform, links to your application management interface, and information on the status of Getting Ready for Facebook Application Development 15 Figure 2-5. Facebook’s Developer welcome screen It’s important to keep up-to-date with the platform status because Facebook is adding information about new tags, changes to the terms of service (typically clarifying hazy areas), systemwide outages, and, perhaps most important, platform changes that have the potential to break your application. Like with most things in Facebook, you can subscribe to an RSS feed to help you keep up-to-date with these changes (http://www.facebook.com/feeds/api_messages.php). Understanding How Facebook Applications Work Because you host your own application, it’s a good idea to go over how Facebook applications actually work. Essentially, Facebook provides your application to users when it is requested through Facebook. As you can see in Figure 2-6, each time a Facebook user interacts with your application, you set off a series of server interactions with the Facebook server farm and your server. Each time a user requests something from your application through Facebook, that request is passed to your server to create the initial REST call to the Facebook API. Once your 16 Getting Ready for Facebook Application Development the response to construct a display call (in FBML) and passes that back to the Facebook server. Facebook processes this information and creates an HTML response to the user. Because of the constant passing of information between servers, there is an additional level of complexity that can complicate tracking down bugs. You also need to consider this constant interaction when developing your application because you don’t want to make unnecessary API calls that will slow down your application. Figure 2-6. Basic Facebook architecture Getting Ready for Facebook Application Development 17 Creating a New Application Now, with all that out of the way, let’s set up an application. At this point, you need to tell Facebook about your application. In the Facebook Developer application (http://www.facebook.com/developers), click the Set Up New Application button, as shown in Figure 2-7. Figure 2-7. Setting up a new application The only required fields are the application name and the one confirming you have read the terms of service. However, to really do anything with an application, you will need to fill out the optional fields. Don’t worry—if you already set up an application and didn’t fill out these fields, you can change them by clicking the My Apps link in the Developer application. Note ➡ You need to remember that you can’t use the word face anywhere in your application name. Because of this prohibition, you are precluded from using words such as surface and faceted as part of your application name. A good thesaurus can help you get a bit more creative with your application names. In the optional fields, you can fill out more information about how your application works (see Figure 2-8). Perhaps the most perplexing field here is the Callback URL field. This is the field that handles your actual application and lives in the server environment you’ve set up. For example, if you have a web site for your application at http://fake.domain.com/facebookApp, this would be your callback URL. 18 G
Figure 2-8. Optional fields for Facebook application registration The following are the optional fields: Support E-mail: This is the e-mail contact for support questions for your application. Callback URL: This is the URL of your actual application on your server. If you’ve set up an application on your server at http://fake.domain.com/facebook_app, that is your callback URL (you’ll sometimes see this referred to as the callback metaphor). Canvas Page URL: This is the Facebook URL to your application. Getting Ready for Facebook Application Development 19 Application Type: Most likely this will be Website, but if you’re developing an application in Java (using the official client library) or one of the unofficial libraries that won’t be accessed primarily on the Web, select Desktop. IP Addresses of Servers Making Requests: This is a comma-separated list of servers able to make requests. If you need to lock down your application to a list of servers, this is where you add that information. Requests from other servers are then rejected. If you use this with an online application, the users will be presented with a fatal error in the response stating that an “Unauthorized source IP address” was used to access the application. Can your application be added on Facebook?: An answer of Yes to this question will allow people to add the application to their account. If you select No, users will be able to use the application but won’t be able to add it to their accounts. TOS URL: This is the URL to the terms of service for your application. If you use this, users must accept the terms of service before they can use your application. Developers: Your name should appear in this field by default. If you’re working with others to develop your application, put their names there too. Facebook Terms of Service Highlights Terms of service are something a lot of folks skip over…which they shouldn’t. If you’re one of these people, please take some time to go over these documents because they’re there to save you some headaches in the long run. As with any terms of service agreement, there are certain prohibitions that you should be aware of in terms of what is, and is not, permissible. There have been some recent changes to the Facebook terms of service that are designed to clarify some of the gray areas in the guidelines, and these will most likely continue to change as unscrupulous people look for loopholes. In an overly simplified version of the terms of service and guidelines, your application shouldn’t do anything illegal or encourage anything illegal. You should also not store any more information than you need from your users to make your application function. Almost all the information you need will be available to you with just your user’s identification number (UID). And, in case you missed it in the Facebook guidelines and terms of service, you are not permitted to sell your users’ information! 20 Getting Ready for Facebook Application Development Using Facebook Tools Facebook provides three important tools for learning and debugging Facebook applications in the Tools section of its Developers web site (http://developer.facebook.com/tools.php): the API Test Console, the FBML Test Console, and the Feed Preview Console. Because it’s good to have immediate feedback with your code and because it’s sometimes difficult to debug coding issues and determine whether the problem exists on your end (of course you would never code a bug!), we’ll start our adventure by looking at the test console for both the API calls and FBML. API Tab When you first arrive at the Tools page, you are presented with two tabs. The API tab has many of the API calls available to you so you can see what kind of data is being returned. I find it useful in my day-to-day programming to be able to see the data I expect to have returned in order to speed development. For starters, let’s take a look at a simple call to return a list of your friends. Simply select the friends.get option for the Method field. This will return an XML structure with a root element of . You’ll also notice a couple of XML namespaces and a location for the schema. If you run into issues with the responses, remember how you’re getting them. If it’s XML, you might need to deal with the root XML attributes. The Facebook API Test Console (Figure 2-9) is a great place to click around and see what different calls will return. Not only can you switch between the different API calls, but you can also change response formats to see what you will get when you change the Response Format field. As you experiment with the different calls, you’ll notice that some requests require additional fields. And, if you don’t fill out the required fields, Facebook will return error codes in the different response formats. I’ve listed these in the following sections for your reference.
Figure 2-9. Facebook API Test Console XML Here’s what the XML result looks like: 100 Invalid parameter uids fields callback
Figure 2-9. Facebook API Test Console XML Here’s what the XML result looks like: 100 Invalid parameter uids fields callback
Getting Ready for Facebook Application Development 27
Facebook does a lot behind the scenes to process your application, and it’s a good idea to get acquainted with these tools to see what will work (and what won’t) before you deploy your application. 28 Getting Ready for Facebook Application Development Feed Preview Console Tab The Feed Preview Console is useful when testing how the information pushed from your application will look when it shows up in the user’s feed. As you can see in Figure 2-12, this console consists of a bunch of text boxes to fill in different parts of the elements for the feed.publishTemplatizedAction API call. This comes in handy when testing the display of the news feeds elements of your code without spamming all your users. Figure 2-12. The Feed Preview Console Getting Ready for Facebook Application Development 29 Using Programming Tools If you don’t already have a favorite code editor, finding one can be challenging. Most likely you’ll start coding with something as simple as a text editor, but you’ll quickly find this to be a pain. Here are some editors that you might want to try to help you with developing your Facebook application: • Crimson (http://www.crimsoneditor.com/) [Windows] • ConTEXT (http://www.context.cx/) [Windows] • Dreamweaver (http://www.adobe.com/products/dreamweaver/) [Windows, OS X] • Eclipse PDT (http://www.eclipse.org/pdt/) [Windows, OS X, *nix] • EditPad Lite (http://www.editpadpro.com/editpadlite.html) [Windows] • Notepad++ (http://notepad-plus.sourceforge.net/uk/site.htm) [Windows] • phpDesigner (http://www.mpsoftware.dk/) [Windows] • PhpEd (http://www.nusphere.com/products/phped.htm) [Windows] • PhpEdit (http://www.waterproof.fr/) [Windows] • PHP Expert Editor (http://www.ankord.com/phpxedit.html) [Windows] • Quanta Plus (http://quanta.kdewebdev.org/) [*nix] • TextMate (http://macromates.com/) [OS X] One of the nice features of the majority of these editors is that you have the ability to add your own language references. Although there aren’t any FBML plug-ins yet for these editors (or at least any that I’m aware of), they could be built very easily. Summary This chapter introduced the necessary steps to create a user account on Facebook, to set up your server environment, and to register your yet-to-be developed application with Facebook. It also examined some of the concepts used by Facebook in how it names the different parts of its site and some of the tools that Facebook provides to help you try different parts of the platform (the API Test Console and FBML Test Console). You also briefly looked at how the Facebook platform interprets your code to represent your program to generate HTML for your end users (the Feed Preview Console). It’s important to remember that your application is being parsed on at least two servers, the web server your 30 Getting Ready for Facebook Application Development application is hosted on and one of Facebook’s servers, before the information gets to your users. You can control only one of those parsers, so code efficiently! Although you technically could create a Facebook application at this point, it was worth taking a step back and looking at the terminology that the Facebook platform uses for naming elements of pages and some of the tools it provides to help you not only learn about the platform itself but also to help you debug your code! In the next chapter, you’ll take a closer look at the different parts of the Facebook platform and start getting familiar with the syntax Facebook uses. You’ll also look at some of the tools Facebook provides to help you get comfortable with the platform as well as try different parts of the platform

No comments