social media apps programming

Social Media Apps Programming

Social Media Apps ProgrammingMin-Yuh Day, Ph.D.Assistant ProfessorDepartment of Information ManagementTamkang University

http://mail.tku.edu.tw/myday

Facebook API (Facebook JavaScript SDK)(Integrate Facebook with iOS/Android Apps)

Tamkang University

2013-12-261021SMAP11TLMXM1A (8687) (M2143) (Fall 2013)(MIS MBA) (2 Credits, Elective) [Full English Course]Thu 9,10 (16:10-18:00) V201

Course Schedule (1/3)Week Date Subject/Topics1 2013/09/19 Mid-Autumn Festival (Day off)2 2013/09/26 Course Orientation and Introduction to Social Media and Mobile Apps Programming3 2013/10/03 Introduction to Android / iOS Apps Programming4 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 iPhone / iPad Native Apps with Objective-C (Xcode)2Course Schedule (2/3)Week Date Subject/Topics7 2013/10/31 Mobile Apps using HTML5/CSS3/JavaScript8 2013/11/07 jQuery Mobile9 2013/11/14 Create Hybrid Apps with PhoneGap10 2013/11/21 Midterm Exam Week (Midterm Project Report)11 2013/11/28 jQuery Mobile/Phonegap12 2013/12/05 Invited Talk: Social, Mobile and Business Model in PIXNET [Invited Speaker: Dr. Rick Cheng-Yu Lu]

3Course Schedule (3/3)Week Date Subject/Topics13 2013/12/12 Case Study on Social Media Apps Programming and Marketing in Google Play and App Store14 2013/12/19 Google App Engine and Google Map API15 2013/12/26 Facebook API (Facebook JavaScript SDK) (Integrate Facebook with iOS/Android Apps)16 2014/01/02 Twitter API17 2014/01/09 Final Project Presentation18 2014/01/16 Final Exam Week (Final Project Report)4OutlineFacebook APIFacebook JavaScript SDKIntegrate Facebook with iOS/Android AppsFacebook LoginFacebook Open Graph APIFacebook Graph API

5

Facebook Developers6

https://developers.facebook.com/Integrate Facebook with your native iOS apps7

https://developers.facebook.com/8

https://developers.facebook.com/docs/ios/Facebook SDK for iOSIntegrate Facebook with your native Android apps.9https://developers.facebook.com/

10

Facebook SDK for AndroidIntegrate Facebook with your Web Apps11

12

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



https://developers.facebook.com/docs/web/gettingstarted/Facebook for Web DevelopersAdding social features with Plugins16

Like ButtonComments Boxhttps://developers.facebook.com/docs/web/gettingstarted/17

https://developers.facebook.com/docs/facebook-login/Facebook LoginFacebook Login for JavaScript18

https://developers.facebook.com/docs/facebook-login/login-flow-for-web/19

https://developers.facebook.com/docs/facebook-login/login-flow-for-web/Facebook Login for JavaScript20

Facebook Login for JavaScripthttps://developers.facebook.com/docs/facebook-login/login-flow-for-web/

1/321


2/322


3/323

https://developers.facebook.com/docs/facebook-login/login-flow-for-web/Facebook Login for JavaScriptDemo:Facebook AppsCreate New App2425

https://developers.facebook.com/appsFacebook Apps: Create New AppApps26

https://developers.facebook.com/appsFacebook Apps: Create New App27




iMydayApp ID:1378880249017680App Secret:c64d6b231b7c22003b8ddc25a99e20ec(reset)Facebook Apps: Create New App31


http://mail.tku.edu.tw/myday/app/facebook.htmlFacebook.html Facebook LoginappIDFacebook LoginappID33

window.fbAsyncInit = function() { FB.init({ appId : '1378880249017680', status : true, // check login status cookie : true, // enable cookies to allow the server to access the session xfbml : true // parse XFBML });http://mail.tku.edu.tw/myday/app/facebook.html34

Facebook Loginhttp://mail.tku.edu.tw/myday/app/facebook.html35

http://mail.tku.edu.tw/myday/app/facebook.htmlFacebook LoginTest Facebook Login on jsbin.com36

37

Test Facbook Login on jsbin.com

http://jsbin.com/OYAxevU/1

Select how your app integrates with FacebookFacebook SDK for JavaScript38

https://developers.facebook.com/docs/javascript/gettingstarted/39

https://developers.facebook.com/docs/javascript/gettingstarted/Facebook SDK for JavaScript40

https://developers.facebook.com/docs/reference/javascript/Facebook SDK for JavaScript41https://developers.facebook.com/docs/reference/javascript/

https://developers.facebook.com/docs/reference/javascript/Facebook SDK for JavaScript42

window.fbAsyncInit = function() { // init the FB JS SDK FB.init({ appId : '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.getElementById('facebook-jssdk')) {return;}

// Get the first script element, which we'll use to find the parent node var firstScriptElement = document.getElementsByTagName('script')[0];

// Create a new script element and set its id var facebookJS = document.createElement('script'); facebookJS.id = 'facebook-jssdk';

// Set the new script's source to the source of the Facebook JS SDK facebookJS.src = '//connect.facebook.net/en_US/all.js';

// Insert the Facebook JS SDK into the DOM firstScriptElement.parentNode.insertBefore(facebookJS, firstScriptElement); }());

https://developers.facebook.com/docs/reference/javascript/Facebook SDK for JavaScriptFacebook for Mobile43

https://developers.facebook.com/docs/44

Facebook for Mobilehttps://developers.facebook.com/docs/45

https://developers.facebook.com/docs/plugins/Facebook for MobileFacebook Like Button46

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

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


(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));


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

Facebook Share ButtonFacebook Open Graph API52

https://developers.facebook.com/docs/opengraph/

Open Graph Overview53

https://developers.facebook.com/docs/opengraph/overview/

Getting Started with Open Graph54

https://developers.facebook.com/docs/opengraph/getting-started/

55Step 1: Create a Facebook App


56Step 2: Set Up the App

https://developers.facebook.com/docs/opengraph/getting-started/1/3

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

2/3

58

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

59Step 3: Publish a Story


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

61Step 4: Submit Your Actions For Review


Open Graph62http://www.youtube.com/watch?v=rZMajQAowKs

Facebook Open Graph APIA Facebook API to share informationFrom your appTo FacebookExPinterest63Source: https://www.youtube.com/watch?v=M24gqVJbrN8&list=PL8D1E905D80087F6F

Facebook APIs64

https://developers.facebook.com/docs/reference/apis/Facebook Graph API65

https://developers.facebook.com/docs/graph-api/66

https://developers.facebook.com/docs/graph-api/quickstart/Quickstart for Graph APIGetting Started with the Graph API67

http://www.youtube.com/watch?v=WteK95AppF468

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

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

https://developers.facebook.com/tools/explorerFacebook Graph API Explorer /me71

https://developers.facebook.com/tools/explorer?method=GET&path=me72

https://developers.facebook.com/tools/explorer?method=GET&path=meFacebook Graph API Explorer /me73





https://developers.facebook.com/tools/explorer?method=GET&path=me%2FfriendsFacebook Graph API Explorer /me/friends78

Facebook Graph API Explorer Publish actions79

Facebook Graph API Explorer Post Message80

Facebook Graph API Explorer Post Messagehttp://graph.facebook.com/481

http://graph.facebook.com/minyuhday82

JavaScript vs. JSONJSONJavaScript Object NotationFormat for sharing dataDerived from JavaScriptLanguage independentAn alternative to XML83Source: https://www.youtube.com/watch?v=40aKlrL-2V8JSONAdvantagesEasy to readEasy to writeEasy to ParseVar info = JSON.parse(data);Info.nameInfo.positionInfo.courses[i]Learner than XMLGrowing support in APIs (i.e., Facebook, Twitter)Natural format for JavaScriptImplementation in many languages84Source: https://www.youtube.com/watch?v=40aKlrL-2V8JSON{name:Min-Yuh Dayposition:Assistant Professorcourses:[Social Media Apps ProgrammingSocial Media MarketingData Mining]}

85var info = JSON.parse(data);info.nameinfo.positioninfo.courses[i]Source: https://www.youtube.com/watch?v=40aKlrL-2V8SummaryFacebook APIFacebook JavaScript SDKIntegrate Facebook with iOS/Android AppsFacebook LoginFacebook Open Graph APIFacebook Graph API

86

ReferencesFacebook Developers, https://developers.facebook.com/

87

social media apps programming

Documents

iosintegrate facebook

comintegrate facebook

androidintegrate facebook

facebook developers6

javascript20 facebook

comappsfacebook apps

javascript18 https

com8 https