• 페이스북 글 가져오기 Page api :: 마이구미
    오픈 API 2016. 12. 31. 17:35
    반응형

    이번 글은 페이스북의 오픈 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 값을 알아내야한다.

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


    페이스북 api 툴


    반환받은 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 문서를 확인해보면 알 수 있다.


    페이스북 페이지 API


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


    페이스북 페이지 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); } });


    반응형

    댓글 0

Designed by Tistory.