Chapter 2
In This Chapter
Seeing the difference between canvas apps and page tabs
Building your dev app
Defining roles for your app
Facebook Insights
If you’re embarking into the app-driving marketing space, it’s time to consider the format of your application. Facebook apps, like many other web apps, can be designed in a nearly unlimited number of formats. The sky is the limit. Facebook apps take on four major forms:
A myriad of Facebook features can be embedded into other websites, apps, and web tools known as Facebook Platform. With Facebook Platform, you can create an app that integrates with the Facebook API to use various Facebook features. These apps can be created in the context of any of the preceding applications, and can bring Facebook features right into your own website or mobile app. You can find out more about Facebook Platform for Websites in Chapters 3 and 4 of this minibook. In this chapter, we focus on page tabs and canvas pages.
When you develop an application, you need to know from the start whether the app will appear on a page tab or a canvas app. Page tabs and canvas apps have similar functionality, but they have enough differences (display size, for one) that one or the other may be better suited to house your app. The following sections describe page tabs and canvas apps to help you choose which is better for displaying your app.
Let us clarify the relationship among page tabs, canvas apps, and apps. All Facebook apps are built using Facebook Platform, which allows you to take the application you build (using any common web code language) and connect it to Facebook’s features. When someone uses your app in the context of Facebook, the app needs to be displayed somewhere. Canvas apps and page tabs are your two choices on Facebook:
Page tabs appear in the center of a business page; shortcuts to page tabs appear as thumbnail images below the cover photo on the business page. Page tabs take up a width of 810 pixels and appear in the same relative area as the timeline on your business page.
In a page tab, you can have a completely functional, interactive application, or you can simply display an image to enhance the look of your page. Companies often treat page tabs as a way of personalizing their social environment on the web. An example of a page tab app is shown in Figure 2-2.
A canvas app is 760 pixels wide by default. However, you have the option of making a canvas app a fluid width, in which the application expands to the width of the user’s browser.
Canvas apps offer a few additional interactive components for users that page tabs lack. A defining characteristic of canvas apps is the blank canvas given to the app to do practically anything you want inside the Facebook.com website. Canvas apps have the Facebook logo and other header information at the top. Unlike page tabs, canvas apps are not associated with any page information at the top, such as the number of Likes or the page name. Canvas apps all have ads on the right, with a list of other apps that the user has used and other similar apps above the ads. You can find and discover new canvas apps by clicking Apps in the left column of your Facebook news feed.
Because a canvas app redirects users to another page, you may end up developing a custom page tab as well to direct the user to your app.
If you create a canvas app as a promotional tool for your business, you’ll want to build a link in your business’s Facebook page to promote the app and its function. One retailer used a page tab as a customized look for its page with a button linking to the canvas app that housed its catalog. This was a great use of these two options because the page presents the branding and information about the company. However, when someone decides to look at the catalog, they link to another area (the canvas app) that they may spend several minutes reviewing.
Depending on the app, it may be obvious whether a page tab or a canvas app is the better choice. Other times, it’s not so simple to decide between the two. Table 2-1 gives you a rundown of the size and features of page tabs and canvas apps to help you decide which to use.
The first step to building your own app is to set up your app inside Facebook’s app builder. You take this step to become a developer on Facebook and to have a place to find all your apps.
Follow these steps to set up your first app:
An authorization screen appears, as shown in Figure 2-3. You need to allow the app to access basic information on your timeline to use it. This is all that’s required to have developer capabilities with Facebook.
After you complete the authentication, you see the apps page. The first time you go to the apps page, you see a blank screen and the Create New App button, as shown in Figure 2-4.
The Create New App dialog box appears, asking you to name the app. See Figure 2-5.
You can name your app whatever you want, but note that the namespace can’t have uppercase letters or symbols. For example, if you type fordummies in the App Namespace text box, your app’s URL will be http://apps.facebook.com/fordummies.
The App Namespace field must be filled in with a name that hasn’t been taken by another app. If the name you chose is taken, Facebook will immediately indicate that it isn’t available. (If you’re having trouble finding a name that hasn’t already been taken, you can always determine the namespace later.)
Leave the other fields blank, and your app will be fine. If you want to learn more about all these fields, be sure to check out Facebook Application Development For Dummies by Jesse Stay.
If Facebook needs any more verifying info here, they will ask for it. For instance, you may have to enter a series of letters and numbers to prove that you’re human (called a CAPTCHA). For most people, however, your app is created.
You just created your core app! You’re now on the configuration screen of your brand-new app, as shown in Figure 2-6.
After you create the app, you have a little bit more discovery to do to move on to the next step, where you integrate your app into Facebook. This app is the foundation that allows you to plug in any type of apps, including those hosted on page tabs and on canvas apps, as well as all other Facebook integrations for websites.
Every app has a timeline similar to a business page. The first part of the App Settings page displays your app icon and profile picture, which will appear on the app timeline page. The app icon will also appear on the left column of the user’s timeline if the user installs the app, as well as in the apps section of other canvas apps that the user runs.
From the App Settings page, you can change the following options:
You also need a server to host your app and a URL that points to the location on your server from which the app will load. This URL tells Facebook where to look for your app. You’ll use this URL in the website and app sections mentioned next.
In the section of the App Settings page that was shown in Figure 2-6, you need to select the type of app that you want to launch. Facebook has seven types of apps to deploy with the Facebook developer tools:
In the Canvas URL text box, enter the URL for the web page where your app is hosted. The secure Canvas URL text box typically takes the same URL, only with https instead of http. Users have the option to enable secured browsing using HTTPS on their Account Settings page. To support these users, you need to set up your destination URL on a secured server using an SSL certificate. This is the default destination for users viewing your app. If a secure URL isn’t available, users will be warned that they’re about to enter unsecured browsing. Facebook requires you to have an SSL certificate but doesn’t completely block out the unsecured version.
Please refer to the Android developer documentation to identify each of these.
The App Details page, shown in Figure 2-7, is where you customize details provided to users, such as descriptions of the app and where to find your privacy policy. Users see an authorization dialog box when you use Open Graph for your app. (Open Graph is the integration feature that Facebook uses to share activity on your timeline; see the following section for more.) To get to the App Details page, click the App Details link in the left sidebar (refer to Figure 2-6).
As you complete the text boxes in this app, you can click the web preview button on your screen to see how the dialog box will appear. Each URL text box just directs users to the page on your site that you enter as the source for that information. For example, if your privacy policy is at www.mycoolapp.com/privacy, enter that URL into the Privacy Policy URL text box.
Open Graph is the integration of Facebook that makes your app more engaging. Using Open Graph allows you to deeply interweave the social elements of Facebook with your app and create a more social experience. Begin by clicking Open Graph in the left sidebar (refer to Figure 2-6).
The foundation of Open Graph apps are stories, which contain apps, actors, actions, and objects:
In your app, you have an action that people do in your app and an object that people connect with by doing that action. For example, if your app allows users to track their movie experiences, the social activity that the users are sharing is watching a movie. In this case, the action is Watch. That action has the corresponding object, Movie.
An app like this would be targeted at making real-life experiences more social by sharing them with friends. These actions would be shared on the user’s timeline, in news feeds, and in the ticker. This takes the social act of Liking a page or an article a step further by allowing a Facebook app to define more actions. You have complete freedom to define your actions and objects. To get started in creating an Open Graph story, click the Create a New Story button (see Figure 2-8).
After clicking the Add Custom Story button, the dialog box shown in Figure 2-9 appears. You can add any action type you want and then associate it with a listed object type or create your own object type. When you’re satisfied with your selection, click the Create button.
If your selection is incorrect, Facebook will tell you why and you’ll need to adjust it to fit the parameters of Open Graph.
For each action type, your app settings page gives you a code that you use to build app functions around the action. You can add more actions and objects to your app.
After you create your story, you’ll be able to see a summary of the objects that a person has interacted with in your app.
When developing an app, you might be working as part of a team. Depending on the level of detail and the size of your team, you can add and remove team members from your dev app. Just like business pages, apps have administrators assigned to them who have rights to edit and manage the page. A dev app has a few additional roles, as shown in Figure 2-10.
The following list shows the roles assigned to a Facebook dev app:
Insights, shown in Figure 2-11, tells you which users use your app and how they use it. Although Insights provides limited data, the data is invaluable if you intend to use the app as a marketing tool.
Insights has several areas that provide critical information to the app developer:
All these items can be viewed by week, month, or a specific date range. You also can export the data to an Excel spreadsheet or a .csv (Comma Separated Value) file. These analytics are critical in measuring the effectiveness of your app. You can use this data also for marketing purposes to measure one effort against another.