How to Build Facebook App to Page

How to Build Facebook App to Page

You want to create a Facebook App, but don’t know where to start? Or you have heard about Facebook Apps, but don’t even know what they are. Facebook Apps are everywhere on the site, and most of the more common ones are actually written by Facebook’s own developers. Photos, Events, and many other “core” features of Facebook are actually separate apps. And there are thousands of other third-party apps available for installation into your personal Facebook account.

What is an App? 

Notice I said “installation” and not “download”. An “App” (Not to be confused with the similarly not-quite-a-full-application called an “Applet”) is not really an “application” – which would be familiar to Mac users and just a word to Windows users, but “applications” and “programs” are roughly synonymous to each other as what software is called on a personal computer. They are installed from disk or downloaded, but either way, they actually get written onto your hard drive. An App doesn’t. It’s a feature to a website that goes no further than your browser. So if you were using an App to play Scrabble with a friend on Facebook, each move you make is saved on Facebook’s servers, not the computers of you or your friend. And the page updates when you log in again or otherwise refresh your browser. This is the core of what makes something an “app”.

What is the Facebook Platform? 

Facebook launched the Facebook Platform on May 24, 2007, providing a framework for software developers to create applications that interact with core Facebook features. User information can be shared from web communities to outside applications, delivering new functionality to the web community that shares its user data via an open API. An API is an application programming interface which is a specification intended to be used as an interface by software components to communicate with each other. In fact, the Facebook Application Platform is one of the best-known APIs. The Facebook Platform provides a set of APIs and tools, which enable third-party developers to integrate with the "open graph" — whether through applications on Facebook.com or external websites and devices.

Why Do You Want a Facebook App? 

What can your business use a game like Scrabble for? Very little, but games, while exceptionally popular, are not the only use of apps. They can be used by any entity that wants its name shared in a social media sphere. Think of the common complaint of some people posting mundane “tuna salad sandwich for lunch” status updates. And think of the Facebook page you created for the restaurant you own. It’s pretty popular, but there doesn’t seem to be that many regular customers “liking” the page on Facebook. Now imagine the page having an app where menu items with very nice, tantalizing images are selectable and shareable. Instead of a boring status update or a mere link to your page, with a phone number and address, an app can let that user share in their news feed a more eye-catching way of what they just ate in your restaurant. And users will be more inclined to click on the picture than just normal blue linked text. And the app user barely has to do anything. Since they already allowed the app to share to their profile, it’s even simpler than typing out the sentence of what they ate.

How to Get Started Building an App 

To get started, you must have a Facebook account. Use your personal Facebook account to create a Facebook page for your business or organization. Your personal information is safe and does not get tied to the page if you don’t want the “creator” to be known publicly, but Facebook insists on all pages being created by people and not from the companies themselves from the get-go.

The first step in writing an App is getting an App. With your existing Facebook account, add the Developer application to your Facebook profile and then click “Set Up New Application”. Then simply get through the tasks of naming it, agreeing to some standard Terms of Service, and upload an image for its logo (You can change it later).

You don’t have to be a “geek” for writing basic Facebook Applications. You will need some very basic knowledge of web programming languages and some free space on a web server where you’ll host your Facebook app, which will be written as simple PHP files. MySQL is a very popular open source database management system for running the PHP scripts you’ll need to write. Don’t worry what PHP stands for, as it’s original name is no longer valid and it now stands for something that begins with PHP itself. Recursive acronyms are a common joke among programmers. Other than PHP: Hypertext Preprocessor some other common ones you may have seen before are GNU's Not Unix and PNG's Not GIF.

From the Application settings, choose Canvas and set HTML as the rendering method. You may have heard of FBML (Facebook Markup Language, as opposed to Hyper Text Markup Language), but as of June 2012, the Facebook developers stopped supporting FBML and all apps are written in HTML, JavaScript, and CSS.

Using any WYSIWYG (What You See Is What You Get – essentially any text editor without automatic formatting [like Microsoft Word] such as Notepad) HTML editor, write the content that you want to display inside your Facebook application.

What is a canvas page? Simply the main page of your application that the user sees each time they click on your app. Set up a new app, give it a name. Enter in the following details:

Canvas URL– the unique name for your app @http://apps.facebook.com/. You can flesh it out with icons, descriptions, etc too.

Canvas Callback URL – the full URL of the canvas page to be stored on your MySQL server. Log in to your web server where you’ll be hosting the Facebook App and create a sub-directory called “facebook”. So if your domain is example.com, the Facebook app can be accessed from example.com/facebook.

Now we need to create a setup page for users that wish to add your app. A beginner should be using the official PHP client. What we’ll be doing is showing a simple image.

This should be a basic beginning PHP script. Go to the file you entered in as the Canvas Callback URL – this is the jump-off point for all calls from Facebook to your application.

// Include the Facebook client library

require_once ('facebook.php');

// Set authentication variables

$appapikey = '';

$appsecret = '';

$facebook = new Facebook($appapikey, $appsecret);

// I also will be accessing my own database on almost every call so will set db up here

$username="";

$password="";

$database="";

mysql_connect(localhost,$username,$password);

@mysql_select_db($database) or die( "Unable to select database");

You are now ready to interact with the Facebook API.

Using the Facebook API 

The Graph API is the core of Facebook Platform, enabling developers to read from and write data into Facebook. The Graph API presents a simple, consistent view of the Facebook social graph, uniformly representing objects in the graph (e.g., people, photos, events, and pages) and the connections between them (e.g., friend relationships, shared content, and photo tags). Along with maybe the application directory, this is the most powerful aspect of the Facebook platform for developers. Given the right incentives/marketing/branding/whatever you wish to call it, apps on Facebook can spread like wildfire. Two features commonly used by Facebook developers to reach a wider audience are app invites and news feed stories.

Both are normally done at app sign up time and are used to inform members of the user’s personal network. But they differ in that an invite is an explicit question targeted at friends of the user’s choice while the newsfeed option is a passive choice to people that they are using your application. It’s harder to get a user to send out invites because they aren’t always welcome but if a user does target them successfully it may lead to a higher sign-up rate amongst their friends.

That’s it. Anyone can now add your Facebook app to their profiles either in the Boxes tab or in the sidebar of the main profile page.

Facebook App Tips & Tricks 

There are a few additional tricks you can remove from your sleeve to dazzle your visitors:

• You can incorporate RSS feeds in your Facebook apps through a feed parsing library like SimplePie.
• You can track your Facebook application usage via Google Analytics. Just add the following code in the PHP code.
• You can use the same CSS Styles and color schemes for your Facebook Apps that are used on the main Facebook site.
• If you want to embed YouTube video in your Facebook apps, you should use the tag.
• If you are using your Facebook page as a way to do business networking, consider adding the BranchOut app to your Facebook page.

Don’t fret! Remember Facebook has FAQs and a how-to to help you along the way, too! If this still seems too complicated there are companies you can use like OfferPop and Wildfire the have pre-built apps that you can customize for your Facebook page for a fee. But give making a simple app a try before spending money on a service or developer to create a Facebook app.