Shiny Agency's Facebook Development Guidelines

Facebook Application Development
September 2009

Agenda
Introduction
What Works for Brands?
Measuring Success
Understanding the “Viral Loop”
The Facebook Platform
Building a Facebook Application
Building a Custom Facebook Fan Page
Building a Facebook Connect Web Page
Reference Links

Introduction
Who is this guy and why is he Shiny?

Why I Am Here
Over 40 campaigns on Facebook
Co-Founded FacebookCamp (Toronto)
Largest Facebook Dev Garage in the world!
Co-Founded Refresh Partners in May 2007
1st Marketing Agency focused on Social Networks
Founded Shiny Agency in May 2009
10+ years as a marketing executive in public companies and startups
10+ years as an engineering executive (and code-monkey) in startups

Previous Facebook Campaigns

Shiny Agency
We are a specialized marketing agency focused on bringing brands to social networks, where their customers are.
Using our experience, proven best-practices and utilizing only our local talent, we ensure that your project/campaign is successful.
Queen Street West (near Spadina Ave), Toronto

What WORKS (& WHAT DOESN’T)
How to get more 1 active user (you) …

Make It Socialable !

Target Your Audience
3Cs Must Match your Target:
Creative
Copy
Concept

Allow Users to Interact With You

Entertain the User…

… or Provide Value

It Isn’t about Your Brand
Can you find ?

… or It is All About Your Brand
2,102,598 fans!

Keep Them Engaged (& Coming Back)

Be Different (& Unique)

Facebook Isn’t Your Microsite

(Your Graphic Designers are Gods, but) Don’t Reinvent the Look & Feel
http://wiki.developers.facebook.com/index.php/DesignerNotes

Measuring Success
Numbers keeps your boss happy

Vital Metrics
Standard Web Analytics
Pageviews, Time-on-Site, Geography
Rich Demographics
Gender, Age, …
Viral Coefficient (k-factor)
For every new user, how manyother users do they bring in?

Social Network Metrics
Active Users
How many users have actually engaged with your application in the last week/month?
Engagement Metrics
Reach and effectiveness of Newsfeeds, Notifications, Profile Boxes
Referrals
From Your Facebook presence to your web site

Understanding the Viral Loop
This is the key

Master the Viral Loop
Reach out to new users (newsfeeds/stream/profile)
Bring users back often (events/notifications)
Be interesting and have eye-candy (text copy & images)
Insert your message everywhere (profile/newsfeed)
Entice them to share your message

Social Ads are the Tip of The Viral Loop

Advertising in Other Applications

Application Directory

Your Fan Page

User’s Profile
Many Touch Points

Wall & Newsfeed
Publisher
Profile Boxes
Narrow
Wide
Main
Profile Tab
Info Tab
Wall Attachments

28

Notifications
Based on actions that the user completes
Based on what their friend’s actions
Based on regular daily/weekly information updates
Remind them to come back

Invitations

Newsfeeds

Facebook Platform
Kind of like the web (IE6 is still a problem)

Similar, but Different
Facebook Platform
FBML / XFBML
FQL
FBJS
CSS
FB-API
Open Standards
HTML
SQL
JavaScript
CSS

FBML
Access to Facebook data
<fb:nameuid="696646180" />turnsinto <a href="http://www.new.facebook.com/profile.php?id=696646180”>Roy Pereira</a>
Use Facebook Design Elements
<fb:tab-tem>
35

FQL
SQL-like interface to access Facebook data
Duplicate of API functionality
Many API functions are just FQL wrappers
Don’t bother…

Facebook API
RESTAPI to access Facebook
Most common uses are:
get the User’s Friend list
set Profile Boxes
Send Notification
Get User’s Information
Lots of client libraries:
PHP, Java, .NET, RoR
API keeps changing…
37

API Test Tool
http://developers.facebook.com/tools.php
38

FBJS
Like JavaScript, except…
FBJS runs in a protected sandbox
Uses GETters and SETers
Built-in Ajax & Animation

Building a Facebook Application
Remember your first time?

Setting up The Application
Add the Developer Application
http://www.facebook.com/developers/apps.php
Add an Application

Critical Configuration Fields

Finally…

Infrastructure
Download the Facebook API client
http://wiki.developers.facebook.com/index.php/Client_Libraries
Setup your hosting server
Facebook does not provider hosting!

Coding; Hello <user name>
<?php
$api_key = '7483ff2c054d8116197fbb54f1893fab';
$secret = 'e13ede6fc6eec92e4aac48e4aa586391';
$facebook = new Facebook($api_key, $secret);
// Only for running on a Canvas page in an application
$facebook->require_frame();
// Only for non-public Canvas pages
$facebook_user_id= $facebook->require_login();
echo “<fbml>”; // completely optional
echo “Hello <fb:nameuid=”$facebook_user_id”/> !”;
echo “</fbml>”;

Coding; Friend’s Pictures
<?php
$facebook->require_frame();
$facebook_user_id = $facebook->require_login();
try {
$friends = $facebook->api_client->friends_get();
} catch (FacebookRestClientException $ex) {}
foreach($friends as $friend)
echo “<fb:profile-picuid=”$friend”/>”;
http://wiki.developers.facebook.com/index.php/Friends.get

Coding; Registering Newsfeeds
$one_line = array('{*actor*} is going to see <a href="{*url*}">{*movie*}</a> during the <a href=”{*appurl*}">Toronto International Film Festival</a>.’);
$short_story = array(
array(
'template_title' => '{*actor*} is going to see <a href="{*url*}">{*movie*}</a> during the <a href=”{*appurl*}">Toronto International Film Festival</a>.',
'template_body' => 'Want to go with them?'
)
);
$full_story = array(
array(
'template_title' => '{*actor*} is going to see <a href="{*url*}">{*movie*}</a> during the <a href="' . APP_URL . '">Toronto International Film Festival</a>.',
'template_body' => 'Want to go with them?’
)
);
$action_links = array(
array('text' => 'Check out the movie!', 'href' => APP_URL)
);
$feed_id =$facebook->api_client->feed_registerTemplateBundle(
$one_line, $short_story, $full_story, $action_links);
http://wiki.developers.facebook.com/index.php/Feed.registerTemplateBundle

Feed Preview Console
48
http://developers.facebook.com/tools.php?feed

Coding; Sending a Newsfeed (FBJS)
<script type=“text/javascript”>
function send_newsfeed(feed_id, movie, url, image)
{
varmsg = 'Tell your friends about the TIFF app';
var body = ’The best new movies!';
vartemplate_data = {
"url":url,
"movie":movie,
"images":[
{
"src":image,
"href":”http://apps.facebook.com/torontofilmfestival/”
}
]
};
Facebook.showFeedDialog(feed_id, template_data, body, '', null, msg, '');
}
</script>
http://wiki.developers.facebook.com/index.php/Facebook.showFeedDialog

Sending a Newsfeed

Coding; Setting the Profile Boxes
$boxes = ‘<fb:wide>This is the wide box (388px wide)</fb:wide>’;
$boxes .= ‘<fb:narrow>This is the narrow box (184px wide)</fb:narrow>’;
$boxes .= ‘<fb:mobile>This only shows on the mobile website</fb:mobile>’;
$main = ‘This is the main box on the wall tab of the profile (184px wide, 250px tall). Very similar to the narrow box.’;
$facebook->api_client->profile_setFBML(
null, // deprecated
$facebook_user_id,
$boxes,
null, // deprecated
null, // deprecated
$main);
<fb:add-section-button section=“profile”/>
http://wiki.developers.facebook.com/index.php/Profile.setFBML

Coding; Sending App Notifications
$users = array(123, 456, 789);
$msg = ‘Hey, come back to the application. Please?’;
$msg_type = ‘app_to_user’;
try {
$facebook->api_client->notifications_send($users, $msg, $msg_type);
http://wiki.developers.facebook.com/index.php/Notifications.send

Coding; Getting a User’s Information
$users = array(123, 456, 789);
$fields = array(
‘uid’,
‘name’,
‘birthday’,
‘sex’
);
try {
$info = $facebook->api_client->users_getInfo($users, $fields);
Warning; You can only keep this information for 24 hours (Facebook ToS)
http://wiki.developers.facebook.com/index.php/Users.getInfo

Coding; FBJS Ajax
<script>
varinput_value = document.getElementById(‘myinput’).getValue();
varajax = new Ajax();
ajax.responseType = Ajax.FBML;
ajax.onerror= function(){};
ajax.ondone= function(data)
{
document.getElementById(‘results’).setInnerFBML(data);
};
ajax.post(‘http://apps.shinyagency.com/tiff/ajax.php’, ‘value=‘ + escape(input_value));
</script>
http://wiki.developers.facebook.com/index.php/FBJS

Important FB URL Variables
fb_sig_user
User ID
fb_sig_profile_user
Profile User ID (only available in a profile tab)
fb_sig_locale
User’s language (en_US)
installed
Equals 1 the first time that the user adds your app
fb_page_id
The page ID if the user is using the application on that Fan Page’s application tab
http://wiki.developers.facebook.com/index.php/Your_callback_page_and_you

Building a Custom Fan Page
Keep your fans on your page

Setting up the FB Application

Add the Application to the Fan Page
Go to your Facebook application
Click on the link besides 'Built By' at the bottom of the page
This will take you to the Fan Page of that application
Click on Add to my Page (you may need to click on 'More' first)
Select your Fan Page to add this app to

Coding; Support the Profile Tab
<?php
$facebook_user_id= $_REQUEST[‘fb_sig_profile_user’];
if ($facebook_user_id)
echo “Hello <fb:nameuid=”$facebook_user_id”/>. Thanks for the info.”;
$page_id = $_REQUEST[‘fb_page_id’];
You do NOT know who the viewing user is (until they submit a form/ajax)!
No auto-play JS/SWF. No <fb:iframe> tag.
Watch your <a href>; make them absolute.

Integrating Facebook Connect
Make the web social

FB Connect: Setup Application

FB Connect: XFBML
Create xd_receiver.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Cross-Domain Receiver Page</title>
</head>
<body>
<script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2" type="text/javascript">
</script>
</body>
</html>
http://wiki.developers.facebook.com/index.php/XFBML

FB Connect: XFBML
Add support for XFBML to your page
Load the JS client library
Initialize the client library
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript">
</script>
<script type="text/javascript">
FB_RequireFeatures([”Connect"], function(){
FB.init("YOUR_API_KEY_HERE", "<relative path from root>/xd_receiver.htm
{"ifUserConnected":fb_connected, "ifUserNotConnected":fb_not_connected});
});
</script>
http://wiki.developers.facebook.com/index.php/XFBML

FB Connect: Login
<fb:login-button onlogin=“return fb_login();“></fb:login-button>
<script>
function facebook_login()
{
FB.Connect.requireSession(function() {
fb_connected();
});
}
function fb_connected()
{
varuid = FB.Connect.get_loggedInUser();
varapi = new FB.ApiClient(api_key);
api.users_getInfo([uid],['name,current_location'], function(data) {
document.getElementById('uid_info').innerHTML = uid + '<br/>name: ' +
data[0].name + ' from ' + data[0].current_location.city + ', ' +
data[0].current_location.country +
"<fb:profile-pic size="square" uid=” + uid + "></fb:profile-pic>”;
});
return false;
}
</script>

FB Connect: Logout
<script>
function fb_logout()
{
FB.Connect.logout(function(bool){
return true;
});
}
</script>

FB Connect Stages

FB Connect: Retrieving Friends
<script>
varapi = FB.Facebook.apiClient;
api.friends_get(new Array(), function(result, exception){
// do something with result
});
</script>

Reference Links
I tell you where to go…

Links
developers.facebook.com
wiki.developers.facebook.com
InsideFacebook.com
AllFacebook.com
ShinyAgency.com

70
Roy@ShinyAgency.com http://ShinyAgency.com