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
2014.02.01 13:48
48. 통찰의 기술
신병철


알라딘 중고서점에서 산 책. 인터넷 1만원인데, 깨끗한 중고가로 오천원에 구매. 
많은 책들에서 이야기한 내용들이긴 하지만, 잊고 있던 것들에 대한 리마인드를 시켜주네. 
역시 성공을 위한 키워드로 꼽는 것은 몰입!!
내 인생에서 첫번째로 경험한 것은 게임, 그리고 대학교 입학 후 반년 열심히 놀다가 이러면 안되겠다는 생각에 들어간 대학 도서관. 내가 좋아하는 수업 빼고는 그냥 도서관에서 살았던 기억. 그리고 지금의 회사에 입사 후 한동안 빠져 있던 C++을 배울 때. 

실패도 많고 굴곡도 많은 시간이었지만 돌이켜보면 재미있었다. 
나에게 아직 많은 시간과 기회가 있기에 이 말을 되뇌이며 오늘은 이만!

"Past pain is pleasure" 


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

그가 생각했던 매 순간  순간을 나도 같은 마음으로 되뇌이며 살아가자.



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

'게임/책/영화/음악/' 카테고리의 다른 글

Godivaism  (0) 2014.03.18
책 100권 읽기 - 2014년 1월(48)  (0) 2014.02.01
Jonas Edward Salk  (0) 2014.01.27
의외로 멋진 뷰!!  (0) 2014.01.22
포켓몬 16기 극장판 "신의 속도 게노세크트, 뮤츠의 각성"  (0) 2014.01.13
스위티 - 열대과일  (0) 2014.01.13