The document outlines Facebook application development strategies and best practices for brands, emphasizing the importance of social engagement and measuring success through various metrics. It covers the intricacies of building Facebook applications, including setup procedures, coding examples, and understanding the platform's unique features. Additionally, the document provides insights into effective advertising, maintaining user engagement, and utilizing Facebook Connect for broader reach.

1. Facebook Application DevelopmentSeptember 2009

2. AgendaIntroductionWhat Works for Brands?Measuring SuccessUnderstanding the “Viral Loop”The Facebook PlatformBuilding a Facebook ApplicationBuilding a Custom Facebook Fan PageBuilding a Facebook Connect Web PageReference Links

3. IntroductionWho is this guy and why is he Shiny?

4. Why I Am HereOver 40 campaigns on FacebookCo-Founded FacebookCamp (Toronto)Largest Facebook Dev Garage in the world!Co-Founded Refresh Partners in May 20071st Marketing Agency focused on Social NetworksFounded Shiny Agency in May 200910+ years as a marketing executive in public companies and startups10+ years as an engineering executive (and code-monkey) in startups

5. Previous Facebook Campaigns

6. Shiny AgencyWe 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

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

8. Make It Socialable !

9. Target Your Audience3Cs Must Match your Target:CreativeCopyConcept

10. Allow Users to Interact With You

11. Entertain the User…

12. … or Provide Value

13. It Isn’t about Your BrandCan you find ?

14. … or It is All About Your Brand2,102,598 fans!

15. Keep Them Engaged (& Coming Back)

16. Be Different (& Unique)

17. Facebook Isn’t Your Microsite

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

19. Measuring SuccessNumbers keeps your boss happy

20. Vital MetricsStandard Web AnalyticsPageviews, Time-on-Site, GeographyRich DemographicsGender, Age, …Viral Coefficient (k-factor)For every new user, how manyother users do they bring in?

21. Social Network MetricsActive UsersHow many users have actually engaged with your application in the last week/month?Engagement MetricsReach and effectiveness of Newsfeeds, Notifications, Profile BoxesReferralsFrom Your Facebook presence to your web site

22. Understanding the Viral LoopThis is the key

23. Master the Viral LoopReach 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

24. Social Ads are the Tip of The Viral Loop

25. Advertising in Other Applications

26. Application Directory

27. Your Fan Page

28. User’s ProfileMany Touch PointsWall & Newsfeed

29. Publisher

30. Profile Boxes

31. Narrow

32. Wide

33. Main

34. Profile Tab

35. Info Tab

36. Wall Attachments28

37. NotificationsBased on actions that the user completesBased on what their friend’s actionsBased on regular daily/weekly information updatesRemind them to come back

38. Invitations

39. Newsfeeds

40. Newsfeeds

41. Facebook PlatformKind of like the web (IE6 is still a problem)

42. Similar, but DifferentFacebook PlatformFBML / XFBMLFQLFBJSCSSFB-APIOpen StandardsHTMLSQLJavaScriptCSS

43. FBMLAccess 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

44. FQLSQL-like interface to access Facebook dataDuplicate of API functionalityMany API functions are just FQL wrappersDon’t bother…

45. Facebook APIRESTAPI to access FacebookMost common uses are:get the User’s Friend listset Profile BoxesSend NotificationGet User’s InformationLots of client libraries:PHP, Java, .NET, RoRAPI keeps changing…37

46. API Test Toolhttp://developers.facebook.com/tools.php38

47. FBJSLike JavaScript, except…FBJS runs in a protected sandboxUses GETters and SETersBuilt-in Ajax & Animation

48. Building a Facebook ApplicationRemember your first time?

49. Setting up The Application Add the Developer Applicationhttp://www.facebook.com/developers/apps.phpAdd an Application

50. Critical Configuration Fields

51. Finally…

52. InfrastructureDownload the Facebook API clienthttp://wiki.developers.facebook.com/index.php/Client_LibrariesSetup your hosting server Facebook does not provider hosting!

53. 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 optionalecho “Hello <fb:nameuid=\”$facebook_user_id\”/> !”;echo “</fbml>”;

54. Coding; Friend’s Pictures<?php$api_key = '7483ff2c054d8116197fbb54f1893fab';$secret = 'e13ede6fc6eec92e4aac48e4aa586391';$facebook = new Facebook($api_key, $secret);$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

55. 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

56. Feed Preview Console48http://developers.facebook.com/tools.php?feed

57. 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

58. Sending a Newsfeed

59. 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

60. 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);} catch (FacebookRestClientException $ex) {}http://wiki.developers.facebook.com/index.php/Notifications.send

61. 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);} catch (FacebookRestClientException $ex) {}Warning; You can only keep this information for 24 hours (Facebook ToS)http://wiki.developers.facebook.com/index.php/Users.getInfo

62. 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

63. Important FB URL Variablesfb_sig_userUser IDfb_sig_profile_userProfile User ID (only available in a profile tab)fb_sig_localeUser’s language (en_US)installedEquals 1 the first time that the user adds your appfb_page_idThe page ID if the user is using the application on that Fan Page’s application tabhttp://wiki.developers.facebook.com/index.php/Your_callback_page_and_you

64. Building a Custom Fan PageKeep your fans on your page

65. Setting up the FB Application

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

67. Coding; Support the Profile Tab<?php$api_key = '7483ff2c054d8116197fbb54f1893fab';$secret = 'e13ede6fc6eec92e4aac48e4aa586391';$facebook = new Facebook($api_key, $secret);$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.

68. Integrating Facebook ConnectMake the web social

69. FB Connect: Setup Application

70. FB Connect: XFBMLCreate 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

71. FB Connect: XFBMLAdd support for XFBML to your pageLoad the JS client libraryInitialize 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

72. 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>

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

74. FB Connect Stages

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

76. Reference LinksI tell you where to go…

77. Linksdevelopers.facebook.comwiki.developers.facebook.comInsideFacebook.comAllFacebook.comShinyAgency.com

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