삘과 의역으로 범벅된 장담하기 힘든 번역.
원문 : Facebook for Websites
Facebook for Websites
페이스북 플랫폼은 당신의 웹사이트를 좀 더 소셜스럽게 만들어 준다.
당신은 단한줄의 html코드로 Social Plugins 과 Like Button 등을 만들어 사용하여 한줄의 html 코드로
사용자의 참여를 유도할 수 있다.
Login Button 과 Registration Plugin 을 통해 사용자의 등록 및 로그인을 단순화 하거나 없앨 수 있다.
마지막으로 Graph API 는 지정된 사용자의 모든 소셜 그래프를 접근하여 깊은 개인 경험을 만들 수 있도록 한다.
이 가이드에서는 이러한 기능을 활용하여 웹 앱을 만드는 기본을 알려 줄 것이다.
이 가이드의 예제는 서버측 언어로는 php 를 사용하고 클라이언트측 언어론 html과 자바스크립트를 사용한다.
이 예제는 다른언어로 바꿔봐도 졸라 쉽게 되어 있다
목차:
Social Plugins
페이스플랫폼 중에 가장 쉽게 시작할 수 있는 것은 Social Plugins 이다.
이 플러그인은 당신의 사이트에 html코드로 삽입되어 사용이 가능한 사회적 기능이다.
이것은 페이스북에서 호스팅 되므로 페이스북에 로그인 되어있다면 당신의 사이트를 처음 방문하더라도
사용자를 위해 개별화(최적화) 될 수 있다.
가장 중요한 소셜플러그인은 한번의 클릭으로 자신의 친구들과 페이지를 공유 할 수 있는 Like Button 이다.
아래처럼 iframe태그로
당신은 모든 페이지에 "좋아요 버튼" 을 추가 할 수 있다.
<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<iframe src="https://www.facebook.com/plugins/like.php?href=YOUR_URL"
scrolling="no" frameborder="0"
style="border:none; width:450px; height:80px"></iframe>
</body>
</html>좋아요 버튼은 해당페이지를 좋아한 사용자의 이름이나 그의 사진을 포함할지 여부를 정하는 여러가지 옵션 이 있다.
아래가 바로 페이스북사이트의 좋아요 버튼이다.
일단 당신의 사이트에서 좋아요 버튼을 사용한다면 사용자들은 당신의 사이트 전반에 걸쳐 보다 간지나는 경험을 상호작용
할수 있는 다른 소셜플러그인을 사용 할 수 있다.
당신은 Activity Feed Plugin 을 사용하여 사용자들에게 그들의 친구들이 좋아한 페이지와 댓글을 보여줄수있다.
당신의 모든 사이트에서 선허도와 댓글을 바탕으로 사용자에게 맞춰진 페이지를 추천하도록 하는
Recommendations Plugin 또한 사용할 수 있다.
아래는 바로 그것들이다.
대부분의 플러그인은 iframe 태그로 쉽게 사용할 수 있지만
Comments 나 Live Stream, 같은 플러그인들은 XFBML(eXtended Facebook Markup Language)의 사용을 필요로 한다.
XFBML 은 소셜 플러그인을 표시하는 HTML페이지에 포함 될 수 있는 XML 요소의 집합이다.
페이지가 로드되면 XBFML 요소들은 JavaScript SDK 로 처리되어 당신의 페이지에 표시 된다.
우리는 모든 소셜플러그인의 XBFML 요소를 제공한다.
예를 들어 좋아요 버튼도 똑같이 XBFML을 사용하여 사용자페이지에 배치할 수 있다.
<html>
<head>
<title>My Great Web page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
(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'));
</script>
<div class="fb-like"></div>
</body>
</html>이 플러그인들은 iframe 버전이 가장 널리 사용되고 있고 이는 페이스북플랫폼에 대해 잘 몰라도 사용할 수 있다.
XFBML 버전은 일반적으로 자신의 코드에서 일관성을 가지고 좀더 많은 컨트롤을 원하는 개발자들에 의해 사용된다.
처음엔 간단히 되지 않을 수 도있다.
그냥 우리 Social Plugin page 에서 플러그인을 선택하면 제공되는 configurator(설정폼?) 의 단계를 따라라.
configurators 은 아래처럼 당신의 플러그인을 설정하고 당신의 사이트에 추가하는데 필요한 모든 코드를 생성하는데 도움이 된다.
Authentication(인증)
페이스북은 로그인시스템으로 쉽고 강화된 사용자등록과 로그인을 하도록 한다.
사용자는 더이상 별도의 등록 양식을 작성하고 여러개의 아이디와 암호를 기억할 필요가 없다.
페이스북에 로그인 하면 자동으로 당신 사이트에 역시 로그인된다.
페이스북으로 로그인을 사용하면 사용자가 자신의 브라우저에서 님의 사이트를 방문했을때
보다 소셜화되고 개인화된 경험을 활용있도록 당신에게 정보를 제공하게 된다.
페이스북 플랫폼은 인증 및 권한 부여를 위해 OAuth 2.0 를 사용한다.
오픈소스인 JavaScript SDK 를 사용하면 OAtuth 2.0( Authentication Overview 참고) 으로 쉽게 로그인 할 수 있다.
자바스크립트 SDK 는 페이스북이 App ID 를 얻기위해 register your website 을 요구한다.
App ID 는 사용자와 당신의 웹사이트 사이에서 보안을 보장하는 고유 식별자 이다.
다음예제는 App ID 를 이용하여 자바스크립트 SDK를 로드하는 방법을 보여준다.
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
</html>당신의 페이지에서 자바스크립트 SDK를 로드하고 appID 로 초기화 되면
<div class="fb-login-button"> 요소를 사용하여 간단히 Login Button 을 삽입할 수 있다.
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-login-button">Login with Facebook</div>
</body>
</html>유저의 브라우저에서 페이지를 로드되면 자바스크립트 SDK는 당신의 페이지에 로그인버튼을 표시한다.
당신의 사이트로 사용자를 로그인 시키기 위해선 3가지 일이 필요하다.
첫째, 페이스북은 사용자를 인증해야 한다.
이것은 그들이 그들임을 보장한다.
둘째, 페이스북에 당신의 웹사이트를 인증받아야 한다.
이것은 사용자가 다른사람이 아닌 당신의 사이트에 정보를 주는것을 보장한다.
마지막으로 사용자가 명시적으로 당신의 웹사이트가 자신의 정보를 접근해도 좋다고 승인해야한다.
이는 당신의 사이트에서 사용자들의 어떤 정보가 공개되는지를 보장한다.
이 단계는 복잡해 보일 수 도 있지만 다행스럽게도 당신이 해야할 것은 로그인 버튼을 삽입하는 것이고
사용자는 그것을 클릭만 하면 된다.
사용자가 버튼을 클릭하면 자바스크립트 SDK 는 유저가 페이스북에 로그인되어있는지 확인하고
이 요청은 당신의 웹사이트에 보내지게 된다.
이때 우리는 authorization dialog 로 당신의 사이트와 요청하는 사용자 데이터를 사용자의 브라우저에 제시한다.
기본적으로 이 authorization dialog 는 다음과 같다.
사용자가 허용을 클릭하면 페이스북은 당신의 사이트가 요청한 정보에 대한 접근할 수 있도록 허용한다.
만약 사용자가 승인거부를 클릭한다면 대화장사가 닫히고 당신의 사이트엔 정보 한톨도 줄수가 없뜸 ㅋ
기본적으로 페이스북은 당신에게 사용자의 이름, 사진과 기타 데이터에 접근하는 권한을 준다.
(자세한 정보를 위해선 User Graph object 참고)
만약 기본정보 외에 이메일 주소같은 자세한 정보가 필요하다면 당신은 해당정보에 대한 permissions(사용권한) 을
요청해야 한다.
당신은 아래처럼 로그인버튼에 scope 속성을 사용하여 이작업을 수행 할 수 있다.
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div class="fb-login-button" data-scope="email,user_checkins">
Login with Facebook
</div>
</body>
</html>사용자가 이 페이지에서 로그인 버튼을 클릭하면 그들은 아래처럼 인증대화상자를 보게된다.
권한에 대한 전체 목록은 permissions reference 에서 참고 할수있다.
요청하는 권한이 많을수록 사용자는쌩깔 확율이 높으므로 어지간하면 꼭 필요한 권한만 요청하자.
로그인 버튼 이외에 우리는 Registration Plugin(등록플러그인) 또한 제공한다.
등록 플러그인은 로그인 버튼에서는 사용할 수 없는 2가지 기능
- 페이스북를 계정이 없는사용자를 위한 지원,
- 페이스북이 없거나 사용할 수 없는 사용자 들에게 추가 정보를 요청하는 기능
을 제공한다.
등록 플러그인을 사용하는것은 로그인버튼과 마찬가지로 졸라 쉽다.
당신은 단지 페이지에 로그인 버튼 대신 <div class="fb-registration"> 요소를 삽입하면 된다.
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div
class="fb-registration"
data-fields="[{'name':'name'}, {'name':'email'},
{'name':'favorite_car','description':'What is your favorite car?',
'type':'text'}]"
data-redirect-uri="URL_TO_LOAD_AFTER_REGISTRATION"
</div>
</body>
</html>사용자가 이미 페이스북에 로그인 하지 않았다면 그들은 아래 From을 보게 된다.
사용자 정보가 작성되어 있지 않지만 페이스북에 로그인 할수 있는 링크가 따로 있다.
만약 사용자가 이미 페이스북에 로그인 되어 있거나 등록 폼에서 로그인하면 아래 Form을 보게 된다.
페이스북의 기본 정보가 Form에 작성되어 있는것을 확인 할 수 있다.
사용자가 정보를 검토하고 모든 사용자 정의 필드를 입력한 후 사용자는 Register를 클릭한다.
(위의 예제에서 favorite_car 는 현재 사용자의 페이스북 프로필 일부 데이터가 아니므로
사용자가 직접 삽입해야 하는 사용자 정의 입력란이다.)
클릭하면 아래의 대화상자로 표시되는 인증 및 권한 부여 프로세스를 시작한다.
인증/완료 의 승인과 함께 우리는 당신의 등록 절차를 완료하고 redirect-uri 속성에 설정된 url로 사용자를 이동시킨다.
로그인 버튼과 등록 플러그인은 님의 사이트가 5억이상의 페이스북 사용자를 쉽게 확보하도록 해준다.
당신은 Login Button 과 Registration Plugin, JavaScript SDK 의 안내서를 통해 자세히 방법을 알아 볼수있다.
Personalization(개인화)
페이스북을 이용하여 로그인을 하면
Social Plugins 이 당신의 사이트를 쉽게 개인화(개별화,최적화) 시키고
사용자에 대한 더욱 풍부한 개인화된 경험을 만들기 위해 Graph API 의 완벽한 능력을 사용할 수 있다.
당신은 Graph API 로 사용자의 페이스북 프로필에 접근하여 당신만의 커스텀 경험을 위해 정보를 사용할 수 있다.
당신은 Graph API 로 사용자의 Facebook Wall 과 뉴스피드에 글을 게시 할 수 있다.
당신은 Graph API 로 사용자의 소셜그래프에 접근 하여 그들의 친구들을 직접 당신의 사이트에 데리고 오도록 할 수 있다.
Javascript SDK 는 Graph API (FB.api )에 접근하는 간단한 방법을 제공한다.
이 함수는 대상의 Graph의 부분을 지정하는 문자열 인수를 받고 호출이 완료 될때 콜백함수를 실행 한다.
다음은 어떻게 사용자의 사진 및 이름을 검색하기 위해 FB.api() 를 어떻게 사용하는지를 보여준다.
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.api('/me', function(user) {
if (user) {
var image = document.getElementById('image');
image.src = 'https://graph.facebook.com/' + user.id + '/picture';
var name = document.getElementById('name');
name.innerHTML = user.name
}
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
<div align="center">
<img id="image"/>
<div id="name"></div>
</div>
</body>
</html>자바스크립트 SDK로 당신의 사이트를 개인화시키는 또다른 방법은 FB.ui 의 사용이다.
이 함수는 사이트의 컨텍스트 안에서 우리의 Platform Dialogs 를 호출한다.
당신은 사용자의 Feed에 글을 게시하거나 새로운 친구를 초대하는 FB.ui 을 사용할 수 있다.
아래는 귀하의 사이트에서 Feed 대화상자를 사용하는 방법을 보여준다.
<html>
<head>
<title>My Facebook Login Page</title>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : 'YOUR_APP_ID',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.ui({ method: 'feed',
message: 'Facebook for Websites is super-cool'});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
</html>사용자의 브라우저에서 이 페이지가 열리면
자바 SDK는 사용자가 자신의 Feed 에 게시하는데 사용할 수 있는 아래의 대화상자를 표시한다.
아래의 대화상자 또한 앞서 작성한 포스팅을 덮어쓸 수 있는 등의 기본 옵션들이 있다.
자바스크립트 SDK 로 무엇을 할수 있는지 배울려면 우리의 JavaScript Console 를 사용하는것이 좋은 방법이다.
이 툴은 당신의 사이트를 변경하기 전에 콘솔 자체에서 직접 실행할수 있는 예제의 호스트를 제공한다
자바스크립트 SDK 는 클라이언트측 코드에서 Graph API 및 플랫폼 대화상자에 접근 할 수 있지만
가장 흥미로운 기능중의 일부는 웹 서버에서 실해되는 서버측 코드에서만 접근할 수 있다.
자바스크립트 SDK는 로그인한 사용자에 대한 세부정보를 저장하고 이는 php SDK 에서 접근할 수있다.
이것은 별도의 작업을 하지 않고 서버사이드에서 페이스북플랫폼을 호출하는 것을 허용한다.
아래의 php 예제에서는 로그인을 위해 그리고 개입화를 위해 자바스크립트 SDK와 php SDK를 어떻게 사용하는가를 보여준다.
<?php
define('YOUR_APP_ID', 'YOUR APP ID');
//uses the PHP SDK. Download from https://github.com/facebook/php-sdk
require 'facebook.php';
$facebook = new Facebook(array(
'appId' => YOUR_APP_ID,
'secret' => 'YOUR APP SECRET',
));
$userId = $facebook->getUser();
?>
<html>
<body>
<?php if ($userId) {
$userInfo = $facebook->api('/' + $userId); ?>
Welcome <?= $userInfo['name'] ?>
<?php } else { ?>
<div id="fb-root"></div>
<fb:login-button></fb:login-button>
<?php } ?>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '<?= YOUR_APP_ID ?>',
status : true,
cookie : true,
xfbml : true,
oauth : true,
});
FB.Event.subscribe('auth.login', function(response) {
window.location.reload();
});
};
(function(d){
var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
d.getElementsByTagName('head')[0].appendChild(js);
}(document));
</script>
</body>
</html>자바스크립트 SDK와 php SDK를 함께 사용하는 것은 서버측 코드에서 사용자의 자격과 정보에 접근하는 여러가지 방법중 하나이다.
우리의 Authentication Guide 는 client-side code 없이도 바로 당신의 웹 서버에서 Graph API 로 접속할 수 있게 하는 인증 & 허가를 어떻게 실행하는지에 대해 알려주고 있다.
Analytics(분석)
Insights 를 사용하면 당신의 사용자에 대해 다양한 그래프와 당신의 웹사이트에서 어떤식으로 공유하는지에 대한
통계자료에 대해 상세한 분석을 받을 수 있다.
Insights 는 도메인과 앱에 의해 세분화된 레포트를 제공한다.
이하 내용 귀차니즘에 의해 포기... 뭔가 어려움
Next Steps
어쩌고 저쩌고 잡소리..Facebook Platform Overview 과 Graph API 는 처음 시작하기 좋은 곳이다.
만일 실전 예제에 대한 도움을 찾는 다면 Samples 을 참고
당신이 뭔가 삘을 받기를 원한다면 우리의Showcase 참고
'Facebook' 카테고리의 다른 글
| Facebook 번역 - 3. Custom Flash Hiding Callback (0) | 2012.09.07 |
|---|---|
| 페이스북 연동 관련 이것저것 (0) | 2012.07.11 |
| Facebook 번역 - 2. tutorial (0) | 2012.07.11 |
