Press enter to see results or esc to cancel.

오픈 그래프 설정을 위해 페이스북 앱을 만들자

오픈 그래프란

페이스북 오픈 그래프(Open Graph)는 페이스북이 제공하는 프로토콜입니다. 여러 오브젝트(object)와 액션(action)으로 이루어져 있죠. 페이스북 밖의 웹사이트나 서비스 등에서 이용자의 활동 내역을 페이스북에 함께 공유하거나 반대로 페이스북 이용자의 정보를 파악할 수 있게 해주는 역할을 합니다.

쉬운 예를 들어보죠.

우리가 어떤 사이트의 글을 페이스북 담벼락에 공유하려고 링크를 입력해 넣으면 저절로 글의 제목과 내용 일부가 뜨고, 썸네일이 함께 뜨기도 합니다. 반대로 웹사이트에 달린 페이스북 좋아요 버튼을 누르면 저절로 페이스북 담벼락에 해당 내용이 공유됩니다. 페이스북 계정을 이용해 특정 게임/서비스에 로그인을 할 수도 있습니다.

이렇게 페이스북과 페이스북 밖의 웹사이트/서비스와 연결시켜주는 게 오픈 그래프입니다. 오픈 그래프에서는 이 외에도 다양한 기능들이 포함되어 있지만, 일반적인 웹사이트는 대부분 위에서 예시를 든 정도만 이용합니다.1

오픈 그래프 적용을 해볼까

자세한 이야기는 여러 예제와 플러그인을 통해 천천히 알아보기로 하고, 우선은 웹사이트/서비스에 오픈 그래프를 적용하는 방법부터 쉽게 풀어보도록 하죠.

페이스북 앱 만들고 설정하기

오픈 그래프를 웹사이트에 적용하려면 우선 페이스북 앱을 만들어야 합니다.

우리가 흔히 앱이라고 하면 어떤 화면이 있고, 버튼도 있고, 다운로드도 받을 수 있는 그런 앱을 생각하지만 이건 그런 종류의 앱이 아닙니다.

위에서 이야기했듯이 페이스북과 페이스북 외부의 웹사이트/서비스를 연결해주는 일종의 인터페이스를 설정하는 겁니다. 따라서, 이 앱은 화면 디자인도 다운로드 링크나 그런 게 없습니다. 몇몇 정보만 있다고 생각하시면 됩니다.

우리는 이 페이스북 앱을 통해 웹사이트나 서비스를 페이스북과 연결하는 겁니다.
우리는 이 페이스북 앱을 통해 웹사이트나 서비스를 페이스북과 연결하는 겁니다.

페이스북 개발자 페이지(developers.facebook.com)에 가서 “Add a New App”을 선택해 앱을 만들면 됩니다. 워드프레스를 이용한 웹사이트에서 이용할 앱이니 웹사이트를 골라야겠죠.

자세한 내용은 페이스북의 “오픈 그래프 시작하기”의 내용을 하나씩 확인하면서 진행하면 됩니다. 조금만 더 함께 해보죠.

앱 추가하기 (Add a New App)

페이스북 개발자 페이지에서 “Add a New App”을 선택합니다.

"Add a New App" 선택하기

네 가지 중 하나를 선택해야 합니다.

우리는 워드프레스(웹사이트)에 이용할 앱을 만드는 것이니 웹사이트를 선택합니다.

페이스북 앱 종류 선택하기

앱이 테스트 버전인지 아닌지를 선택합니다. 테스트 버전이 아니니, 아니오 상태로 두고, 카테고리는 적당히 어울리는 것을 골라 선택한 다음에 “Create App ID”를 선택하면 앱이 만들어집니다.

새 페이스북 앱의 카테고리 설정하기

페이스북 앱 설정하기

여기까지 진행하면 <body> 영역에 다음의 자바스크립트를 입력하라는 안내가 나옵니다.

이 자바스크립트 코드를 워드프레스로 만들어진 사이트에 추가하는 겁니다. 현재 활성화한 테마의 footer.php 를 열어서 저 부분을 </body> 바로 앞에 복사해 넣습니다.

footer.php 를 선택합니다.

페이스북은 몇 가지 테스트를 더 시키지만, 일단 여기까지만 하면 앱이 만들어진 것을 확인할 수 있습니다.

페이스북 앱의 정보 확인하기

다시 페이스북 개발자 페이지의 메뉴를 확인해 보면 이제 새로 만든 앱이 표시가 되겠죠.

새로 만든 앱이 앱 리스트에 뜨는 걸 확인합니다.

새로 만든 앱을 선택해서 앱의 대시보드 화면으로 들어갑니다. 대시보드에서는 다양한 정보를 확인할 수 있고, 앱의 각종 정보를 추가, 수정할 수 있습니다.

페이스북 앱의 대시보드 화면

그리고 여기에 가장 기본적인 정보인 App ID와 App Secret을 확인할 수 있습니다.

  • App ID: 생성한 페이스북 앱의 고유 아이디
  • App Secret: 앱의 소유자만 알 수 있는(알고 있어야 하는) 일종의 개인 키(private key).

웹사이트와 연결하기 위해 페이스북이 페이스북 앱에 요청하는 것은 바로 위의 두 가지입니다. 이 두 정보는 몇십 글자짜리 숫자 혹은 문자열로 구성되어 있습니다. 이렇게 만들어진 App ID와 App Secret은 언제든지 페이스북 개발자 사이트에 가면 확인할 수 있습니다.

워드프레스에 오픈 그래프를 적용한다?

페이스북 앱이나 오픈 그래프의 개념이 쉽게 잡히지 않는 분들이 의외로 많습니다. 그럴 땐 보통 이렇게 설명하면 이해를 하더군요.

페이스북 앱을 만든다.

→ 앱을 이용할 플랫폼을 정하고 각종 정보를 입력해서 App ID, App Secret을 확보한다.

워드프레스(웹사이트)에 오픈 그래프를 적용한다.

→ 워드프레스 통해 출력되는 html 어딘가에 앱 정보와 함께 오픈 그래프 태그를 표시한다.

참 쉽죠?

워드프레스에는 기본적으로 페이스북과 관련한 기능이 없습니다. 그래서, 오픈 그래프를 적용하려면 여러 가지 코드를 넣어야 하지만, 이 과정 또한 만만치 않습니다.

하지만, 우리에겐 플러그인이 있죠. 다양한 플러그인이 이 과정을 매우 쉽게 해줍니다. 페이스북 공식 플러그인부터 다양한 SEO 관련 플러그인까지 중에서 필요한 것들을 골라서 설치, 설정하면 됩니다.

플러그인마다 상세 설정 화면이나 옵션은 각각 다르지만, 기본적으로 모두 facebook App ID 를 입력하면 설정이 완료됐다고 할 수 있습니다. 기능에 따라 App Secret까지 요구하는 경우도 있습니다.

정리하면

위의 과정을 정리하면 다음과 같습니다.

  • 웹사이트를 페이스북과 연결하고 싶다.
  • 그러려면 웹사이트에 페이스북의 오픈 그래프를 적용해야 한다.
  • 오픈 그래프를 위해 페이스북 앱을 만든다.
  • 앱을 만들고 나면 App ID와 App Secret이 나온다.
  • 웹사이트에 페이스북 관련 플러그인을 설치하여 새로 만든 페이스북 App ID를 입력한다.

별 거 아니죠? 페이스북 앱을 만드는 게 좀 낯설 수 있지만, 이 역시 정보만 적당히(!) 입력하면 됩니다.

그렇다면 다음에는 오픈 그래프 태그를 표시해주는 플러그인을 살펴보기로 하죠.


  1. 더 상세한 기능들은 나중에 기회가 있으면 더 설명하도록 하죠.