Presentation that I did for Refresh Events Facebook Workshop. 2 hours of insights into what works and doesn't and how to built it.

1. Facebook Application Development September 2009

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

3. Introduction Who is this guy and why is he Shiny?

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

5. Previous Facebook Campaigns

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

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

8. Make It Socialable !

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

10. Allow Users to Interact With You

11. Entertain the User…

12. … or Provide Value

13. It Isn’t about Your Brand Can you find ?

14. … or It is All About Your Brand 2,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 & Feel http://wiki.developers.facebook.com/index.php/DesignerNotes

19. Measuring Success Numbers keeps your boss happy

20. 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?

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

22. Understanding the Viral Loop This is the key

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

24. Social Ads are the Tip of The Viral Loop

25. Advertising in Other Applications

26. Application Directory

27. Your Fan Page

29. Publisher

30. Profile Boxes

31. Narrow

32. Wide

33. Main

34. Profile Tab

35. Info Tab

36. Wall Attachments28

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

38. Invitations

39. Newsfeeds

40. Newsfeeds

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

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

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

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

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

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

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

48. Building a Facebook Application Remember your first time?

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

50. Critical Configuration Fields

51. Finally…

52. Infrastructure Download the Facebook API client http://wiki.developers.facebook.com/index.php/Client_Libraries Setup 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 optional echo “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 Console 48 http://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 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

64. Building a Custom Fan Page Keep your fans on your page

65. Setting up the FB Application

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

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 Connect Make the web social

69. FB Connect: Setup Application

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

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

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=amp;quot;squareamp;quot; 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 Links I tell you where to go…

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

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