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.
Creating A Facebook  Application Todd Marks   President & CEO Mindgrub Technologies LLC [email_address] Vince Buscemi VP O...
Creating A Facebook Application <ul><li>The Opportunity </li></ul><ul><li>Example Applications </li></ul><ul><li>Making Yo...
The Opportunity
Applications Are One of Many Opportunities
Some Application Examples <ul><li>Farmville, Mafia Wars, Texas HoldEm Poker </li></ul>
Facebook Connect Applications <ul><li>NY Social Sports Club </li></ul>
Facebook Connect Applications <ul><li>NY Social Sports Club </li></ul>
Facebook Connect Applications <ul><li>NY Social Sports Club </li></ul>
Facebook Connect Applications
Why Create A Facebook Application? <ul><li>Automatic  Account Creation   and Login </li></ul><ul><li>Distribution:  Global...
Making Your First Application
Making Your First Application <ul><li>Target your audience.   Look for your constituents and target a function not current...
Making Your First Application :: Features <ul><li>Include in the Application directory </li></ul><ul><li>Make the app invi...
Applications Directory <ul><li>Applications Directory </li></ul>
The Canvas
Canvas and Feed Dimensions <ul><li>Left Nav (200px) // This is going away </li></ul><ul><li>Canvas (760px) </li></ul><ul><...
The Facebook Platform
Canvas and Feed Dimensions <ul><li>API - Application Programmers Interface </li></ul><ul><li>FBML - Facebook Markup Langua...
Where Does Your Application Live? <ul><li>It lives on your servers and communicates with Facebook via the API, FQL, FBML a...
Working With The Facebook API
Working With The Facebook API <ul><li>Official supported client libraries: </li></ul><ul><li>PHP (4 and 5), Java.  </li></...
Sample API Usage <ul><li>$user_data = array(‘name’, ‘pic’, ‘activities’); </li></ul><ul><li>$current = $facebook->api_clie...
Facebook Markup Language (FBML)
Facebook Markup Language (FBML) <ul><li>FBML contains a subset of HTML elements such as p, ul, and h1. </li></ul><ul><li>A...
Sample FBML Usage <ul><li><fb:if-can-see uid=”665127078” what=”profile”> <p>You can see the application<p> <fb:else>You ca...
Facebook Query Language (FQL)
Facebook Query Language (FQL) <ul><li>Facebook Query Language (FQL) is a SQL-based interface into Facebook data. You can a...
Sample FQL Usage <ul><li>$friends = $facebook->api_client->fql_query(“SELECT uid, name FROM user WHERE uid IN (SELECT uid2...
Facebook JavaScript (FBJS)
Facebook JavaScript (FBJS) <ul><li>Instead of using the standard JavaScript DOM, Facebook provides its own alternative DOM...
Initialize Application
Initialize Application <ul><li><?php </li></ul><ul><li>require_once '../facebook-platform/client/facebook.php'; </li></ul>...
Getting Started
Getting Started <ul><li>http://www.facebook.com/developers </li></ul>
Getting Started The application basic information includes API Key and Secret Key
Getting Started The application basic information allows you to set a description, icon and logo
Getting Started The application canvas settings allows you set the application size and location
Resources
Resources <ul><li>facebook.com/developers </li></ul><ul><li>developers.facebook.com </li></ul><ul><li>wiki.developers.face...
Todd Marks   President & CEO Mindgrub Technologies LLC [email_address] Vince Buscemi VP Operations Mindgrub Technologies L...
Upcoming SlideShare
Loading in …5
×

Creating a Facebook App

9,713 views

Published on

Presentation on How to Make Facebook Applications. Audio at http://www.mindgrub.com/NAB
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
       Reply 
    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..
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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>developers.facebook.com/resources.php. </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. developers.facebook.com. </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>http://www.facebook.com/developers </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>facebook.com/developers </li></ul><ul><li>developers.facebook.com </li></ul><ul><li>wiki.developers.facebook.com </li></ul>
  40. 40. Todd Marks President & CEO Mindgrub Technologies LLC [email_address] Vince Buscemi VP Operations Mindgrub Technologies LLC [email_address] Questions? ( www.mindgrub.com/NAB ) ( www.twitter.com/mindgrub )

×