Tamkang University Social Media Apps Programming Facebook API

Tamkang University Social Media Apps Programming Facebook API (Facebook Java. Script SDK) (Integrate Facebook with i. OS/Android Apps) 1021 SMAP 11 TLMXM 1 A (8687) (M 2143) (Fall 2013) (MIS MBA) (2 Credits, Elective) [Full English Course] Thu 9, 10 (16: 10 -18: 00) V 201 Min-Yuh Day, Ph. D. Assistant Professor Department of Information Management Tamkang University http: //mail. tku. edu. tw/myday 2013 -12 -26

Course Schedule (1/3) Week Date Subject/Topics • 1 2013/09/19 Mid-Autumn Festival (Day off) • 2 2013/09/26 Course Orientation and Introduction to Social Media and Mobile Apps Programming • 3 2013/10/03 Introduction to Android / i. OS Apps Programming • 4 2013/10/10 Double Tenth Day (Day off) • 5 2013/10/17 Developing Android Native Apps with Java (Eclipse) (MIT App Inventor) • 6 2013/10/24 Developing i. Phone / i. Pad Native Apps with Objective-C (Xcode) 2

Course Schedule (2/3) Week Date Subject/Topics • 7 2013/10/31 Mobile Apps using HTML 5/CSS 3/Java. Script • 8 2013/11/07 j. Query Mobile • 9 2013/11/14 Create Hybrid Apps with Phone. Gap • 10 2013/11/21 Midterm Exam Week (Midterm Project Report) • 11 2013/11/28 j. Query Mobile/Phonegap • 12 2013/12/05 Invited Talk: Social, Mobile and Business Model in PIXNET [Invited Speaker: Dr. Rick Cheng-Yu Lu] 3

Course Schedule (3/3) Week Date Subject/Topics • 13 2013/12/12 Case Study on Social Media Apps Programming and Marketing in Google Play and App Store • 14 2013/12/19 Google App Engine and Google Map API • 15 2013/12/26 Facebook API (Facebook Java. Script SDK) (Integrate Facebook with i. OS/Android Apps) • 16 2014/01/02 Twitter API • 17 2014/01/09 Final Project Presentation • 18 2014/01/16 Final Exam Week (Final Project Report) 4

Outline • Facebook API – Facebook Java. Script SDK – Integrate Facebook with i. OS/Android Apps – Facebook Login – Facebook Open Graph API – Facebook Graph API 5

Facebook Developers https: //developers. facebook. com/ 6

Integrate Facebook with your native i. OS apps https: //developers. facebook. com/ 7

Facebook SDK for i. OS https: //developers. facebook. com/docs/ios/ 8

Integrate Facebook with your native Android apps. https: //developers. facebook. com/ 9

Facebook SDK for Android 10

Integrate Facebook with your Web Apps 11

Facebook for Web Developers https: //developers. facebook. com/docs/web/ 12

Facebook for Web Developers https: //developers. facebook. com/docs/web/ 13

Facebook for Web Developers https: //developers. facebook. com/docs/web/ 14

Facebook for Web Developers https: //developers. facebook. com/docs/web/gettingstarted/ 15

Adding social features with Plugins Like Button Comments Box https: //developers. facebook. com/docs/web/gettingstarted/ 16

Facebook Login https: //developers. facebook. com/docs/facebook-login/ 17

Facebook Login for Java. Script https: //developers. facebook. com/docs/facebook-login/login-flow-for-web/ 18

Facebook Login for Java. Script https: //developers. facebook. com/docs/facebook-login/login-flow-for-web/ 19

Facebook Login for Java. Script https: //developers. facebook. com/docs/facebook-login/login-flow-for-web/ 1/3 20

Facebook Login for Java. Script https: //developers. facebook. com/docs/facebook-login/login-flow-for-web/ 2/3 21

Facebook Login for Java. Script https: //developers. facebook. com/docs/facebook-login/login-flow-for-web/ 3/3 22

Facebook Login for Java. Script https: //developers. facebook. com/docs/facebook-login/login-flow-for-web/ 23

Demo: Facebook Apps Create New App 24

Facebook Apps: Create New Apps https: //developers. facebook. com/apps 25

Facebook Apps: Create New App https: //developers. facebook. com/apps 26

Facebook Apps: Create New App https: //developers. facebook. com/apps 27

Facebook Apps: Create New App https: //developers. facebook. com/apps 28

Facebook Apps: Create New App https: //developers. facebook. com/apps 29

Facebook Apps: Create New App i. Myday App ID: 1378880249017680 App Secret: c 64 d 6 b 231 b 7 c 22003 b 8 ddc 25 a 99 e 20 ec(reset) 30

Facebook Apps: Create New App https: //developers. facebook. com/apps 31

Facebook. html Facebook Login app. ID http: //mail. tku. edu. tw/myday/app/facebook. html 32

Facebook Login app. ID <script> window. fb. Async. Init = function() { FB. init({ app. Id status cookie xfbml }); : '1378880249017680', : true, // check login status : true, // enable cookies to allow the server to access the session : true // parse XFBML http: //mail. tku. edu. tw/myday/app/facebook. html 33

Facebook Login http: //mail. tku. edu. tw/myday/app/facebook. html 34

Facebook Login http: //mail. tku. edu. tw/myday/app/facebook. html 35

Test Facebook Login on jsbin. com 36

Test Facbook Login on jsbin. com Select how your app integrates with Facebook http: //jsbin. com/OYAxev. U/1 37

Facebook SDK for Java. Script https: //developers. facebook. com/docs/javascript/gettingstarted/ 38

Facebook SDK for Java. Script https: //developers. facebook. com/docs/javascript/gettingstarted/ 39

Facebook SDK for Java. Script https: //developers. facebook. com/docs/reference/javascript/ 40

Facebook SDK for Java. Script https: //developers. facebook. com/docs/reference/javascript/ 41

Facebook SDK for Java. Script <div id="fb-root"></div> <script> window. fb. Async. Init = function() { // init the FB JS SDK FB. init({ app. Id : 'YOUR_APP_ID', // App ID from the app dashboard status : true, // Check Facebook Login status xfbml : true // Look for social plugins on the page }); // Additional initialization code such as adding Event Listeners goes here }; // Load the SDK asynchronously (function(){ // If we've already installed the SDK, we're done if (document. get. Element. By. Id('facebook-jssdk')) {return; } // Get the first script element, which we'll use to find the parent node var first. Script. Element = document. get. Elements. By. Tag. Name('script')[0]; // Create a new script element and set its id var facebook. JS = document. create. Element('script'); facebook. JS. id = 'facebook-jssdk'; // Set the new script's source to the source of the Facebook JS SDK facebook. JS. src = '//connect. facebook. net/en_US/all. js'; // Insert the Facebook JS SDK into the DOM first. Script. Element. parent. Node. insert. Before(facebook. JS, first. Script. Element); }()); </script> https: //developers. facebook. com/docs/reference/javascript/ 42

Facebook for Mobile https: //developers. facebook. com/docs/ 43

Facebook for Mobile https: //developers. facebook. com/docs/ 44

Facebook for Mobile https: //developers. facebook. com/docs/plugins/ 45

Facebook Like Button Let people share pages and content from your site back to their Facebook profile with one click, so all their friends can read them. https: //developers. facebook. com/docs/plugins/ 46

Facebook Like Button https: //developers. facebook. com/docs/plugins/like-button/ 47

Facebook Like Button https: //developers. facebook. com/docs/plugins/like-button/ 48

Facebook Like Button <div id="fb-root"></div> <script>(function(d, s, id) { var js, fjs = d. get. Elements. By. Tag. Name(s)[0]; if (d. get. Element. By. Id(id)) return; js = d. create. Element(s); js. id = id; js. src = "//connect. facebook. net/en_US/all. js#xfbml=1"; fjs. parent. Node. insert. Before(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> <div class="fb-like" data-href="https: //developers. facebook. com/docs/plugins/" data-layout="standard" data-action="like" data-show-faces="true" datashare="true"></div> https: //developers. facebook. com/docs/plugins/like-button/ 49

Facebook Share Button https: //developers. facebook. com/docs/plugins/share-button/ 50

Facebook Share Button https: //developers. facebook. com/docs/plugins/share-button/ 51

Facebook Open Graph API https: //developers. facebook. com/docs/opengraph/ 52

Open Graph Overview https: //developers. facebook. com/docs/opengraph/overview/ 53

Getting Started with Open Graph https: //developers. facebook. com/docs/opengraph/getting-started/ 54

Step 1: Create a Facebook App https: //developers. facebook. com/docs/opengraph/getting-started/ 55

Step 2: Set Up the App https: //developers. facebook. com/docs/opengraph/getting-started/ 1/3 56

Step 2: Set Up the App https: //developers. facebook. com/docs/opengraph/getting-started/ 2/3 57

Step 2: Set Up the App https: //developers. facebook. com/docs/opengraph/getting-started/ 3/3 58

Step 3: Publish a Story https: //developers. facebook. com/docs/opengraph/getting-started/ 59

Step 3: Publish a Story https: //developers. facebook. com/docs/opengraph/getting-started/ 60

Step 4: Submit Your Actions For Review https: //developers. facebook. com/docs/opengraph/getting-started/ 61

Open Graph http: //www. youtube. com/watch? v=r. ZMaj. QAow. Ks 62

Facebook Open Graph API • A Facebook API to share information – From your app – To Facebook • Ex – Pinterest Source: https: //www. youtube. com/watch? v=M 24 gq. VJbr. N 8&list=PL 8 D 1 E 905 D 80087 F 6 F 63

Facebook APIs https: //developers. facebook. com/docs/reference/apis/ 64

Facebook Graph API https: //developers. facebook. com/docs/graph-api/ 65

Quickstart for Graph API https: //developers. facebook. com/docs/graph-api/quickstart/ 66

Getting Started with the Graph API http: //www. youtube. com/watch? v=Wte. K 95 App. F 4 67

How the Graph API is structured https: //developers. facebook. com/docs/graph-api/quickstart/ 68

Load the Graph API Explorer https: //developers. facebook. com/docs/graph-api/quickstart/ 69

Facebook Graph API Explorer https: //developers. facebook. com/tools/explorer 70

Facebook Graph API Explorer /me https: //developers. facebook. com/tools/explorer? method=GET&path=me 71

Facebook Graph API Explorer /me https: //developers. facebook. com/tools/explorer? method=GET&path=me 72

Facebook Graph API Explorer /me https: //developers. facebook. com/tools/explorer? method=GET&path=me 73

Facebook Graph API Explorer /me https: //developers. facebook. com/tools/explorer? method=GET&path=me 74

Facebook Graph API Explorer /me https: //developers. facebook. com/tools/explorer? method=GET&path=me 75

Facebook Graph API Explorer /me https: //developers. facebook. com/tools/explorer? method=GET&path=me 76

Facebook Graph API Explorer /me/friends https: //developers. facebook. com/tools/explorer? method=GET&path=me%2 Ffriends 77

Facebook Graph API Explorer Publish actions 78

Facebook Graph API Explorer Post Message 79

Facebook Graph API Explorer Post Message 80

http: //graph. facebook. com/4 81

http: //graph. facebook. com/minyuhday 82

Java. Script vs. JSON • JSON – Java. Script Object Notation • • Format for sharing data Derived from Java. Script Language independent An alternative to XML Source: https: //www. youtube. com/watch? v=40 a. Klr. L-2 V 8 83

JSON • Advantages – Easy to read – Easy to write – Easy to Parse Var info = JSON. parse(data); Info. name Info. position Info. courses[i] – Learner than XML – Growing support in APIs (i. e. , Facebook, Twitter) – Natural format for Java. Script – Implementation in many languages Source: https: //www. youtube. com/watch? v=40 a. Klr. L-2 V 8 84

JSON { “name” : “Min-Yuh Day” “position” : “Assistant Professor” “courses” : [ “Social Media Apps Programming” “Social Media Marketing” “Data Mining” ] } var info = JSON. parse(data); info. name info. position info. courses[i] Source: https: //www. youtube. com/watch? v=40 a. Klr. L-2 V 8 85

Summary • Facebook API – Facebook Java. Script SDK – Integrate Facebook with i. OS/Android Apps – Facebook Login – Facebook Open Graph API – Facebook Graph API 86

References • Facebook Developers, https: //developers. facebook. com/ 87