MXAE and Facebook Integration: Getting Started

 Requirements:
An Internet Domain Name
facebook-php-sdk.tar file
An intermediate PHP5 knowledge
A beginner MXAE TSL tagging knowledge
A hand phone mobile number
An FB account
 
Introduction
Max’s friend, Jason, handed door gifts to Max after the wedding reception. Max got home and his mom asked “Whose wedding?” while looking the initial “FB” at the cookies’ box. 
His mom asked, “FB who? Facebook’s cookies?” 
“Haha.. No, mom. It’s Felicia & Brad’s”. 
 
Everyone else seems to recognize social network web sites. The popular ones include Facebook, Google, LinkedIn, MySpace and Twitter. Corporate websites needs the web sites’ stickiness. Stickiness? This old e-commerce jargon is used way back in the 1990’s to describe online marketing strategy to retain customers. American companies, namely New York Times, Time, ESPN, ABC, CBS, Wall Street Journal, LIFE, Microsoft Docs Apps – all of them consume FB cookies.
Cookies saved by internet browsers are used to personalize a user’s Internet experience. Getting famous website cookies is good for business.  Organisations connect themselves to the most visited social network site in the world, Facebook (www.facebook.com). If your application is using MXAE platform and decide to jump on the wagon, then Hello World!
 
Getting Started
There are ways of integrating FB with your application. This article emphasises on a deploying PHP API with MXAE platform. The initial communication technique is using javascript to authenticate users. However, if your application needs more than just a (JavaScript Object Notation) JSON handshake and to really having your own data collection and processing, you may find this article useful.
Below is a list of things you need to do.

1. Register

• After login to Facebook, search for word “Developer” to get into the Facebook Developer Group.  http://developers.facebook.com/setup/
• You need a mobile phone number to accept SMS message to complete registration.

2. Get the Application ID and Application Secret

• After the registration, they will give you an Application ID (app id) and an application secret code. These values are used as passes throughout your web application.
• For more info, refer to http://developers.facebook.com/docs/guides/web/.

3. Setting Up

• Get a “facebook-php-sdk” file and upload into MXAE repository
• Download it from here: https://github.com/facebook/php-sdk/
• Create a new formset for your FB application data collection (if needed). In MXAE, go to Administration > Formset. Click the green plus sign to add one.
• Create a new content,  channel “fb” and program “guest”

4. Deploy other people’s code

• Go to Web Layout > Template.
• Open the respective files.
• Cut and paste the code. (Given in later section of this article)

5. Test your application

• Go to your web site.

       For mine, visit http://apps.facebook.com/mxaetutor/

• Try to key in something and click submit
• Go to MXAE to check if you have collected something

 
The section below consists of a more detailed guideline for step 2 to 5. The guideline may not be complete but rather of a brief description for each step. A brief example presented below, is for a guest book application deployment in FB, but with a data collection using your existing MXAE web hosting.
 
2. Get the Application ID and Application Secret

1. In Facebook Developer Group website, find and click this button  
    
2. Fill in all the required fields as in Figure 1. Then save.

 

Figure 1: Setting up the Facebook Integration section
 
3. Setting Up
Uploading the PHP API into your MXAE repository
 
A. Log into MXAE  AMS console, follow these steps:

1. Go to menu: Administration > Repository.
2. Click the green plus sign. A window “Add New Repository” pops up.
3. Select and upload the file. Note that you need to select the Store Type as “Directory Path”.
4. Click button to upload. See the result of this step in the Figure 2 below.
5. Go to menu: Tool > File Management.
6. Collapse the repository folder
7. Select the file you have uploaded and right click to select ‘Uncompress File’ function.

Figure 2: The file is uploaded into MXAE repository using Store Type “Directory Path”
 

Figure 3: In Tool> File Management, right click the facebook-php-sdk file and select “Uncompress File”
 

Figure 4: A screen capture to illustrate the outcome of the Figure 3 activity
 
B. Create a new formset

1. Go to Administration > Formset
2. Click at the green plus sign to add a new form set “fbguest”
3. Create fields for name, email, location, comments.

Figure 5: Create a FB formset with a several fields
 
C. Create a new content

1. Click the folder icon to create channel “fb”
2. Click the book icon to add new program “guest”.

 

Figure 6: Creating a new content for the signed guest book articles
 
4. Deploy the Source Code
Cut and paste codes into the respective files.


(See attachment)
http://www.digialliance.com/images/fb_mxae.pdf
 

5. Test Your Application

i. Open your browser
ii. Go to http://apps.facebook.com/mxaetutor
iii. Login to FB (if needed)
vi. Allow application to access your information (If you are asked, do Allow, else won’t work) 
 

 Figure 7: Your visitors need to allow this else it will not work

Figure 8: After giving permission to access the user's basic information, your program is displayed.

v. Check if you have collected something
 
Go to MXAE console, then content > fb >guest

Figure 9: Data Collection

Summary

This article presents a guideline for MXAE users to integrate their applications into Facebook. If the javascript (JSON) cookies method is not sufficient and you need your own data collection, then this article can help you to jump start the FB integration implementation. Five steps are presented for you to deploy the server side scripting using PHP.  By the way, if Max’s mom thinks JASON’s two boxes of cookies are not enough, she may need to find out more about the cookies and sampling the cookies. Then by using her own kitchen she should re-produce a similar version of cookies.
 
Reference
Mahmud Ahsan, "Increase facebook iframe app’s performance," http://thinkdiff.net/facebook. Dec 23, 2010
Facebook Developer Group.  http://developers.facebook.com/setup/