페이스북 그래프 API로 내 페이스북 글 가져오기 (Graph api)

- 2020. 11. 11 -

페이스북 글 가져오기를 최신으로 업데이트 하였습니다.

아래 포스팅에서 확인 가능합니다.

https://tonhnegod.tistory.com/248

---

- 2019. 09. 04 추가 -

포스팅 내용을 조금 수정하였습니다. 

테스트 결과 포스팅 내용을 따라하면 페이스북 게시물이 제대로 출력되고 있습니다.

---

- 2018. 05. 31 추가 -

현재 페이스북 api 정책 변경으로 해당 포스팅의 페이스북 Graph api 사용법이 제대로 동작되지 않습니다. 

개발자 페이지 (https://developers.facebook.com/apps) 에 접속해보니, 

덧글 달아주신 'Meshmason' 님 말씀대로 앱 검수 받는 과정이 추가된 것으로 보입니다. 

테스트 후 올바로 동작이 되는 방법을 발견하면 내용 수정하겠습니다. 

---

오늘은 페이스북의 open api인 Graph api를 이용하여 내 페이스북 글을 가져오는 방법을 포스팅합니다.

여태껏 한번도 사용해본 적 없는 페이스북 api를 만지다보니

이 기능을 구현하기까지 적잖은 시행착오를 겪었습니다. 

다른 분들은 그런 시행착오를 겪지 않기를 바라며... 

누구든지 이 포스팅만 보면 쉽게 구현할 수 있도록, 

그리고 추후에 다시 쓸 일이 있을 때 참고도 할 겸 정리하여 올립니다. 

---

1. 페이스북 개발자 페이지에 접속하여 자신의 페이스북 아이디로 로그인합니다. 

(https://developers.facebook.com/apps/)

로그인 후 '새 앱 만들기'를 클릭, 앱 이름 입력 후, 앱 ID 만들기 합니다.

이름은 알아서 정하면 됩니다. 저는 test 로 했습니다.

2. 새 앱을 생성하셨다면, 앱 설정 페이지가 뜰 것입니다. 

상단에 있는 앱 ID는 나중에 홈페이지에 소스를 작성할 때 사용됩니다. 

그 점 기억해두시고, 따로 건드릴 것은 없으니 넘어갑니다. 

3. 페이스북 그래프 API 탐색기로 접속합니다. 

(https://developers.facebook.com/tools/explorer/)

접속 하셨다면, 우측 상단의 앱 부분을 클릭하여 새로 생성한 앱을 선택해 줍니다. 

4. 생성한 앱을 선택했다면, 바로 아래의 토큰 받기를 눌러 '사용자 액세스 토큰 받기'를 선택합니다. 

5. 그러면 권한 선택 창이 뜰 것입니다. 

여기서 user_posts 항목을 체크한 후, 액세스 토큰 받기 합니다. 

6. 아래와 같은 창이 뜹니다. '~~~님으로 계속' 눌러줍니다. 

7. 앞으로 게시될 게시물의 범위를 전체 공개로 변경합니다. (생략 가능)

※ 이 과정은 앞으로 내 페이스북에 게시되는 게시물에 대한 공개 범위를 설정하는 것입니다.

기존의 게시물들은 수동으로 공개 범위를 변경해주어야 하는 것 같습니다.

핵심은 '전체 공개' 상태인 게시물만 API로 가져올 수 있다는 점입니다.

내 페이스북 페이지에서 우측 상단의 화살표를 클릭 후 설정을 클릭합니다. 

좌측 메뉴에서 공개 범위를 클릭합니다.

범위를 전체 공개로 변경합니다. 

아래는 게시물의 공개 범위를 직접 변경하는 방법입니다. 

8. 그래프 API 탐색기로 돌아와서 '제출' 버튼을 눌러보면 하단 빈공간에 무언가 값이 뜹니다. 

여기서 id 값은 내 페이스북 페이지의 고유값인 page_id 값입니다. 

이것을 따로 메모해두면 좋고, 그냥 넘어가도 무방합니다. 

9. 다음으로 상단의 '앱 토큰 받기'를 클릭합니다. 

10. 스크린 샷과 같이 앱 액세스 토큰이 발급되었다면

이제 내 페이스북 글을 가져올 수 있는 상태가 된 것입니다. 

정말 글을 가져올 수 있는지 테스트해보겠습니다. 

11. 아래 스크린샷과 같이 page_id값/feed 를 입력하고 제출을 눌러봅니다. 

아래와 같이 내 페이스북 글에 대한 데이터들이 뜬다면, 성공입니다. 

※ 자신이 직접 게시한 글 외에, 링크로 공유된 게시물은 실제 홈페이지에서는 불러오기가 안됩니다. 

그래프 API 탐색기에서 

"story": "Burg Edel shared a link.",
"created_time": "2018-01-30T08:11:11+0000",
   "id": "188407748575540_184422758974039"

이렇게 뜨는 부분.

링크로 공유된 게시물도 불려오려면

2시간마다 갱신이 필요한 페이지 액세스 토큰을 사용해야 하는 것 같습니다.

웹 브라우저 주소창에도

https://graph.facebook.com/v2.12/page_id값/feed?access_token=앱액세스토큰값

형태로 입력하면 내가 게시한 페이스북 글 데이터들을 얻을 수 있습니다. 

12. page_id값/feed?fields=attachments,message,picture,link,name,caption,description,source

이렇게 입력하면, 뒤에 나열한 필드에 해당 사항이 있는 데이터들이 포함되어 출력됩니다. 

뒤에 필드는 굳이 다 적을 필요없이, 필요한 부분만 골라서 적으시면 됩니다. 

저는 테스트 용도로 저렇게 해본 것입니다. 

page_id값/feed?fields=attachments,message,picture,link,name,caption,description,source&limit=숫자 

이렇게 출력할 글의 개수도 조절 가능합니다. 

웹 브라우저에서도 위와 마찬가지입니다. 

여기까지 제대로 나왔다면, 내 페이스북 글 가져오기는 사실상 끝입니다. 

요청 주소로 접속하면 필요한 데이터들이 JSON 형태로 제공되므로

여러 가지 방법으로 사용하실 수 있을 겁니다. 

(ajax, php 등...)

페이스북 개발자 페이지에는 아래와 같은 소스들도 제공하고 있습니다. 

(https://developers.facebook.com/docs/javascript/quickstart)

(https://developers.facebook.com/docs/javascript/reference/FB.api)

위 페이지들을 참고하여 자바스크립트로 예시 소스를 짜보았습니다. 

예시 js 소스)

<!-- 페이스북 Graph api 로 내 게시물 가져오기 -->
<script>
var fb_api_html = "";
window.fbAsyncInit = function() {
    FB.init({
      appId            : '150016232374308', // 처음 앱 생성시 받았던 앱 ID
      autoLogAppEvents : true,
      xfbml            : true,
      version          : 'v4.0' // 그래프 API 탐색기 페이지의 버전과 맞추면 됨. 190904 기준 v4.0
    });
 
    FB.api('/188407748575540/feed?fields=attachments,message,picture,link,name,caption,description,source', {
        access_token : '150016232374308|F9hbBFOzBob0pKFN7ROSCEzo49w'
    }, function(response){
        for (var i=0; i<response.data.length; i++) {
 
            fb_api_html += "<div class='myfb_message'>" + response.data[i]['message'];
 
            if (response.data[i]['picture']) {
                fb_api_html += "<img src='" + response.data[i]['picture'] + "' />";
            }
 
            fb_api_html += "</div>";
        }
 
        $("#fbfeed").html(fb_api_html);
    });
};
 
(function(d, s, id){
 var js, fjs = d.getElementsByTagName(s)[0];
 if (d.getElementById(id)) {return;}
 js = d.createElement(s); js.id = id;
 js.src = "https://connect.facebook.net/en_US/sdk.js";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
 
<div id="fbfeed"></div>

내 페이스북 글 가져오기 결과화면)

왼쪽이 api로 내 페이스북 글을 가져온 화면 / 오른쪽이 페이스북에서 봤을 때 화면입니다. 

하지만 실제로 사용할 때는 app ID, access_token 등이 그대로 노출되는 자바스크립트보다는 서버 단에서 처리하시길 바랍니다. 

페이스북 개발자 페이지에서도 클라이언트 측이 아닌, 서버 측에서 처리하는 것을 필수로 얘기하고 있습니다. 

저는 php curl 로 처리할 생각입니다. 

페이스북 그래프 API 에 대한 내용은 

페이스북 개발자 페이지에 보다 자세하게 나와 있으니 참고해 보시면 좋을 것 같습니다. 

https://developers.facebook.com/docs/

https://developers.facebook.com/tools-and-support/

그럼 이상으로 내 페이스북 글 가져오기 포스팅을 마치겠습니다. 

혹시 잘못된 부분이 있다면 피드백 해주시면 감사하겠습니다.