반응형
250x250
Notice
Recent Posts
Recent Comments
Link
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Archives
Today
Total
관리 메뉴

가끔 보자, 하늘.

Facebook Web 연동 막정리 본문

개발 이야기/개발 및 서비스

Facebook Web 연동 막정리

가온아 2014. 2. 2. 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))

   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>



반응형