페이스북 글 가져오기 Page api :: 마이구미

이번 글은 페이스북의 오픈 API 중 Page API를 통해 자신의 글을 가져오는 기능을 다뤄본다.

많은 페이지들이 본인의 페이스북의 글들을 가져와 노출을 활용하고 있다.

누구든지 쉽게 할 수 있다.

이번 계기로 자신의 홈페이지도 활용해보자.

본인 정현연구소 페이지에 있는 글을 가져오는 과정을 진행하겠다.

오픈 API를 사용하기 위한 기본적인 절차들은 생략하겠다.

먼저 가장 기본적인 액세스 토큰을 살펴보자.

위 그림과 같이 크게 3가지로 볼 수 있다

이번 글에서는 앱 액세스 토큰을 사용하겠다.

자신의 글만 가져오면 되기 때문에 만료되지 않는 토큰을 사용하는 것이 구현에 있어 쉽다.

실제로 클라이언트에서 작업을 한다면 앱 액세스 토큰은 시크릿 코드와 관계가 깊기 때문에 노출되면 안되기 때문에 서버에서 작업하길 바란다.

https://graph.facebook.com/oauth/access_token
?client_id={app_id}
&client_secret={secret_code}
&grant_type=client_credentials

위 URL을 통해 앱 액세스 토큰을 얻을 수 있다.

하지만 얻은 앱 액세스 토큰에 page api를 사용할 수 있는 허가가 안되어있다.

아래 링크는 페이스북에서 제공하는 API를 테스트할 수 있는 툴이다.

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

Page API를 사용하기 위해 허가를 해야한다.

위와 같이 본인의 페이지를 체크한 후 Request publish_pages를 클릭한다. 

그 후 다시 앱 액세스 토큰을 얻는다면 page api를 사용할 수 있게 된다.

이제 액세스 토큰으로 페이스북 페이지의 page_id 값을 알아내야한다.

툴에서 쉽게 알아낼 수 있다.

반환받은 json 형태에서 id값을 내려받았다.

page_id는 페이지의 고유 번호라고 생각하면 된다.

이제 page_id값을 이용해서 페이지의 글들을 가져와보자.

 https://graph.facebook.com/v2.8/{page_id}/feed?access_token={access_token}

위 URL을 통해 API를 요청하여 페이지들에 있는 글의 리스트를 JSON형태로 가져오게 된다.

본인은 하나의 글 밖에 없기 때문에 하나의 글만 가져오는 걸 확인할 수 있다.

여러 개의 글일 경우 배열 형태로 가져온다.

이렇게 가져온 글 중 최신 글 하나만을 이용하는 경우라고 생각하자.

data 안의 id 속성을 이용해서 글의 자세한 정보를 가져오기 위해 또 한번 API를 요청해야한다.

여기서 id 값은 포스팅 된 글의 고유 번호라고 생각하면 된다.

https://graph.facebook.com/v2.8/{posting_id}/feed
?access_token={access_token}
&fields=link,picture,message,updated_time

위와 같이 요청하면 포스팅 된 글의 정보들을 가져올 수 있게 된다.

본인은 "링크 주소, 이미지 주소, 글 내용, 글 올린 시간" 을 가져왔다.

fields를 통해 구분하여 가져올 수 있다.

자세한 건 API 문서를 확인해보면 알 수 있다.

이제 가져온 정보들을 통해 웹 페이지에 노출 시킬 수 있게 되었다.

아래 소스를 통해 테스트 해볼 수 있다.

소스를 통해 테스트 해본다면 훨씬 이해가 빠르리라 생각한다.

페이스북 Page API 문서

https://developers.facebook.com/docs/graph-api/reference/page/

var token = 'app access token';
    $.ajax({
        url:"https://graph.facebook.com/v2.8/{page_id}/feed?access_token=" + token,
        type:"GET",
        success:function(msg){
            $.ajax({
                url:"https://graph.facebook.com/v2.8/" + msg.data[0].id + "?access_token=" + token + "&fields=link,picture,message,updated_time",
                type:"GET",
                success:function(msg){
                    var obj = msg;
                    var dom = "";

                    dom += "<img src='" + obj['picture'] +  "'>";
                    dom += "<p>" + '링크 주소 - ' + obj['link'] + "</p>";
                    dom += "<p>" + '글 내용 - ' + obj['message'] + "</p>";

                    $('body').append(dom);


                },
                error:function(request,status,error){
                    console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
                }

            });
        },
        error:function(request,status,error){
            console.log("code:"+request.status+"\n"+"message:"+request.responseText+"\n"+"error:"+error);
        }

    });