목적: Website에 Facebook for Websites를 사용하여, Facebook application을 구축
참고 자료
Facebook F8 Developers Conference, in San Francisco
Facebook Developers
Facebook Developer Wiki
Introduction
먼저 4월 21일, 샌프란시스코(San Francisco)에 진행한 Facebook F8 Developers Conference를 먼저 시청하시는 것이 개념 정립에 용이합니다.
Getting Started
Facebook를 기반으로 한 개발은 크게 3가지로 나뉘며, 여기에서는 간략한 개념만 파악한 후, ‘Facebook for Websites’을 사용하여 Facebook Application을 구축합니다.
1. Websites(Facebook for Websites)
The Facebook Platform enables you to make your website more personalized and social. You can mix and match Facebook’s APIs to best meet your goals.
user의 website에 Facebook와 연동되는 application을 구현하는 개념.
2. Apps on Facebook.com
Building an application on Facebook gives you the opportunity to deeply integrate into the core Facebook experience. By leveraging Facebook’s integration points you can make your application feel native to the site, and create a seamless experience as users browse Facebook. Your application can integrate with all aspects of the Facebook user experience, from the profile page to bookmarks and the stream.
Facebook 내부에 user의 application을 Apps로 구현하는 개념.
3. Mobile apps
Over 100 million people use Facebook from mobile phones every month. You can incorporate Facebook into your own mobile application using the same APIs as those provided for all websites, formatted to fit on a mobile phone.
Mobile에서 접근 가능한 application을 Apps로 구현하는 개념.
Websites(Facebook for Websites)
1. Register your application
’Facebook for Websites’를 위해서는 먼저 facebook에 sign up후 Create an Application를 클릭하여 각 단계를 진행한다. 그러면 ‘API key’가 포함된 ‘My Applications’가 생성되며, 차후 facebook의 bookmarks인 ‘developer’를 통해서 용이하게 확인 및 수정 할 수 있다.
2. Choosing between an FBML or IFrame Application
’Facebook for Websites’를 구현 하는 방법에는 FBML와 IFrame을 사용하는 두 가지의 방법이 있다. 보다 자세한 사항은 Choosing between an FBML or IFrame Application를 참조.
3. Authentication
위 단계를 통해 생성된 ‘API key’와 Authentication를 참조하여 ‘Login with Facebook’ 부분을 구현한다. 여기서는 다양한 옵션은 제외하고 기본적인 ‘Single Sign-on with the JavaScript SDK’만을 구현한다.
facebookUtil.js
/**
* fncFB_SSO
*
* @category facebook
* @description Single Sign-on
* @example
* @param
*/
var fncFB_SSO = function() {
FB.init({
appId: 'your app id',
status: true,
cookie: true,
xfbml: true
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
}
external script file
<script src="http//connect.facebook.net/en_US/all.js"></script> <script src="./js/lib/facebookUtil.js"></script>
Fb:login button
아래 example에서 사용한 ‘autologoutlink’의 ‘true’ 속성은 user가 이미 login한 경우 logout을 보여준다. 이외의 ‘Fb:login-button’의 속성은 Fb:login-button를 참조.
<fb:login-button autologoutlink="true"></fb:login-button> <div id="fb-root"></div>
Social plugins
다음은 f8에서 발표한 ‘Social plugins’로 총 8가지가 존재하며, Social plugins을 통해서 손쉽게 구현 할 수 있다. 적용의 example는 Facebook for Websites를 참조.
수정 일자
2010/06/21