웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
Facebook(페이스북)의 콘텐츠를 자신의 웹사이트로 graph api를 사용하여 가져오는 방법에 대하여 알아봅니다. 참고로 여기서는 가져오기까지의 과정만 설명합니다. 즉 페이스북에 있는 글을 가져온 후 어떻게 처리하지까지는 다루지 않으니 알아두세요. Graph API를 사용하기 까지의 방법과 과정만 설명하려고 합니다.
하나의 콘텐츠를 여러 플랫폼에서 쉽게 사용할 수 있다면 편리하겠죠. 페이스북에 올렸던 글을 다른 SNS나 웹사이트 등등 여러 채널에 가져올 수 있다면 매우 편리할 것입니다. 이런 이유로 페이스북은 자신의 글이나 이미지등에 접근하고 처리할 수 있도록 제공하고 있으며 그 중에 하나의 방법이 바로 Graph API입니다.
결국 Facebook에 콘텐츠를 등록하였다면 이를 Graph API를 사용하면 자동으로 글을 가져와 다른 곳(여기서는 웹사이트)에 업데이트 할 수 있습니다. 매우 편리한 기능입니다.
앞에 말한 것처럼 페이스북이 제공하는 다양한 API 중에서 페이스북 콘텐츠에 접근하고 글 등을 가져오기 위해서는 graph api를 사용해야 합니다. graph api를 사용하면 페이스북 페이지에 필요한 제목이나 내용, 썸네일 등등을 불러오는 것이 가능합니다. 그럼 어떻게 graph api를 사용할 수 있는지 알아봅니다.
먼저 graph api를 사용하기 위해서 몇 가지 필요한 것들이 있습니다. 그 중에서 해당 페이스북 채널을 관리할 수 있는 권한과 페이스북 개발자 계정입니다.
페이스북 개발자 계정은 채널을 관리하는 계정과 다를 수 있습니다. 만약 개발자 계정이 없다면 새로 생성하여야 합니다. 페이스북 개발자 계정은 아래의 페이스북 개발자 페이지에서 생성할 수 있습니다.
페이스북 개발자 페이지 바로가기 >
developers.facebook.com
스크린샷) 페이스북 개발자 페이지 상단의 도구 메뉴
계정이 있다면 이제 개발자 페이지로 이동해봅니다. 개발자 페이지의 상단에 보면 문서 옆에 도구 메뉴가 존재합니다. 이 도구 메뉴에 마우스를 올리면 그래프 API 탐색기가 보이죠. 이게 바로 우리가 사용할 Graph API입니다. 클릭하도록 합니다.
이제 실제로 필요한 것들을 이 페이지에서 할 수 있습니다. 대표적으로 앱을 등록하거나 접근 권한을 위해 토큰을 발행하는 등등 개발에 필요한 여러가지의 것들을 할 수 있습니다.
가장 먼저 엑세스 토큰 생성이 필요합니다. 이 엑세스 토큰은 api를 호출할 때 인증 목적으로 사용하며 메뉴 가장 위에 존재합니다. 버튼 Generate Access Token을 누르면 생성되는데 이 코드를 복사하여 실제 API를 동작할 때 추가하면 됩니다.
다음으로 어떤 Facebook앱에 사용할 것인지 그리고 어떤 정보를 접근할 것인지 권한을 설정해야 합니다. 아래의 스크린 샷을 보시면 엑세스 토큰 아래에 위치한 메뉴가 바로 그것입니다.
그래프API에서 토큰 및 앱과 권한 설정 화면
여기서 앱은 내가 가지고 있는 페이스북 앱으로 개발자 페이지에 등록을 했어야 나타납니다. 만약 없다면 새로 등록하도록 합니다. 그리고 권한은 실제 API를 사용할 때 필요한 정보에 대하여 필요한 권한을 설정하는 메뉴입니다. 권한 설정은 보안을 위해서도 중요하기 때문에 반드시 필요한 권한만 설정하도록 합니다.
여기까지 Graph API를 사용하기 위한 계정, 토큰, 권한 등의 방법들을 간략하게 알아보았습니다.
[ 참고. 그래프 API를 사용하여 이미지를 가져올 때... ]
만약 Graph API를 사용하여 페이스북에 있는 이미지 url을 가져온 경우 이를 사용할 수 있겠죠. 하지만 중요한 부분은 해당 url은 계속해서 바뀌기 때문에 영구적으로 사용하는 것은 어렵습니다. 이런 이유로 이미지를 가져와 따로 서버에 저장해서 사용하는 등의 추가적인 방법이 필요합니다. 잘 나오던 이미지가 갑자기 안나온다면 이런 이유 때문이니 알아두시기 바랍니다.
! 언제 Facebook(페이스북) 콘텐츠 api를 사용할까
하나의 콘텐츠를 여러 플랫폼에서 쉽게 사용할 수 있다면 편리하겠죠. 페이스북에 올렸던 글을 다른 SNS나 웹사이트 등등 여러 채널에 가져올 수 있다면 매우 편리할 것입니다. 이런 이유로 페이스북은 자신의 글이나 이미지등에 접근하고 처리할 수 있도록 제공하고 있으며 그 중에 하나의 방법이 바로 Graph API입니다.
결국 Facebook에 콘텐츠를 등록하였다면 이를 Graph API를 사용하면 자동으로 글을 가져와 다른 곳(여기서는 웹사이트)에 업데이트 할 수 있습니다. 매우 편리한 기능입니다.
! Facebook Graph api 간략하게 알아보기
앞에 말한 것처럼 페이스북이 제공하는 다양한 API 중에서 페이스북 콘텐츠에 접근하고 글 등을 가져오기 위해서는 graph api를 사용해야 합니다. graph api를 사용하면 페이스북 페이지에 필요한 제목이나 내용, 썸네일 등등을 불러오는 것이 가능합니다. 그럼 어떻게 graph api를 사용할 수 있는지 알아봅니다.
# Graph api를 사용하는 방법
먼저 graph api를 사용하기 위해서 몇 가지 필요한 것들이 있습니다. 그 중에서 해당 페이스북 채널을 관리할 수 있는 권한과 페이스북 개발자 계정입니다.
페이스북 개발자 계정은 채널을 관리하는 계정과 다를 수 있습니다. 만약 개발자 계정이 없다면 새로 생성하여야 합니다. 페이스북 개발자 계정은 아래의 페이스북 개발자 페이지에서 생성할 수 있습니다.
페이스북 개발자 페이지 바로가기 >
developers.facebook.com
스크린샷) 페이스북 개발자 페이지 상단의 도구 메뉴계정이 있다면 이제 개발자 페이지로 이동해봅니다. 개발자 페이지의 상단에 보면 문서 옆에 도구 메뉴가 존재합니다. 이 도구 메뉴에 마우스를 올리면 그래프 API 탐색기가 보이죠. 이게 바로 우리가 사용할 Graph API입니다. 클릭하도록 합니다.
! Graph API에 앱을 등록하고 토큰 발행하기
이제 실제로 필요한 것들을 이 페이지에서 할 수 있습니다. 대표적으로 앱을 등록하거나 접근 권한을 위해 토큰을 발행하는 등등 개발에 필요한 여러가지의 것들을 할 수 있습니다.
가장 먼저 엑세스 토큰 생성이 필요합니다. 이 엑세스 토큰은 api를 호출할 때 인증 목적으로 사용하며 메뉴 가장 위에 존재합니다. 버튼 Generate Access Token을 누르면 생성되는데 이 코드를 복사하여 실제 API를 동작할 때 추가하면 됩니다.
다음으로 어떤 Facebook앱에 사용할 것인지 그리고 어떤 정보를 접근할 것인지 권한을 설정해야 합니다. 아래의 스크린 샷을 보시면 엑세스 토큰 아래에 위치한 메뉴가 바로 그것입니다.
그래프API에서 토큰 및 앱과 권한 설정 화면여기서 앱은 내가 가지고 있는 페이스북 앱으로 개발자 페이지에 등록을 했어야 나타납니다. 만약 없다면 새로 등록하도록 합니다. 그리고 권한은 실제 API를 사용할 때 필요한 정보에 대하여 필요한 권한을 설정하는 메뉴입니다. 권한 설정은 보안을 위해서도 중요하기 때문에 반드시 필요한 권한만 설정하도록 합니다.
여기까지 Graph API를 사용하기 위한 계정, 토큰, 권한 등의 방법들을 간략하게 알아보았습니다.
[ 참고. 그래프 API를 사용하여 이미지를 가져올 때... ]
만약 Graph API를 사용하여 페이스북에 있는 이미지 url을 가져온 경우 이를 사용할 수 있겠죠. 하지만 중요한 부분은 해당 url은 계속해서 바뀌기 때문에 영구적으로 사용하는 것은 어렵습니다. 이런 이유로 이미지를 가져와 따로 서버에 저장해서 사용하는 등의 추가적인 방법이 필요합니다. 잘 나오던 이미지가 갑자기 안나온다면 이런 이유 때문이니 알아두시기 바랍니다.
크롬 브라우저에서 웹사이트 전체 스크린샷 이미지 캡처 방법
