페이스북 웹앱 개발

1 개요[ | ]

페이스북 웹앱 시작하기
페이스북 HTML5 웹앱
페이스북 웹앱 개발 튜토리얼
https://github.com/facebook/platform-samples 에 있는 hello world 프로그램의 수정본
2 hello.php[ | ]

아래 소스코드 중 '앱아이디'라고 된 부분에 자신의 앱ID를 입력한다.
<!DOCTYPE html>
<html lang="ko">
<head>
  <title>안녕 친구들</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <meta property="og:title" content="안녕 친구들" />
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="안녕 친구들" />
  <meta property="og:description" content="안녕 친구들! 이것은 내 모바일 웹앱 예제랍니다." />
  <meta property="og:image" content="http://www.facebookmobileweb.com/hackbook/img/facebook_icon_large.png"/>
</head>
<body>
  <div id="fb-root"></div>
  <script>
    (function() {
      var e = document.createElement('script'); e.async = true;
          e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
          document.getElementById('fb-root').appendChild(e);
          }());
  </script>
  
  <script>
    window.fbAsyncInit = function() {
      FB.init({ appId: '앱아이디', 
      status: true, 
      cookie: true,
      xfbml: true,
      oauth: true});
 
      FB.Event.subscribe('auth.statusChange', handleStatusChange);	
    };
  </script>
  
  <script>
   function handleStatusChange(response) {
     document.body.className = response.authResponse ? 'connected' : 'not_connected';
    
     if (response.authResponse) {
       console.log(response);
       updateUserInfo(response);
     }
   }
   </script>
   
   <div id="login">
     <p><button onClick="loginUser();">Login</button></p>
   </div>
   <div id="logout">
     <div id="user-info"></div>
     <p><button  onClick="FB.logout();">Logout</button></p>
   </div>
   
  <script>
    function loginUser() {    
      FB.login(function(response) { }, {scope:'email'});  	
    }
  </script>
  
  <style>
    body.connected #login { display: none; }
    body.connected #logout { display: block; }
    body.not_connected #login { display: block; }
    body.not_connected #logout { display: none; }
  </style>
  
  <div id="user-info"></div>
  <script>
    function updateUserInfo(response) {
      FB.api('/me', function(response) {
        document.getElementById('user-info').innerHTML = '<img src="https://graph.facebook.com/' + response.id + '/picture">' + response.name;
      });
    }
  </script>

  <a href="#" onclick="getUserFriends();">Get friends</a><br>
  <div id="user-friends"></div>
  <script>
  function getUserFriends() {
    FB.api('/me/friends&fields=name,picture', function(response) {
      console.log('Got friends: ', response);
      if (!response.error) {
        var markup = '';
        var friends = response.data;
        for (var i=0; i < friends.length && i < 25; i++) {
          var friend = friends[i];
          markup += '<img src="' + friend.picture + '"> ' + friend.name + '<br>';
        }
        document.getElementById('user-friends').innerHTML = markup;
      }
    });
  }
  </script>
 
  <a href="#" onclick="publishStory();">Publish feed story</a><br>
  <script>
  function publishStory() {
    FB.ui({
      method: 'feed',
      name: '저는 소셜 모바일 웹앱을 만들고 있어요.',
      caption: '이 웹앱은 굉장한 것이 될 거예요.',
      description: '당신도 만들고 싶다면 페이스북 개발자 사이트를 확인하세요.',
      link: 'http://www.facebookmobileweb.com/hello',
      picture: 'http://www.facebookmobileweb.com/hackbook/img/facebook_icon_large.png'
    }, 
    function(response) {
      console.log('publishStory response: ', response);
    });
    return false;
  }
  </script>
  
  <a href="#" onclick="sendRequest();">Send request</a><br>
  <script>
  function sendRequest() {
    FB.ui({
      method: 'apprequests',
      message: 'invites you to learn how to make your mobile web app social',
    }, 
    function(response) {
      console.log('sendRequest response: ', response);
    });
  }
  </script>
  
  <fb:like></fb:like>
</body>
</html>
3 같이 보기[ | ]
