Creating a Facebook App


Published on

Presentation on How to Make Facebook Applications. Audio at
Learn how to create an application for Facebook in this introductory session. Create your first application, integrate with Facebook's API and publish it to your Facebook page.

Published in: Technology
  • i want to download
    Are you sure you want to  Yes  No
    Your message goes here
  • very interesting sharing I will try to read more carefully to follow your instructions..
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Creating a Facebook App

  1. 1. Creating A Facebook Application Todd Marks President & CEO Mindgrub Technologies LLC [email_address] Vince Buscemi VP Operations Mindgrub Technologies LLC [email_address]
  2. 2. Creating A Facebook Application <ul><li>The Opportunity </li></ul><ul><li>Example Applications </li></ul><ul><li>Making Your First Application </li></ul><ul><li>The Facebook Platform </li></ul><ul><ul><li>Working with the Facebook API </li></ul></ul><ul><ul><li>Facebook Developer Program </li></ul></ul>
  3. 3. The Opportunity
  4. 4. Applications Are One of Many Opportunities
  5. 5. Some Application Examples <ul><li>Farmville, Mafia Wars, Texas HoldEm Poker </li></ul>
  6. 6. Facebook Connect Applications <ul><li>NY Social Sports Club </li></ul>
  7. 7. Facebook Connect Applications <ul><li>NY Social Sports Club </li></ul>
  8. 8. Facebook Connect Applications <ul><li>NY Social Sports Club </li></ul>
  9. 9. Facebook Connect Applications
  10. 10. Why Create A Facebook Application? <ul><li>Automatic Account Creation and Login </li></ul><ul><li>Distribution: Global audience of 400+ Million Users </li></ul><ul><li>Automatic Social Graph Users can find their Facebook friends on the site . </li></ul><ul><li>Facebook Connect ’s ability to Publish content to the Facebook News Feed </li></ul>
  11. 11. Making Your First Application
  12. 12. Making Your First Application <ul><li>Target your audience. Look for your constituents and target a function not currently being provided. </li></ul><ul><li>Think viral. Imagine what applications your users will want to share with their network. </li></ul><ul><li>Make it sticky. Offer something fun and useful. Provide some incentives to keep using the application. </li></ul><ul><li>Keep it simple. Advanced applications are a turn-off for many users. </li></ul>
  13. 13. Making Your First Application :: Features <ul><li>Include in the Application directory </li></ul><ul><li>Make the app invite the user's friends </li></ul><ul><li>Display on the Canvas </li></ul><ul><li>Appear in the left hand navigation </li></ul><ul><li>Display a profile box </li></ul><ul><li>Access and Post to News Feeds </li></ul><ul><li>Send Email Alerts </li></ul><ul><li>Create Message Attachments </li></ul><ul><li>Integrate into Facebook's Privacy Settings </li></ul>
  14. 14. Applications Directory <ul><li>Applications Directory </li></ul>
  15. 15. The Canvas
  16. 16. Canvas and Feed Dimensions <ul><li>Left Nav (200px) // This is going away </li></ul><ul><li>Canvas (760px) </li></ul><ul><li>News Feed (460px) </li></ul><ul><li>Profile Mini-Feed(400px) </li></ul>
  17. 17. The Facebook Platform
  18. 18. Canvas and Feed Dimensions <ul><li>API - Application Programmers Interface </li></ul><ul><li>FBML - Facebook Markup Language </li></ul><ul><li>FQL - Facebook Query Language </li></ul><ul><li>FBJS - Facebook Javascript </li></ul>
  19. 19. Where Does Your Application Live? <ul><li>It lives on your servers and communicates with Facebook via the API, FQL, FBML and can get pulled in via iFrames </li></ul>FB server Broswer Your server <ul><li>Go to canvas </li></ul>5) Return page 2) Send request & session_key 4) Response with page content 3) Call API
  20. 20. Working With The Facebook API
  21. 21. Working With The Facebook API <ul><li>Official supported client libraries: </li></ul><ul><li>PHP (4 and 5), Java. </li></ul><ul><li> </li></ul><ul><li>Unofficial client libraries include: </li></ul><ul><li>ASP.NET, ASP (VBScript), ColdFusion, C++, C#, D, Emacs List, PHP4, Lisp, Perl, Python, Ruby on Rails, VB.NET, and Windows Mobile. </li></ul><ul><li>wiki. </li></ul>
  22. 22. Sample API Usage <ul><li>$user_data = array(‘name’, ‘pic’, ‘activities’); </li></ul><ul><li>$current = $facebook->api_client->users_getInfo($user, $user_data); </li></ul><ul><li>echo “<p>Your name is {$current[0][‘name’]} </p>”; </li></ul><ul><li>echo “<p>Here is what you look like: <img src=’{$current[0][‘pic’]} /></p>”; </li></ul>
  23. 23. Facebook Markup Language (FBML)
  24. 24. Facebook Markup Language (FBML) <ul><li>FBML contains a subset of HTML elements such as p, ul, and h1. </li></ul><ul><li>Allows for &quot;qualified&quot; support of Script (FBJS) and Style Elements (localized CSS) </li></ul><ul><li>Contains a library of FB specific markup </li></ul>
  25. 25. Sample FBML Usage <ul><li><fb:if-can-see uid=”665127078” what=”profile”> <p>You can see the application<p> <fb:else>You can not see the application, go away </fb:else> </fb:if-can-see> </li></ul>
  26. 26. Facebook Query Language (FQL)
  27. 27. Facebook Query Language (FQL) <ul><li>Facebook Query Language (FQL) is a SQL-based interface into Facebook data. You can access many Facebook database tables, including user, friend, group, group_member, event, event_member, photo, album, and photo_ tag. </li></ul>
  28. 28. Sample FQL Usage <ul><li>$friends = $facebook->api_client->fql_query(“SELECT uid, name FROM user WHERE uid IN (SELECT uid2 FROM friend WHERE uid1=$user)”); </li></ul>
  29. 29. Facebook JavaScript (FBJS)
  30. 30. Facebook JavaScript (FBJS) <ul><li>Instead of using the standard JavaScript DOM, Facebook provides its own alternative DOM implementation. Many FBJS object implementations are the same as standard JavaScript, although there are some differences. </li></ul><ul><li>Ex: Standard JS - document.href </li></ul><ul><li>FBJS - getHref, setHref </li></ul>
  31. 31. Initialize Application
  32. 32. Initialize Application <ul><li><?php </li></ul><ul><li>require_once '../facebook-platform/client/facebook.php'; </li></ul><ul><li>// *** Add your Facebook API Key, Secret Key, and Callback URL </li></ul><ul><li>$appapikey = '[your API Key]'; </li></ul><ul><li>$appsecret = '[your Secret key]' </li></ul><ul><li>$appcallbackurl = '[your web app url]'; </li></ul><ul><li>// Connect to Facebook, retrieve user </li></ul><ul><li>$facebook = new Facebook($appapikey, $appsecret); </li></ul><ul><li>$user = $facebook-->require_login(); </li></ul><ul><li>?> </li></ul>
  33. 33. Getting Started
  34. 34. Getting Started <ul><li> </li></ul>
  35. 35. Getting Started The application basic information includes API Key and Secret Key
  36. 36. Getting Started The application basic information allows you to set a description, icon and logo
  37. 37. Getting Started The application canvas settings allows you set the application size and location
  38. 38. Resources
  39. 39. Resources <ul><li> </li></ul><ul><li> </li></ul><ul><li> </li></ul>
  40. 40. Todd Marks President & CEO Mindgrub Technologies LLC [email_address] Vince Buscemi VP Operations Mindgrub Technologies LLC [email_address] Questions? ( ) ( )