Full Stack Web Developer.
Syaku (샤쿠)

Java, JS (ES6+), Spring, Spring security, jQuery, Reactjs, Bootstrap.

        

07-12 09:23


Spring Boot 2 보기 Front-end 보기 DevOps 보기 Spring 3 보기 Spring Security 3 보기

jQuery Syaku Facebook API : 자바스크립트용 페이스북 API 연동

written by Seok Kyun. Choi. 최석균

jQuery 를 이용하여 페이스북 API 를 연동하기

우선 페이스북 API 를 사용하려면 페이스북에서 제공하는 앱을 생성해야 한다.
http://developers.facebook.com/docs/ 접속하여 앱을 생성한다.

아래의 소스는 로그인한 회원의 정보를 읽어오며, 포스트를 등록할 수 있는 기능의 소스이다.
그외 필요한 기능은 페이스북에서 제공하는 문서를 참조하면 쉽게 구현할 수 있다.

* 제가 최근 SNS 관련하여 개발을 하고 있습니다. 음... 상세한 설명까지는 힘들 것 같아요~
그래서 지우기는 아쉽고 해서 혹여나 도움이 될까하여 테스트로 만든 샘플 소스들을 마구잡이로 올려두고 있습니다.
설명이 부족하다고 해서 버럭하시지 말아주세요~

 자바스크립트 & HTML 소스

<html>
  <head>
  <title>jQuery Syaku Facebook API</title>

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
  <script src="http://connect.facebook.net/ko_KR/all.js"></script>

  <script type="text/javascript">

    /**
     * jQuery Syaku Facebook API ver 1.0.0
     *
     * Copyright (c) Seok Kyun. Choi. 최석균
     * GNU Lesser General Public License
     * http://www.gnu.org/licenses/lgpl.html
     *
     * registered date 20111006
     * http://syaku.tistory.com
     */

    (function($) {

      $.sFacebook = {
        image_url : null,
        photo_id : null,
        me_uid : null,
        me_name : null,

        initialize : function(settings) {

          settings = jQuery.extend(true , {
            appId : '',
            cookie:true, 
            status:true,
            xfbml:true,
            image_url : 'http://graph.facebook.com/{image}/picture',
            me_photo_target : '#facebook-me-photo',
            me_name_target : '#facebook-me-name',
            facebook_close_target : '#facebook-close'

          }, settings);

          this.image_url = settings.image_url;
          this.me_photo_target = settings.me_photo_target;
          this.me_name_target = settings.me_name_target;
          this.facebook_close_target = settings.facebook_close_target;

          var obj = this;
          jQuery('body').append("<div id='fb-root'></div>");

          FB.init({ 
            appId : settings.appId,
            cookie : settings.cookie, 
            status : settings.status,
            xfbml : settings.xfbml
          });

          FB.Event.subscribe('auth.login', function (response) {
            // do something with response
            obj.reload();
          });

          FB.Event.subscribe('auth.logout', function (response) {
            // do something with response
            obj.reload();
          });

          obj.reload();
        },

        reload : function() {
          var obj = this;

          this.me_profile();
          FB.getLoginStatus(function (response) {
            
            if (response.session) {
              // logged in and connected user, someone you know
              jQuery(obj.facebook_close_target).show();
            } else {
              jQuery(obj.facebook_close_target).hide();
            }

          });
        },

        me_profile : function() {
          var obj = this;

          FB.getLoginStatus(function (response) {
            if (response.session) {
              FB.api('/me', function(user) {
                if(user != null) {
                  var image = obj.image_url.replace('{image}',user.id);
                  
                  obj.me_uid = user.id;
                  obj.me_name = user.name;

                  jQuery(obj.me_photo_target).attr("src",image);
                  jQuery(obj.me_name_target).text(obj.me_name);
                  
                }

              });

            } else {
              
              obj.me_uid = null;
              obj.me_name = null;
              jQuery(obj.me_photo_target).attr("src",'');
              jQuery(obj.me_name_target).empty();

            }

          });

        },

        login : function() {

          FB.getLoginStatus(function (response) {
            
            if (response.session) {
              obj.me_profile();
            } else {
              FB.login(function(response) { }, { perms:'user_website,email,offline_access,read_stream,publish_stream' });
            }

          });

        },

        logout : function() {
         FB.logout(function(response) { });
        },

        post_feed : function(target) {
          var text = jQuery(target).val();
          var text_count = new String(text); 
          if (text_count.length == 0) { alert("내용을 입력하세요."); jQuery(target).focus(); return; }

          var params = { 
            message : text,
            link : document.URL,
            name : document.title
          };

          FB.api('/me/feed', 'post', params, function(response) {
            if (!response || response.error) {
              alert('Error occured');
            } else {
              alert('Post ID: ' + response.id);
              document.reload();
            }
          });

        },

        select_user_name : function(user_id) {
          var query = FB.Data.query('select name, uid from user where uid={0}',user_id);
          query.wait(function(rows) {
            return rows[0].name;
          });
        }


      };

    })(jQuery);

  </script>

  </head>
    <body>
      <script type="text/javascript">
        jQuery(function() {
          
          jQuery.sFacebook.initialize({
            appId : '**************' // 페이스북 App Id 입력.
          });

        });

      </script>

      <input type="text" id="facebook-post-id" />

      <div><a href="javascript:jQuery.sFacebook.login();"><img src="facebook_32.png" /></a></div>
      <div>
      <span id="facebook-me-name"></span>
      <span id="facebook-close" style="display:none;"><a href="javascript:jQuery.sFacebook.logout();">연결끊기</a></span>
      </div>
      <div style="padding-top:5px;">
      <img src="" id="facebook-me-photo" width="50" height="50" />
      <textarea cols="0" rows="0" style="height:50px;width:500px;" id="sns-post-feed" ></textarea>
      <button type="button" onclick="jQuery.sFacebook.post_feed('#sns-post-feed');">글쓰기</button>
      </div>


    </body>
 </html>



posted syaku blog

Syaku Blog by Seok Kyun. Choi. 최석균.

http://syaku.tistory.com

  • 블로그엔조이 at 2011.11.02 20:38 신고

    잘보고 갑니다. ^^
    즐거운 하루되세요 ~ ^^

  • at 2012.01.04 20:45

    비밀댓글입니다

    • 샤쿠 syaku at 2012.01.05 00:06 신고

      글(post_feed)쓰면 페이스북에 글이 등록되는 부분 말씀하시는 건가요?
      post_feed 함수 메서드에보면 params 라는 변수가 보이죠
      message : 내용
      link : 링크주소
      name : 제목??
      image : 이미지
      등등 페이스북에서 제공하는 값을 추가하면 됩니다.

      https://developers.facebook.com/docs/reference/dialogs/feed/

      참조하세요~

  • Ezcode at 2012.01.05 10:23 신고

    감사합니다. 덕분에 해결되었습니다.
    app_id가 활성화가 안된것인지 설정내용을 변경하니 적용이 됩니다

  • at 2012.02.20 23:38

    비밀댓글입니다

    • 샤쿠 syaku at 2012.02.24 15:53 신고

      예 자바로 가능합니다.
      http 프로토콜로 데이터만 잘 주고받으면 구현하는 데 어려움은 없습니다. 문제는 각 sns 에서 제시하는 사항을 잘 이해해야한다는거죠. ;;; 당장 이론적으로 풀어서 설명하기가 쉬운게 아니라서요. 급하시다면 이미 개발된 java api 사용해보세요 페이스북도 자바 api가 있습니다.

      참고 : 검색하실때 네이버 보다는 구글을 통해서 검색해보세요. 검색어 : 자바 페이스북 API 혹은 JAVA FACEBOOK API

  • 뚱땡이 at 2012.02.21 18:04

    덕분에 엄청 도움이 되었습니다.
    그런데 하나 질문 드려도 되나요??? ㅜㅜ
    처음에는 페이스북에 잘 등록도 되고 로그인 창도 팝업으로 열리고 했는데
    몇번 테스트하다보니 로그인 창도 안열리고 에러표시가 되어 담벼락에 글도 안써지네요.. ㅜㅜ
    왜 그런건지 간략하게 설명을 요청해도 되나용??

    • 샤쿠 syaku at 2012.02.24 15:47 신고

      오류 메세지도 포함해주셨으면 조금이라도 도움을 드릴수 있을 것 같네요. 파이어폭스에 파이어버그라는 걸로 오류를 확인해보세요....

      참고: 중복된 내용의 포스트는 등록되지 않습니다.

    • 뚱땡이 at 2012.03.08 10:13

      아!~ 중복된 내용은 등록이 안되는군요 ^^

      너무너무 감사드립니다~~~~~~~~~~

      행복한 하루 되세용용~~~

  • 질문자 at 2012.03.12 16:18

    안녕하십니까^^ 도움이 많이 됩니다.
    그런데 하나 의문이 로그인하고 창이 닫히면 연결끊기라는 부분이 안나오네요?
    이 부분처리와 자동로그인을 해놓기 위해 access token을 DB에 저장하려고 하는데
    가능한가요? 어떤 것을 저장해서 보내야 다시 로그인하지 않고 보내기만 누르면
    인증을 거치지 찮고 자동으로 보내기가 될끼요?
    조언구하고싶습니다.

    • 샤쿠 syaku at 2012.03.12 19:20 신고

      아마 리턴url이 앱설정과 맞지않아 생기는 문제인듯해요. 자바스크립트용은 따로 토큰을 제공하는 방식이 아닙니다~ login 메서드를 보면 response.session 이용해서 기존에 로그인했던 정보가 있는 지 체크합니다. 자바스크립트용은 페이스북에서 제공하는 API로 모두 해결할 수 있어요.

      ^^ 저도 자바스크립트용은 많이 몰라요. 감잡는 다고 대충해보고 바로 자바(JAVA)로 개발했었거든요.

  • 질문자 at 2012.03.12 21:12

    답변정말감사드립니다. 그런데
    1. 리턴URL과 앱설정은 찾아도 없는거 같은데 어디서 하면 되죠?
    2. 그러면 자동로그인은 토큰을 가지지 못한다면 어떤방식으로 구현하나요? 제가말씀드리는 자동로그인은
    항상 연동이 되어있는 것을 말씀드리는 것입니다^^

  • 질문자 at 2012.03.12 21:19

    보니까 로긴하고 obj.reload(); 후에
    저는 if (response.session) 가 다 else를 타는거 같네요ㅠ
    이유가 뭘까요

  • 김현수 at 2013.03.27 10:21

    제가 과제로 프로세싱 프로그램을 쓰고 있는데 어느 지도에 페이스북 체크인기능을 넣을려고 하는데요 전혀 감을 못잡겠어요. 가르침 부탁합니다ㅜㅜ

댓글 남기기
◀ PREV 1···456789101112···14 NEXT ▶