ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 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>



    반응형

    댓글 0

Designed by Tistory.