Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,987 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
  • Be the first to comment

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 />

×