Facebook Application Development<br />September 2009<br />
Agenda<br />Introduction<br />What Works for Brands?<br />Measuring Success<br />Understanding the “Viral Loop”<br />The F...
Introduction<br />Who is this guy and why is he Shiny?<br />
Why I Am Here<br />Over 40 campaigns on Facebook<br />Co-Founded FacebookCamp (Toronto)<br />Largest Facebook Dev Garage i...
Previous Facebook Campaigns<br />
Shiny Agency<br />We are a specialized marketing agency focused on bringing brands to social networks, where their custome...
What WORKS (& WHAT DOESN’T)<br />How to get more 1 active user (you) …<br />
Make It Socialable !<br />
Target Your Audience<br />3Cs Must Match your Target:<br />Creative<br />Copy<br />Concept<br />
Allow Users to Interact With You<br />
Entertain the User…<br />
… or Provide Value<br />
It Isn’t about Your Brand<br />Can you find                  ?<br />
… or It is All About Your Brand<br />2,102,598 fans!<br />
Keep Them Engaged (& Coming Back)<br />
Be Different (& Unique)<br />
Facebook Isn’t Your Microsite<br />
(Your Graphic Designers are Gods, but) Don’t Reinvent the Look & Feel<br />http://wiki.developers.facebook.com/index.php/D...
Measuring Success<br />Numbers keeps your boss happy<br />
Vital Metrics<br />Standard Web Analytics<br />Pageviews, Time-on-Site, Geography<br />Rich Demographics<br />Gender, Age,...
Social Network Metrics<br />Active Users<br />How many users have actually engaged with your application in the last week/...
Understanding the Viral Loop<br />This is the key<br />
Master the Viral Loop<br />Reach out to new users (newsfeeds/stream/profile)<br />Bring users back often (events/notificat...
Social Ads are the Tip of The Viral Loop<br />
Advertising in Other Applications<br />
Application Directory<br />
Your Fan Page<br />
User’s Profile<br />Many Touch Points<br /><ul><li>Wall & Newsfeed
Publisher
Profile Boxes
Narrow
Wide
Main
Profile Tab
Info Tab
Wall Attachments</li></ul>28<br />
Notifications<br />Based on actions that the user completes<br />Based on what their friend’s actions<br />Based on regula...
Invitations<br />
Newsfeeds<br />
Newsfeeds<br />
Facebook Platform<br />Kind of like the web (IE6 is still a problem)<br />
Similar, but Different<br />Facebook Platform<br />FBML / XFBML<br />FQL<br />FBJS<br />CSS<br />FB-API<br />Open Standard...
FBML<br />Access to Facebook data<br />&lt;fb:nameuid=&quot;696646180&quot; /&gt;turnsinto &lt;a href=&quot;http://www.new...
FQL<br />SQL-like interface to access Facebook data<br />Duplicate of API functionality<br />Many API functions are just F...
Facebook API<br />RESTAPI to access Facebook<br />Most common uses are:<br />get the User’s Friend list<br />set Profile B...
API Test Tool<br />http://developers.facebook.com/tools.php<br />38<br />
FBJS<br />Like JavaScript, except…<br />FBJS runs in a protected sandbox<br />Uses GETters and SETers<br />Built-in Ajax &...
Building a Facebook Application<br />Remember your first time?<br />
Setting up The Application	<br />Add the Developer Application<br />http://www.facebook.com/developers/apps.php<br />Add a...
Critical Configuration Fields <br />
Finally…<br />
Infrastructure<br />Download the Facebook API client<br />http://wiki.developers.facebook.com/index.php/Client_Libraries<b...
Coding; Hello &lt;user name&gt;<br />&lt;?php<br />$api_key = &apos;7483ff2c054d8116197fbb54f1893fab&apos;;<br />$secret =...
Coding; Friend’s Pictures<br />&lt;?php<br />$api_key = &apos;7483ff2c054d8116197fbb54f1893fab&apos;;<br />$secret = &apos...
Coding; Registering Newsfeeds<br />$one_line = array(&apos;{*actor*} is going to see &lt;a href=&quot;{*url*}&quot;&gt;{*m...
Feed Preview Console<br />48<br />http://developers.facebook.com/tools.php?feed<br />
Coding; Sending a Newsfeed (FBJS)<br />&lt;script type=“text/javascript”&gt;<br />function send_newsfeed(feed_id, movie, u...
Sending a Newsfeed<br />
Coding; Setting the Profile Boxes<br />$boxes = ‘&lt;fb:wide&gt;This is the wide box (388px wide)&lt;/fb:wide&gt;’;<br />$...
Coding; Sending App Notifications<br />$users = array(123, 456, 789);<br />$msg = ‘Hey, come back to the application.  Ple...
Coding; Getting a User’s Information<br />$users = array(123, 456, 789);<br />$fields = array(<br />	‘uid’,<br />	‘name’,<...
Coding; FBJS Ajax<br />&lt;script&gt;<br />varinput_value = document.getElementById(‘myinput’).getValue();<br />varajax = ...
Important FB URL Variables<br />fb_sig_user<br />User ID<br />fb_sig_profile_user<br />Profile User ID (only available in ...
Building a Custom Fan Page<br />Keep your fans on your page<br />
Setting up the FB Application<br />
Add the Application to the Fan Page<br />Go to your Facebook application<br />Click on the link besides &apos;Built By&apo...
Coding; Support the Profile Tab<br />&lt;?php<br />$api_key = &apos;7483ff2c054d8116197fbb54f1893fab&apos;;<br />$secret =...
Integrating Facebook Connect<br />Make the web social<br />
FB Connect: Setup Application<br />
FB Connect: XFBML<br />Create xd_receiver.htm<br />&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &...
Upcoming SlideShare
Loading in …5
×

Shiny Agency's Facebook Development Guidelines

2,961 views

Published on

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

Published in: Business, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,961
On SlideShare
0
From Embeds
0
Number of Embeds
175
Actions
Shares
0
Downloads
2
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Shiny Agency's Facebook Development Guidelines

  1. 1. Facebook Application Development<br />September 2009<br />
  2. 2. Agenda<br />Introduction<br />What Works for Brands?<br />Measuring Success<br />Understanding the “Viral Loop”<br />The Facebook Platform<br />Building a Facebook Application<br />Building a Custom Facebook Fan Page<br />Building a Facebook Connect Web Page<br />Reference Links<br />
  3. 3. Introduction<br />Who is this guy and why is he Shiny?<br />
  4. 4. Why I Am Here<br />Over 40 campaigns on Facebook<br />Co-Founded FacebookCamp (Toronto)<br />Largest Facebook Dev Garage in the world!<br />Co-Founded Refresh Partners in May 2007<br />1st Marketing Agency focused on Social Networks<br />Founded Shiny Agency in May 2009<br />10+ years as a marketing executive in public companies and startups<br />10+ years as an engineering executive (and code-monkey) in startups<br />
  5. 5. Previous Facebook Campaigns<br />
  6. 6. Shiny Agency<br />We are a specialized marketing agency focused on bringing brands to social networks, where their customers are.<br />Using our experience, proven best-practices and utilizing only our local talent, we ensure that your project/campaign is successful.<br />Queen Street West (near Spadina Ave), Toronto<br />
  7. 7. What WORKS (& WHAT DOESN’T)<br />How to get more 1 active user (you) …<br />
  8. 8. Make It Socialable !<br />
  9. 9. Target Your Audience<br />3Cs Must Match your Target:<br />Creative<br />Copy<br />Concept<br />
  10. 10. Allow Users to Interact With You<br />
  11. 11. Entertain the User…<br />
  12. 12. … or Provide Value<br />
  13. 13. It Isn’t about Your Brand<br />Can you find ?<br />
  14. 14. … or It is All About Your Brand<br />2,102,598 fans!<br />
  15. 15. Keep Them Engaged (& Coming Back)<br />
  16. 16. Be Different (& Unique)<br />
  17. 17. Facebook Isn’t Your Microsite<br />
  18. 18. (Your Graphic Designers are Gods, but) Don’t Reinvent the Look & Feel<br />http://wiki.developers.facebook.com/index.php/DesignerNotes<br />
  19. 19. Measuring Success<br />Numbers keeps your boss happy<br />
  20. 20. Vital Metrics<br />Standard Web Analytics<br />Pageviews, Time-on-Site, Geography<br />Rich Demographics<br />Gender, Age, …<br />Viral Coefficient (k-factor)<br />For every new user, how manyother users do they bring in?<br />
  21. 21. Social Network Metrics<br />Active Users<br />How many users have actually engaged with your application in the last week/month?<br />Engagement Metrics<br />Reach and effectiveness of Newsfeeds, Notifications, Profile Boxes<br />Referrals<br />From Your Facebook presence to your web site<br />
  22. 22. Understanding the Viral Loop<br />This is the key<br />
  23. 23. Master the Viral Loop<br />Reach out to new users (newsfeeds/stream/profile)<br />Bring users back often (events/notifications)<br />Be interesting and have eye-candy (text copy & images)<br />Insert your message everywhere (profile/newsfeed)<br />Entice them to share your message<br />
  24. 24. Social Ads are the Tip of The Viral Loop<br />
  25. 25. Advertising in Other Applications<br />
  26. 26. Application Directory<br />
  27. 27. Your Fan Page<br />
  28. 28. User’s Profile<br />Many Touch Points<br /><ul><li>Wall & Newsfeed
  29. 29. Publisher
  30. 30. Profile Boxes
  31. 31. Narrow
  32. 32. Wide
  33. 33. Main
  34. 34. Profile Tab
  35. 35. Info Tab
  36. 36. Wall Attachments</li></ul>28<br />
  37. 37. Notifications<br />Based on actions that the user completes<br />Based on what their friend’s actions<br />Based on regular daily/weekly information updates<br />Remind them to come back<br />
  38. 38. Invitations<br />
  39. 39. Newsfeeds<br />
  40. 40. Newsfeeds<br />
  41. 41. Facebook Platform<br />Kind of like the web (IE6 is still a problem)<br />
  42. 42. Similar, but Different<br />Facebook Platform<br />FBML / XFBML<br />FQL<br />FBJS<br />CSS<br />FB-API<br />Open Standards<br />HTML<br />SQL<br />JavaScript<br />CSS<br />
  43. 43. FBML<br />Access to Facebook data<br />&lt;fb:nameuid=&quot;696646180&quot; /&gt;turnsinto &lt;a href=&quot;http://www.new.facebook.com/profile.php?id=696646180”&gt;Roy Pereira&lt;/a&gt;<br />Use Facebook Design Elements<br />&lt;fb:tab-tem&gt;<br />35<br />
  44. 44. FQL<br />SQL-like interface to access Facebook data<br />Duplicate of API functionality<br />Many API functions are just FQL wrappers<br />Don’t bother…<br />
  45. 45. Facebook API<br />RESTAPI to access Facebook<br />Most common uses are:<br />get the User’s Friend list<br />set Profile Boxes<br />Send Notification<br />Get User’s Information<br />Lots of client libraries:<br />PHP, Java, .NET, RoR<br />API keeps changing…<br />37<br />
  46. 46. API Test Tool<br />http://developers.facebook.com/tools.php<br />38<br />
  47. 47. FBJS<br />Like JavaScript, except…<br />FBJS runs in a protected sandbox<br />Uses GETters and SETers<br />Built-in Ajax & Animation<br />
  48. 48. Building a Facebook Application<br />Remember your first time?<br />
  49. 49. Setting up The Application <br />Add the Developer Application<br />http://www.facebook.com/developers/apps.php<br />Add an Application<br />
  50. 50. Critical Configuration Fields <br />
  51. 51. Finally…<br />
  52. 52. Infrastructure<br />Download the Facebook API client<br />http://wiki.developers.facebook.com/index.php/Client_Libraries<br />Setup your hosting server <br />Facebook does not provider hosting!<br />
  53. 53. Coding; Hello &lt;user name&gt;<br />&lt;?php<br />$api_key = &apos;7483ff2c054d8116197fbb54f1893fab&apos;;<br />$secret = &apos;e13ede6fc6eec92e4aac48e4aa586391&apos;;<br />$facebook = new Facebook($api_key, $secret);<br />// Only for running on a Canvas page in an application<br />$facebook-&gt;require_frame();<br />// Only for non-public Canvas pages<br />$facebook_user_id= $facebook-&gt;require_login();<br />echo “&lt;fbml&gt;”; // completely optional<br />echo “Hello &lt;fb:nameuid=”$facebook_user_id”/&gt; !”;<br />echo “&lt;/fbml&gt;”; <br />
  54. 54. Coding; Friend’s Pictures<br />&lt;?php<br />$api_key = &apos;7483ff2c054d8116197fbb54f1893fab&apos;;<br />$secret = &apos;e13ede6fc6eec92e4aac48e4aa586391&apos;;<br />$facebook = new Facebook($api_key, $secret);<br />$facebook-&gt;require_frame();<br />$facebook_user_id = $facebook-&gt;require_login();<br />try {<br /> $friends = $facebook-&gt;api_client-&gt;friends_get();<br />} catch (FacebookRestClientException $ex) {}<br />foreach($friends as $friend)<br /> echo “&lt;fb:profile-picuid=”$friend”/&gt;”;<br />http://wiki.developers.facebook.com/index.php/Friends.get<br />
  55. 55. Coding; Registering Newsfeeds<br />$one_line = array(&apos;{*actor*} is going to see &lt;a href=&quot;{*url*}&quot;&gt;{*movie*}&lt;/a&gt; during the &lt;a href=”{*appurl*}&quot;&gt;Toronto International Film Festival&lt;/a&gt;.’);<br />$short_story = array(<br /> array(<br /> &apos;template_title&apos; =&gt; &apos;{*actor*} is going to see &lt;a href=&quot;{*url*}&quot;&gt;{*movie*}&lt;/a&gt; during the &lt;a href=”{*appurl*}&quot;&gt;Toronto International Film Festival&lt;/a&gt;.&apos;,<br /> &apos;template_body&apos; =&gt; &apos;Want to go with them?&apos;<br /> )<br />);<br />$full_story = array(<br /> array(<br /> &apos;template_title&apos; =&gt; &apos;{*actor*} is going to see &lt;a href=&quot;{*url*}&quot;&gt;{*movie*}&lt;/a&gt; during the &lt;a href=&quot;&apos; . APP_URL . &apos;&quot;&gt;Toronto International Film Festival&lt;/a&gt;.&apos;,<br /> &apos;template_body&apos; =&gt; &apos;Want to go with them?’<br /> )<br />);<br />$action_links = array(<br />array(&apos;text&apos; =&gt; &apos;Check out the movie!&apos;, &apos;href&apos; =&gt; APP_URL)<br />);<br />$feed_id =$facebook-&gt;api_client-&gt;feed_registerTemplateBundle(<br /> $one_line, $short_story, $full_story, $action_links);<br />http://wiki.developers.facebook.com/index.php/Feed.registerTemplateBundle<br />
  56. 56. Feed Preview Console<br />48<br />http://developers.facebook.com/tools.php?feed<br />
  57. 57. Coding; Sending a Newsfeed (FBJS)<br />&lt;script type=“text/javascript”&gt;<br />function send_newsfeed(feed_id, movie, url, image)<br />{<br />varmsg = &apos;Tell your friends about the TIFF app&apos;;<br />var body = ’The best new movies!&apos;;<br />vartemplate_data = {<br /> &quot;url&quot;:url,<br /> &quot;movie&quot;:movie,<br /> &quot;images&quot;:[<br /> {<br /> &quot;src&quot;:image, <br /> &quot;href&quot;:”http://apps.facebook.com/torontofilmfestival/”<br /> }<br /> ]<br /> };<br />Facebook.showFeedDialog(feed_id, template_data, body, &apos;&apos;, null, msg, &apos;&apos;);<br />}<br />&lt;/script&gt;<br />http://wiki.developers.facebook.com/index.php/Facebook.showFeedDialog<br />
  58. 58. Sending a Newsfeed<br />
  59. 59. Coding; Setting the Profile Boxes<br />$boxes = ‘&lt;fb:wide&gt;This is the wide box (388px wide)&lt;/fb:wide&gt;’;<br />$boxes .= ‘&lt;fb:narrow&gt;This is the narrow box (184px wide)&lt;/fb:narrow&gt;’;<br />$boxes .= ‘&lt;fb:mobile&gt;This only shows on the mobile website&lt;/fb:mobile&gt;’;<br />$main = ‘This is the main box on the wall tab of the profile (184px wide, 250px tall). Very similar to the narrow box.’;<br />$facebook-&gt;api_client-&gt;profile_setFBML(<br /> null, // deprecated<br />$facebook_user_id, <br />$boxes, <br />null, // deprecated<br /> null, // deprecated <br />$main);<br />&lt;fb:add-section-button section=“profile”/&gt;<br />http://wiki.developers.facebook.com/index.php/Profile.setFBML<br />
  60. 60. Coding; Sending App Notifications<br />$users = array(123, 456, 789);<br />$msg = ‘Hey, come back to the application. Please?’;<br />$msg_type = ‘app_to_user’;<br />try {<br /> $facebook-&gt;api_client-&gt;notifications_send($users, $msg, $msg_type);<br />} catch (FacebookRestClientException $ex) {}<br />http://wiki.developers.facebook.com/index.php/Notifications.send<br />
  61. 61. Coding; Getting a User’s Information<br />$users = array(123, 456, 789);<br />$fields = array(<br /> ‘uid’,<br /> ‘name’,<br /> ‘birthday’,<br /> ‘sex’<br />);<br />try {<br /> $info = $facebook-&gt;api_client-&gt;users_getInfo($users, $fields);<br />} catch (FacebookRestClientException $ex) {}<br />Warning; You can only keep this information for 24 hours (Facebook ToS)<br />http://wiki.developers.facebook.com/index.php/Users.getInfo<br />
  62. 62. Coding; FBJS Ajax<br />&lt;script&gt;<br />varinput_value = document.getElementById(‘myinput’).getValue();<br />varajax = new Ajax();<br />ajax.responseType = Ajax.FBML;<br />ajax.onerror= function(){};<br />ajax.ondone= function(data)<br />{<br />document.getElementById(‘results’).setInnerFBML(data);<br /> };<br />ajax.post(‘http://apps.shinyagency.com/tiff/ajax.php’, ‘value=‘ + escape(input_value));<br />&lt;/script&gt;<br />http://wiki.developers.facebook.com/index.php/FBJS<br />
  63. 63. Important FB URL Variables<br />fb_sig_user<br />User ID<br />fb_sig_profile_user<br />Profile User ID (only available in a profile tab)<br />fb_sig_locale<br />User’s language (en_US)<br />installed<br />Equals 1 the first time that the user adds your app<br />fb_page_id<br />The page ID if the user is using the application on that Fan Page’s application tab<br />http://wiki.developers.facebook.com/index.php/Your_callback_page_and_you<br />
  64. 64. Building a Custom Fan Page<br />Keep your fans on your page<br />
  65. 65. Setting up the FB Application<br />
  66. 66. Add the Application to the Fan Page<br />Go to your Facebook application<br />Click on the link besides &apos;Built By&apos; at the bottom of the page  <br />This will take you to the Fan Page of that application<br />Click on Add to my Page (you may need to click on &apos;More&apos; first)<br />Select your Fan Page to add this app to<br />
  67. 67. Coding; Support the Profile Tab<br />&lt;?php<br />$api_key = &apos;7483ff2c054d8116197fbb54f1893fab&apos;;<br />$secret = &apos;e13ede6fc6eec92e4aac48e4aa586391&apos;;<br />$facebook = new Facebook($api_key, $secret);<br />$facebook_user_id= $_REQUEST[‘fb_sig_profile_user’];<br />if ($facebook_user_id)<br /> echo “Hello &lt;fb:nameuid=”$facebook_user_id”/&gt;. Thanks for the info.”;<br />$page_id = $_REQUEST[‘fb_page_id’];<br />You do NOT know who the viewing user is (until they submit a form/ajax)!<br />No auto-play JS/SWF. No &lt;fb:iframe&gt; tag.<br />Watch your &lt;a href&gt;; make them absolute.<br />
  68. 68. Integrating Facebook Connect<br />Make the web social<br />
  69. 69. FB Connect: Setup Application<br />
  70. 70. FB Connect: XFBML<br />Create xd_receiver.htm<br />&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;<br />&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; &gt;<br />&lt;head&gt;<br /> &lt;title&gt;Cross-Domain Receiver Page&lt;/title&gt;<br />&lt;/head&gt;<br />&lt;body&gt;<br />&lt;script src=&quot;http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?2&quot; type=&quot;text/javascript&quot;&gt;<br /> &lt;/script&gt;<br />&lt;/body&gt;<br />&lt;/html&gt;<br />http://wiki.developers.facebook.com/index.php/XFBML<br />
  71. 71. FB Connect: XFBML<br />Add support for XFBML to your page<br />Load the JS client library<br />Initialize the client library<br />&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt; &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:fb=&quot;http://www.facebook.com/2008/fbml&quot;&gt; <br />&lt;script src=&quot;http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php&quot; type=&quot;text/javascript&quot;&gt;<br />&lt;/script&gt;<br />&lt;script type=&quot;text/javascript&quot;&gt;<br />FB_RequireFeatures([”Connect&quot;], function(){<br />FB.init(&quot;YOUR_API_KEY_HERE&quot;, &quot;&lt;relative path from root&gt;/xd_receiver.htm<br /> {&quot;ifUserConnected&quot;:fb_connected, &quot;ifUserNotConnected&quot;:fb_not_connected});<br />});<br />&lt;/script&gt; <br />http://wiki.developers.facebook.com/index.php/XFBML<br />
  72. 72. FB Connect: Login<br />&lt;fb:login-button onlogin=“return fb_login();“&gt;&lt;/fb:login-button&gt;<br />&lt;script&gt;<br />function facebook_login()<br />{<br />FB.Connect.requireSession(function() { <br />fb_connected();<br /> });<br />}<br />function fb_connected()<br />{<br />varuid = FB.Connect.get_loggedInUser();<br />varapi = new FB.ApiClient(api_key);<br />api.users_getInfo([uid],[&apos;name,current_location&apos;], function(data) {<br />document.getElementById(&apos;uid_info&apos;).innerHTML = uid + &apos;&lt;br/&gt;name: &apos; +<br /> data[0].name + &apos; from &apos; + data[0].current_location.city + &apos;, &apos; +<br /> data[0].current_location.country +<br /> &quot;&lt;fb:profile-pic size=&quot;square&quot; uid=” + uid + &quot;&gt;&lt;/fb:profile-pic&gt;”;<br /> });<br />return false;<br />}<br />&lt;/script&gt;<br />
  73. 73. FB Connect: Logout<br />&lt;script&gt;<br />function fb_logout()<br />{<br />FB.Connect.logout(function(bool){ <br /> return true;<br /> });<br />}<br />&lt;/script&gt;<br />
  74. 74. FB Connect Stages<br />
  75. 75. FB Connect: Retrieving Friends<br />&lt;script&gt;<br />varapi = FB.Facebook.apiClient;<br />api.friends_get(new Array(), function(result, exception){<br /> // do something with result <br />}); <br />&lt;/script&gt;<br />
  76. 76. Reference Links<br />I tell you where to go…<br />
  77. 77. Links<br />developers.facebook.com<br />wiki.developers.facebook.com<br />InsideFacebook.com<br />AllFacebook.com<br />ShinyAgency.com<br />
  78. 78. 70<br />Roy@ShinyAgency.com http://ShinyAgency.com<br />

×