CS160 Discussion Section
David Sun
Facebook Application
•
•
•
•
•
Architecture
Information repository
Session management
GUI
Privacy
Creating a Facebook Application
• Add “Developer” application on Facebook.
• Click “Set Up New Application”.
• Provide:
– Application name, e.g. myfirstapp
– Support email e.g. johnsmith@gmail.com
– Callback URL (this is the URL to your application code)
http://www.myserver.com/myfirstapp/
– Canvas page URL (the actual facebook url as seen by the users)
http://apps.facebook.com/myfirstapp
• You will get:
– An API Key : 05a5ef15248bb9a4887e5f4154678731
– A Secret Key: 09901d83048d959eaad17228c8c7a95b
– Identify the application to Facebook
Client/Server Interaction
Browser
App
Canvas
1. Browser makes
request
5 . Facebook renders FBML to
HTML
Facebook server
2. FB server calls App
Server through
callback URL
4. App server returns
FBML
3. App calls FB API
Your app server
appinclude.php
<?php
require_once 'facebook.php';
$appapikey = '05a5ef15248bb9a4887e5f4154678731'
$appsecret = '09901d83048d959eaad17228c8c7a95b'
$facebook = new Facebook($appapikey, $appsecret);
$user = $facebook->require_login();
//[todo: change the following url to your callback url]
$appcallbackurl = 'http://pact.eecs.berkeley.edu/davidsun/dstestapp/';
//catch the exception that gets thrown if the cookie has an invalid session_key
in it
try {
if (!$facebook->api_client->users_isAppAdded()) {
$facebook->redirect($facebook->get_add_url());
}
} catch (Exception $ex) {
//this will clear cookies for your application and redirect them to a login
prompt
$facebook->set_user(null, null);
$facebook->redirect($appcallbackurl);
}
?>
Information Management
• Application generic information:
– Information (or a subset of) that users submitted
to Facebook: name, birth-date, relationship status,
interests, education background etc.
– Can be retrieved by SQL queries or Facebook API.
• Application specific information
– Data users submit to or needs to be maintained
for your application.
– MYSQL database.
Facebook Query Language (FQL)
• FQL = subset of SQL
– Only select-statements, no updates/deletes
• Exposed Facebook data/tables:
– User, Friend, Group, Group_member, Event,
Event_member, Photo, AlbumPhoto_tag
• SELECT name, affiliations
FROM user
WHERE uid IN (SELECT uid2
FROM friend
WHERE uid1=211031)
User Table
• user uid*, first_name, last_name, name*,
pic_small, pic_big, pic_square, pic, affiliations,
profile_update_time, timezone, religion,
birthday, sex, hometown_location, meeting_sex,
meeting_for, relationship_status,
significant_other_id, political, current_location,
activities, interests, is_app_user, music, tv,
movies, books, quotes, about_me, hs_info,
education_history, work_history, notes_count,
wall_count, status, has_added_app
Application Specific Information
Repository
• We will be support MYSQL in this class project
• You will be able to run individual MYSQL
servers on your instructional accounts.
• Design a database schemata that matches the
needs of your application.
– will need to be “interoperable” with Facebook
databases.
– should be sound, i.e. correct keys, normalized etc.
Example: Free Gifts
PHP
• “Object oriented” server-side scripting
language.
• Becoming increasingly popular in recent years.
• Mixture of C/Pearl syntax.
• HTML-compliant
• <?php ?>
• Supports external resource: e.g. mysql
PHP/MySQL
<?php
// Connecting, selecting database
$link = mysql_connect('mysql_host', 'mysql_user',
'mysql_password')
or die('Could not connect: ' . mysql_error());
echo 'Connected successfully';
mysql_select_db('my_database') or die('Could not
select database');
?>
Facebook API
• Wrappers for FQL queries.
• Implemented in a variety of scripting languages:
PHP, Python, Ruby, .NET
• Getting session specific information:
– createToken
– getSession
– getLoggedInUser
• Getting Facebook data:
– Users.getInfo
– Photos.get
FBML – Facebook Markup Language
• Subset of HTML + Facebook elements
• Functionalities:
– Enforce uniform/standard look and feel for shared
components: navigation, wall, dashbord, friendselector, buttons, time-dates, dialog, notification.
– Implementing privacy designs: e.g., restrict the
content to be only visible to the current viewer.
• Syntax just like well-formed HTML/XML.
FBML
•
<fb:editor action="?do-it" labelwidth="100">
<fb:editor-text label="Title" name="title" value=""/>
<fb:editor-text label="Author" name="author" value=""/>
<fb:editor-custom label="Status">
<select name="state">
<option value="0" selected>have read</option>
<option value="1">am reading</option>
<option value="2">want to read</option>
</select>
</fb:editor-custom>
<fb:editor-textarea label="Comment" name="comment"/>
<fb:editor-buttonset>
<fb:editor-button value="Add"/>
<fb:editor-button value="Recommend"/>
<fb:editor-cancel />
</fb:editor-buttonset>
</fb:editor>
FBML
•
<fb:tabs>
<fb:tab-item href='http://apps.facebook.com/yourapp/myphotos.php' title='My
Photos' selected='true'/>
<fb:tab-item href='http://apps.facebook.com/yourapp/recentalbums.php'
title='Recent Albums' />
</fb:tabs>
•
<fb:success>
<fb:message>Success message</fb:message>
This is the success message text.
</fb:success>
FBML
• Privacy control is a key design issue in your
project.
• You can enclose GUI elements with privacy
tags to control what other people can see on
your profile.
• <fb:visible-to-owner>
Welcome back to your profile!
</fb:visible-to-owner>
• <fb:is-in-network network="16777229"
uid="1230541">
User 1230541, you are in the Berkeley
network!
</fb:is-in-network>
Other technology
•
•
•
•
JavaScript (beta)
Mock-AJAX
Flash/Action-Script
Ruby/ColdFusion/.NET
Instructional Computing
• We’ll be supporting
– MYSQL
– PHP
– Apache
• If you want to use any other technology then
you will need to run your own server on the
public domain.
Getting Started
• Set up MYSQL.
• Create the first application :
http://developers.facebook.com/step_by_step.p
hp
• Create a project webpage under your
instructional:
– Say a little about who you guys are.
– The title/goal of the project
– You will be uploading documents and code to this
space in the future.
– Send cs160@imail the URL
Resources
• FBML:http://wiki.developers.facebook.com/index.php/F
BML
• API: http://wiki.developers.facebook.com/index.php/API
• FQL:http://wiki.developers.facebook.com/index.php/FQL
• Code Testing: http://developers.facebook.com/tools.php
• MySQL:
http://us.php.net/mysql (manual)
http://www.pantz.org/database/mysql/mysqlcommands.
shtml (quick reference)
• PHP: http://us3.php.net/manual/en/index.php
• Project WIKI
– http://kettle.cs.berkeley.edu/cs160-fall-07 (instructions on
setting up MySQL)