CS160 Discussion SectionDavid 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

Browser

Client/Server Interaction

App Canvas

Your app server

Facebook server

2. FB server calls App Server through callback URL

4. App server returns FBML

5 . Facebook renders FBML to HTML

1. Browser makes request

3. App calls FB API

appinclude.php<?phprequire_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, friend-selector, 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.php• 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/FBML• 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)