Facebook API를 이용하여 특정 페이지의 뉴스피드를 웹사이트에 가져와 보도록 하자.
API문서가 잘 나와있기 때문인지 어디서도 친절하게 가르쳐주는 블로그가 없어 하루종일 삽질을 했다. 우리 모든 초보 개발자에게 도움이 되길 바라며, 최선을 다해 정리해 보겠다.

Facebook API 4.0이 출시되었습니다. 이 포스트는 이전 버전인 3.2.3으로 작성되었습니다.


1. 페이스북 개발자페이지에서 개발자로 등록

https://developers.facebook.com/

이건 이미 등록을 해버려서 어떻게하는지 기억나진 않지만, 어려운 것이 아니기에 클릭클릭해서 뭐 했던 것 같으니 이 정돈 간단하게 !


2. 앱만들기로 App ID와 App Secret Code 생성

fb_api_1

상단 네비게이션의 앱 > 앱 만들기 버튼으로 앱을 생성한다.
이 과정은 Facebook SDK (개발자 도구)를 사용할 때에 필요한 App ID와 App Secure를 생성하는데에 필요하다.

fb_api_2

생성된 앱 아이디와 앱 시크릿코드는 다음 단계를 위해 기억해두자!


3. 개발자도구 다운로드

https://developers.facebook.com/docs/php/gettingstarted/3.2.3

fb_api_3

Composer를 사용한다면 해당 JSON 파일을 이용하여 설치하고, Composer가 무엇인지 모른다! 하면 Download the PHP SDK 버튼을 클릭하여 프로젝트 폴더 아래에 폴더를 만들어 위치시킨다.

<?php

require_once("facebook.php");

$config = array(
    'appId' => 'YOUR_APP_ID',
    'secret' => 'YOUR_APP_SECRET',
    'fileUpload' => false, // optional
    'allowSignedRequest' => false, // optional, but should be set to false for non-canvas apps
);

$facebook = new Facebook($config);

?>

Facebook 뉴스피드를 삽입하고자 하는 PHP 파일의 최상단에 위의 코드를 삽입한다.
require_once("facebook.php"); 에 다운로드 받은 Facebook PHP SDK 폴더의 src 폴더안의 facebook.php 파일의 위치를 적어준다.
예를 들어 fb폴더에 압축을 해제했다면 require_once("yourprojectfolder/fb/src/facebook.php");가 되겠다.

YOUR_APP_IDYOUR_APP_SECRET 에는 이전에 앱 만들기를 했을 때에 생성된 앱 아이디와 시크릿코드를 적어준다.

이 과정까지 거치면 프로젝트에 Facebook API 설치가 완료되었다.


4. 쿼리 생성하기

Graph API Reference

나도 PHP 초보이기때문에 잘 설명하긴 어렵지만, 보통 ‘쿼리’라고 하면 데이터베이스의 테이블을 배열형태로 목록화한 것을 뜻한다.
쉽게 말하자면 페이스북 뉴스피드를 불러오기 위해 첫 번째로 모든 피드의 집합을 불러오고, 선택한 하나의 피드의 제목과 사진, 그리고 내용과 생성날짜 등을 가져오기 편하게 정렬하는 것이라고 할 수 있다.

위의 링크를 둘러보면 대략적인 내용을 알 수 있지만, 우리는 초보기 때문에 바로 본론으로 들어가자.
나의 경우는 특정 페이스북 페이지의 뉴스피드를 웹사이트로 가져오는 것이 목적이기에 Graph API Reference > Page > feed 페이지로 들어가 자세한 내용을 알아볼 것이다.

fb_api_4

Reading 섹션에서 우리가 선택하고 다운로드했던 PHP SDK 탭을 선택하면 PHP환경에서 우리가 필요한 피드를 가져오는 코드가 나온다. 해당코드를 복사해서 이전에 API를 불러왔던 코드 뒤에 붙여준다.
API를 불러오고, 필요한 쿼리를 생성한 코드는 아래와 같다.

<?php

require_once('facebook.php';);

$config = array(
    'appId' => 'YOUR_APP_ID',
    'secret' => 'YOUR_APP_SECRET',
    'fileUpload' => false, // optional
    'allowSignedRequest' => false, // optional, but should be set to false for non-canvas apps
);

$facebook = new Facebook($config);

$response = $facebook->api(
    "/{page-id}/feed"
);

?>

{page-id}에 원하는 페이지의 ID를 적어주면 된다.페이지 ID는 페이스북 페이지에 접속 시의 URL에서 찾을 수 있다. 예를 들어 접속한 페이지의 URL이 https://www.facebook.com/edisonprinter 였다면, edisonprinter 가 페이지의 ID가 되겠다.

이제 explorer 도구를 이용해 내가 생성한 쿼리의 내용을 살펴보도록 하자.


5. Explorer 도구 이용하기

Explorer 도구

fb_api_5

우측의 Get Access Token 버튼을 클릭하여 Access Token 을 생성하자.
뭐 이것저것 선택하는 내용이 많은데, 뉴스피드를 가져오기 위해서는 모두 필요 없고 Extended Permissions 탭에서 Read_stream을 체크하고 Get Access Token 버튼을 누르면 된다.

fb_api_6

Access Token 을 생성 후, 아래의 표를 이용해 내가 만들고 싶은 쿼리를 이리저리 생성하고 확인해 볼 수 있다. GET 방식이나 POST 방식을 선택할 수 있는데 굳이 건드릴 것은 없다.
입력란에 직접 호출문을 적어볼 수도 있지만 왼쪽 표를 이용하는 것이 쉽다. 이 부분은 앞의 Reference와 함께 보는 것이 좋다.

먼저, 일전에 우리가 쿼리를 생성할 때에 적었던 /edisonprinter/feed 를 텍스트 입력란에 적고 제출 버튼을 누른다.
버튼을 누르면 오른쪽에 무언가 복잡한 내용이 쭈욱 나오는데, 이것이 배열의 형태로 정리된 뉴스피드들이다. 이제 배열을 확인했으니 필요한 배열의 요소를 잡아다가 출력해 주기만 하면된다.

덧붙이자면, 입력란에 /edisonprinter 를 입력하고 제출 버튼을 누르면 왼쪽에 Search for a field라는 회색 글자가 나오는데, 그 부분에 Reference 에서 찾아볼 수 있는 여러값들을 넣어보면서 내게 필요한 쿼리를 최적화할 수 있다. 이것 저것 가지고 놀아보면 재밌는게 많으니 공부할 겸 만져보는 것도 좋을 듯 하다.


6. 내용 삽입하기

fb_api_7

생성된 쿼리를 살펴보자.
이전에 선언했듯이 이 배열의 이름은 $response 이다. $response 배열의 최상단에는 data라는 이름의 요소가 있고, 이 요소는 다시 배열의 형태로 정의되어 id, from, message 등의 요소를 가진다.

나는 선택한 페이지의 뉴스피드를 출력할 것이고, 그러기 위해서는 이 뉴스피드의 제목과 생성일자, 그리고 내용등이 필요할 것이다. 쿼리에서 제목은 name 으로, 내용은 message로 정의되어있는 것을 확인할 수 있다. 배열 속 요소를 선택하는 방법은 구글링을 통해 배울 수 있을 것이고, 우리는 마무리를 향해 힘차게 달려보자.

여러가지 반복문 중에 배열에 특화된 반복문 foreach 를 사용할 것이다. 반복문에 대한 설명도 구글에 차고넘치니 검색해서 알아보도록 하자. 완성된 코드는 아래와 같다.

<ul>
    <?php
    foreach ( $response['data'] as $data ) {
    >
        <li><=$data['message']></li>
    <}?>
</ul></pre>
혹여나 해당값이 없어서 PHP에서 에러를 출력할 수도 있기 때문에 오류를 잡아주기 위해 조금 더 추가해 보자.
<pre class="brush: php; gutter: true"><ul>
    <?php
    foreach ( $response['data'] as $data ) {
    >
        <li><=isset($data['message'])  $data['message'] : '';></li>
    <}?>
</ul>