Chapter 3
In This Chapter
Understanding the types of Facebook core apps
Creating a Facebook app
Installing a Facebook app
Authenticating a Facebook app
You can develop apps for all kinds of reasons. Some apps conduct surveys, other apps sell things. Some are marketing tools. Some collect charitable contributions. You’re limited only by your ambition and imagination.
Facebook apps are, in effect, web applications that run inside the Facebook interface, and they can do most things non-Facebook web applications can do. The difference between standard web apps that don’t use Facebook API and Facebook apps that do is that the latter also integrate with Facebook, allowing users to interface with their close friends and family in the app experience. A Facebook app can duplicate just about any piece of functionality you see on Facebook.
When developing Facebook apps, in many instances you’re limited by your programming skills. Before getting deeply into this discussion of creating Facebook apps, realize that highly sophisticated games, marketing, and revenue-generating apps are usually developed by professional programmers. (But that doesn’t mean you can’t do it, too.)
Facebook apps are little programs that run inside the Facebook environment. A simple way to look at it is that Facebook is your operating system, similar to Windows, Mac OS, or iOS. Apps run in the core environment — the Facebook program and the capabilities the folks at Facebook have built into the core.
When developing apps for Facebook, it’s helpful to look at the Facebook platform as a group of core technologies. Depending on what your app does, it will integrate with one or more of these core technologies. The most commonly used core technologies are social plugins and platform dialogs.
Social plugins, discussed in Chapter 4 of this minibook, are some of the common objects you use in your daily interaction with Facebook. They include the Like button, the Send button, the Follow button, and Comments dialog boxes. When developing your Facebook apps, you can take advantage of these common objects and use them in your apps.
Facebook has lots of dialog boxes for posting to your timeline, posting to your friends’ timelines, sending messages, and so on. Your apps can generate these dialog boxes and accept input from users. Platform dialog boxes are discussed in Chapter 4 of this minibook.
Creating and deploying apps on Facebook is a huge, deep subject. To help you appreciate the possibilities and familiarize yourself with the process, we delve into setting up and installing a simple app. While creating apps can get complicated, installing them on your Facebook account isn’t difficult, thanks to the great tools the folks at Facebook provide.
In this chapter, you install a basic little app in Facebook to walk through the process. This app doesn’t exploit any Facebook objects, nor does it use social plugins or platform dialog boxes. You look at using these features in Chapter 4 of this minibook.
Creating and deploying an app on Facebook consists of two procedures, one on a non-Facebook server and the other inside the Facebook interface, as follows:
In this example, you take a simple mind-reading game app and install it on Facebook.
Before you can install apps on Facebook, however, you must first confirm your Facebook account.
Before you can install an app on Facebook, you need an app. Remember that an app is a separate file (or files, for more complex apps) located somewhere else on the Internet. The app itself is not installed and saved on Facebook’s servers. A Facebook app is a web app that runs inside the Facebook interface. For this example, we created a simple app; if you’re feeling adventurous, you can use your own app.
The following steps show you how to make an app available on a public web server:
<script type=text/javascript>
var iRandom;
function Restart()
{
iRandom = Math.floor(Math.random()*10)+1;
alert('Can You Read My Mind?'),
}
function Go()
{
var read = document.getElementById('myRead').value;
if (read>iRandom)
alert('Go Down!'),
if (read<iRandom)
alert('Go Up!'),
if (read==iRandom)
{
alert('You Read My Mind!'),
Restart();
}
}
</script>
<h2>Can You Read My Mind?</h2>
<hr />
<h2><img src="images/mindread.png" alt="Mind Reader" width="300" height="232" hspace="10" align="left" />Are You Psychic?</h2>
<p>I'm thinking of a number between 1 and 10. To test your mind-reading skills, type a number in the field below and click Go. If you guess wrong, you can try again until you get it right. To start the game over, click the Play Again button.</p>
<p>Good Luck!</p>
<p>I'm thinking of a number between 1 and 10:
<input name='MyRead' type=text id='myRead' size="5">
<input type='button' onClick='Go()' value='go'>
</p>
<p>
<input type='button' onClick='Restart()' value='Play Again'>
</p>
<p><em>If this took more than one guess, you're probably not psychic. Sorry.</em></p>
<hr />
<script type=text/javascript>
Restart();
</script>
This is a simple HTML form with one field and two buttons, some accompanying text, an image, and some JavaScript. The user guesses a number between 1 and 10 and types it in the field. When the user clicks the Go button, the script matches the number to a number randomly chosen when the page loaded. If he or she guesses correctly, a dialog box confirms the correct guess. If the wrong answer is chosen, the dialog box tells the user whether the number is higher or lower than the randomly generated one, allowing him or her to guess again.
The root directory is the main directory of the site. On the web, subfolders are typically accessed by tacking the directory name onto the back of the site’s domain name, as follows:
That’s it! To test the app, navigate in your browser to the URL where you saved the page, for example:
You should get the mind reader app shown in Figure 3-1.
Go ahead and try it if you want. If you guess wrong, a dialog box will let you know. Simply enter another number based on the feedback the dialog box provides, telling you to go up or down in the number value. When you get it right, the dialog box tells you that you’re a mind reader.
Getting the app to work on Facebook is fairly simple, after you know where to start:
This takes you to the developers greeting page. From here, you can branch off to pages for building websites, building mobile websites, or building Facebook apps.
This displays the Create New App dialog box, as shown in Figure 3-2. From here, you can name your new app and give it an app namespace. The app namespace is the directory where Facebook saves data about your app. The namespace needs to be different from other namespace names on Facebook. We named ours mymindread, so you can’t use that name.
You can name the app whatever you want; we named ours Mind Reader. You can use that name, too. Facebook saves apps with unique ID numbers that are generated when you save this dialog box.
This field requires seven letters. The namespace can’t be the same as any other namespace on Facebook. Also, the namespace can’t have any spaces, uppercase, or nonalphabetic characters. After you type the namespace, a message beside the App Namespace text box displays either a green Available message or a red Failed, depending on whether you type a namespace already in use. Just keep trying until you get an Available message. (Or you can change it later in the process.) The category is optional.
You see a security CAPTCHA.
The Basic Settings page appears. The following describes each option on the page. You can leave most of these options as is, unless you want to customize your app further:
You are selecting the platform with which your app will be integrated. A dialog box appears.
This is where you set up your app’s integration with your external app located on the other server, as shown in Figure 3-3:
Note that Facebook filled in the Canvas Page URL text box, based on the information you typed in the other text boxes. This is the URL to the app itself in Facebook. You could place that URL in the address bar of your browser while logged in to Facebook and go straight to your new app, as could anyone else logged in to Facebook. Posting the canvas page URL on your timeline, in messages, and on other web pages is one way to provide access to users.
Facebook checks the data you entered as it saves the app info. If any entries are not in the correct format, you’re prompted to change them.
That’s it! Although many apps require additional setup, the simple Mind Reader app does not. It doesn’t require any permissions or other settings.
You can make your app available to users in many ways. In addition to the method described in Step 8, you can also create a link on your business page, as described in the “Adding your app to a business page tab” sidebar in this chapter. For a description of the differences between tabs and canvas pages, see Chapter 2 of this minibook.
The Auth dialog box, shown in Figure 3-4, allows the user to install your app on the user’s Facebook home page and authenticate the app. Authenticating an app grants it the permissions it needs to run properly. Permissions define which objects of a Facebook account the app needs. For example, if your app needs to post the user’s timeline, the Auth dialog box requests this permission from the user.
The App Details form is available by clicking App Details in the left sidebar of your app setup. Shown in Figure 3-5, the App Details section allows you to define which permissions the app needs to request from the users when they click the app from Facebook’s App Center. (App Center is a directory of apps available when users click Apps in the left sidebar of the news feed). The App Details section enables you to configure exactly how your app will appear and work in App Center.
Here is a description of the options in this form and how they affect your app's appearance in App Center:
In addition to the preceding options, you may need to tweak the permissions of your app. Click Permissions in the left sidebar. You see the Configuring Permissions section, which lets you define the permissions that Facebook requests from the user as well as set the default activity privacy.
The following options are available:
To enter permission, start typing the permission string in the field, as shown in Figure 3-6. Facebook will then suggest available strings based on what you type.
To enter a permission, start typing the permission string in the field. Facebook will suggest available strings based on what you type.