2014.02.02 23:53

원본 : https://developers.facebook.com/docs/javascript/quickstart


사이트 내용 전체를 번역하였다, 허락없이 번역본을 웹사이트에 공개하는 것은 저작권 침해라하여 올리지 못함.


그래서 일단 제작에 대한 내용을 별도 정리하여 업데이트 한다. 


들어가기전..

* 아래 내용을 테스트 하려면 facebook app에 대한 개발 환경이 갖추어져야 한다. 아래 내용은 웹 APP에 대한 개발을 기준으로 정리되었다.

 - facebook에서 "앱 만들기"를 통해 만들고자 하는 앱을 등록하고, ID를 발급받는다.

 - App Domain에 localhost로 등록은 안된다. 자신의 PC에 있는 hosts 파일에 원하는 이름을 넣어두고, 그 이름으로 등록하면 local test 가능하다. (해당 이름으로 사이트 URL도 맞추어야 한다.)

-------------------------------------------------------------------------------

Javascript를 위한 facebook sdk는 다른 자바스크립트 라이브러리처럼 코드상에서 세팅. html 파일의 <body> 태그 바로 아래에 아래 코드를 삽입하면 끝.

<div id="fb-root"></div>

<script>

  window.fbAsyncInit = function() {

  FB.init({

    appId      : 'your-app-id',

    status     : true, // check login status

    cookie     : true, // enable cookies to allow the server to access the session

    xfbml      : true  // parse XFBML

  });


  // Load the SDK asynchronously

  (function(d){

   var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];

   if (d.getElementById(id)) {return;}

   js = d.createElement('script'); js.id = id; js.async = true;

   js.src = "//connect.facebook.net/en_US/all.js";

   ref.parentNode.insertBefore(js, ref);

  }(document));


 - 성능을 고려해 javascript sdk는 최소화된 버전으로 로드되는데, 디버깅을 위해 아래와 같이 sdk를 세팅할 수 있다.

js.src = "//connect.facebook.net/en_US/all/debug.js";


- 소셜 플러그인 기능도 활용할 수 있는데, 대표적인 like 버튼을 아래와 같이 삽입 가능하다. 아래 코드를 body 안에 넣고 리로드 해보면 결과를 확인할 수 있다.

<div class="fb-like" data-send="true" data-width="450" data-show-faces="true"></div>

 

- 로그아웃 버튼 삽입은 아래와 같이

<a href="#" onclick="FB.logout();">logout</a>


- Feed에 글 남기기 (이미지 지정 해서)

 1) body 안에 링크 

<a href="#" onclick="postToFeed();">글 올리기</a>

  2) javascript에 추가

   function postToFeed(){

var data= {

method: 'feed',

link : 'your-url',

name : '이름',

caption : '캡션',

description : '설명'

};

function callback(response){

}

FB.ui(data, callback);

  }


- 자신의 페이지에 comment 남기기 (자신의 주소를 기준으로 포스트 내용을 facebook 서버에 저장하고, 페이지 로딩시에 불러오는 듯)

<fb:comments href="your detail url" num_posts="4" width="400"></fb:comments>



저작자 표시 비영리 동일 조건 변경 허락
신고

'개발/경험' 카테고리의 다른 글

git 사용기  (0) 2014.03.18
ofstream 반복 활용시...  (0) 2014.02.24
Facebook Web 연동 막정리  (0) 2014.02.02
나의 생각을 전달한다는 것.  (0) 2014.01.22
개발과 리딩의 사이  (0) 2014.01.22
개발자에서 개발자들의 리더가 된다는 것!  (0) 2014.01.22


티스토리 툴바