2016-08-08_0_wp-fb-featured-image

워드프레스와 페이스북 연동하기

워드프레스는 소셜 네트워크 서비스(SNS)와는 떼려야 뗄 수 없는 관계에 있습니다. 워드프레스에서 발행한 글은 소셜 네트워크 서비스를 통해 공유되고 확산되기 때문에 콘텐츠를 제작하는 시점부터 SNS에 공유될 것을 염두에 두는 경우가 많습니다. 또한 워드프레스 플러그인 중에는 SNS로의 공유와 확산을 지원하는 여러 기능들을 갖추고 있는 플러그인들이 많이 있습니다. 이 글에서는 여러 가지 SNS 중 가장 인기있고 마케팅의 활용도가 높은 페이스북(Facebook)을 중심으로 워드프레스와 연동하는 다양한 방법들을 알아 보기로 하겠습니다.

워드프레스와 페이스북을 연동하는 데는 다음과 같이 여러 가지 경우가 있으며, 실제로는 이들 중 하나 또는 그 이상을 사용하게 됩니다.

  • 워드프레스 포스트나 페이지에 페이스북의 ‘좋아요(Like)’나 ‘공유하기(Share)’ 버튼을 추가하기
  • 워드프레스 사이트에 페이스북 페이지 플러그인을 추가하기
  • 워드프레스 페이지나 포스트에 페이스북 댓글 추가하기
  • 워드프레스 포스트가 발행되면 자동으로 페이스북에 공유하기
  • 페이스북 계정으로 로그인하기
  • 페이스북 인스턴트 아티글(Instant Articles) 적용하기

물론 이 밖에도 페이스북과 연동하는 다른 경우들이 더 있을 수 있지만, 이 정도면 워드프레스 사이트에서 통상적으로 필요로 하는 페이스북과의 연동은 대부분 커버될 것입니다. 이 글에서는 이들 각각의 경우에 대한 방법(howto)을 상세히 소개하기 보다는 워드프레스와 페이스북을 연동하는데 기본이 되는 오픈그래프(Open Graph)와 페이스북 소셜 플러그인(Facebook Social Plugins) 사용법을 소개함으로써 워드프레스와 페이스북 간 연동 메커니즘을 이해하는 자리를 마련해 보겠습니다.

오픈그래프와 공유하기(Sharing)

사실 워드프레스와 페이스북을 연동하는 일은 대개는 아주 간단합니다. 필요한 기능에 맞춘 적당한 플러그인을 하나 찾아 설치하면 그만인 경우가 많습니다. 예를 들어 ‘좋아요’ 버튼이 필요하면 소셜 공유버튼 플러그인 중 하나를 찾아 설치하면 되고, 댓글을 추가하고 싶다면 또 그에 맞는 플러그인을 하나 찾아 추가하면 그만입니다. 정작 까다로운 것은 워드프레스에서 작성한 내 글이 어떻게 페이스북에 올라가서 공유되고 또 페이스북은 내 글을 어떻게 가져가는지 하는 부분입니다. 이 부분은 페이스북의 공유 플랫폼인 오픈그래프(Open Graph)를 조금 이해하면 한결 쉬워집니다.

그럼 우선 페이스북의 오픈그래프 페이지에 들어가 볼까요? 요즘은 페이스북이 “오픈그래프”라는 다소 기술적인 용어 보다는 “공유하기(Sharing)”라고 하는 좀 더 일반적인 용어를 사용하긴 합니다만 결국 그 원리는 동일합니다.

Sharing on Facebook
그림. Sharing on Facebook

이 페이지의 링크를 따라가 보면 페이스북에서 사용 가능한 여러 가지 공유 방식과 그 기술들을 확인할 수 있습니다. 간단하게 정리하면 이렇습니다.

  1. 사용자가 웹페이지의 링크(URL)을 페이스북에 올린다.
  2. 페이스북은 사용자가 올린 링크를 조사(crawl)하여 필요한 정보를 추출한다.
  3. 이 때 페이스북은 웹페이지 속 <head> 태그 내에 포함된 ‘오픈그래프 태그’를 읽어서 공유하기의 기초 정보로 사용한다.

그러니 웹페이지에서 오픈그래프 태그를 어떻게 주느냐에 따라 페이스북이 읽어 들여 표시하는 정보도 달라지게 됩니다.

그럼 웹페이지 상에서 설정할 수 있는 오픈그래프 정보에는 어떤 것들이 있을까요? 예를 들면 이런 것들입니다. HTML의 메타 태그(meta tag) 형태로 오픈그래프 정보를 표기하고 있습니다. 여기서는 url값과 문서 타입(type), 그리고 문서 제목과 설명, 그리고 대표 이미지 같은 요소들이 기술되어 있습니다.

페이스북 오픈그래프 태그 소스보기
그림. 페이스북 오픈그래프 태그(브라우저 소스보기)

이런 오픈그래프 태그들이 정상적으로 들어간 웹문서라야 페이스북에 공유하기를 했을 때 콘텐츠가 페이스북 뉴스피드에 제대로 표시가 됩니다. 설정 가능한 더 자세한 오픈그래프 정보들은 페이스북의 Sharing Webmasters 문서를 참조하면 됩니다.

그럼 이 오픈그래프 태그들을 내 워드프레스 사이트에 추가하려면 어떻게 하면 될까요? 직접 수작업으로 처리해도 되긴 하지만 통상적으로 이 부분은 플러그인을 통해 처리하게 됩니다. Facebook 관련 플러그인이나 SEO 관련 플러그인을 설치했다면 아마 이미 이 오픈그래프 태그 기능이 작동하고 있을 것입니다. 여러분 워드프레스 웹사이트에서 소스보기를 해보면 상단의 <head> 영역에 이 태그들이 추가되어 있는지 확인할 수 있을 것입니다. 만약 들어 있다면, 이미 된 것입니다.

혹시라도 이 부분이 없다면 간단하게 플러그인을 하나 추가하는 것만으로도 해결됩니다. “Open Graph” 키워드로 워드프레스 플러그인 디렉터리를 검색하여 나오는 결과 중 하나를 골라 설치해도 되지만, SEO 플러그인을 사용한다면 대부분의 SEO 플러그인에는 페이스북 오픈그래프가 지원되기 때문에 별도의 플러그인을 설치할 필요가 없습니다. 예를 들어, Yoast SEO 플러그인의 “Social > Facebook” 메뉴에 보면 Open Graph 메타 태그를 활성화시키는 메뉴가 포함되어 있습니다.

Social - Yoast SEO
그림. Social – Yoast SEO

페이스북 소셜 플러드인

오픈그래프가 페이스북에 공유되는 콘텐츠의 ‘내용’을 구성한다면, 지금 소개할 페이스북의 소셜 플러그인(Social Plugins)은 내 웹사이트 내의 콘텐츠를 페이스북에 간단하게 공유할 수 있는 ‘수단 또는 방법’을 제공합니다. 우리가 웹사이트에서 흔히 볼 수 있는 ‘좋아요(Like)’ 버튼이나 페이스북 댓글(Comments), 페이지 플러그인(Likebox) 같은 것들이 여기에 해당됩니다.

Facebook Social Plugins
그림. Facebook Social Plugins

이들 플러그인은 형태나 모양, 용도는 모두 다르지만 사용법은 동일합니다. 페이스북에서 제공하는 코드 조각을 복사하여 내 사이트 페이지 내의 적당한 곳에 붙여넣으면 되는 간단한 방식입니다. 예를 들어, 내 워드프레스 포스트에 페이스북의 ‘공유하기(Share)’ 버튼을 추가하려면 공유하기 버튼 페이지로 가서 단계별 안내 대로 따라한 다음 “코드받기” 버튼을 클릭하여 생성된 코드를 내 페이지에 복사하여 붙여 넣으면 됩니다.

페이스북 공유하기 버튼 코드 받기
그림. 페이스북 공유하기 버튼 코드 받기

이 때도 역시 앞서 오픈그래프 적용 때와 마찬가지로, 직접 코드를 입력해도 되지만 플러그인을 사용하면 간단하게 해결됩니다. 예를 들어, 공유하기 버튼나 좋아요 버튼 같은 경우는 워드프레스 플러그인 디렉터리에서 검색만 해보면 수를 헤아릴 수 없을 만큼 많은 플러그인을 검색할 수 있으며, 댓글이나 페이지(구 Likebox) 플러그인도 이런 식을 간단하게 추가할 수 있습니다. 결과가 너무 많아 생기는 선택의 갈등만 잘 해결하면 말이죠.

참고로 Jetpack 플러그인을 설치했다면, Jetpack 속에도 페이스북 공유하기 기능이 들어 있기 때문에 바로 사용할 수 있다는 건 아마 워드프레스 사용자라면 누구나 알고 있는 내용일 것이구요.

Jetpack 공유하기
그림. Jetpack 공유하기

Facebook All-In-One 플러그인

페이스북 관련 플러그인 중에는 앞서 소개한 여러 기능들을 모두 갖춘 이른바 올인원(All-In-One) 플러그인들이 있습니다. 그 중 가장 대표적인 것은 아마도 그 이름 그대로 ’Facebook’이라는 플러그인입니다. 이 플러그인은 Facebook과 워드프레스 개발사인 Automattic이 합작으로 개발한 아주 의욕적인 플러그인이었죠. 플러그인 페이지에서 보면 사실상 페이스북 연동과 관련된 거의 모든 기능을 제공합니다.

Facebook Plugin
그림. Facebook Plugin

다만 너무 많은 기능을 담다 보니 플러그인이 필요 이상으로 무거울 수 있고 또 2년 전부터는 더 이상 업데이트가 되지 않고 있기 때문에 워드프레스와 페이스북의 최근 변경 내용들을 반영하지 못하는 문제가 있습니다. 그러니 꼭 필요한 경우가 아니면 굳이 사용하지 않는 것이 좋을 듯 합니다.

참고로 이런 올인원(all-in-one) 방식의 플러그인으로 Facebook All이라는 플러그인도 있으니 함께 검토하면 좋겠구요.

오늘 소개할 내용은 여기까지 입니다. 플러그인을 쓰면 간단하게 해결될 일을 굳이 이렇게 장황하게(?) 설명한 이유는 페이스북 플랫폼의 구조와 작동 방식을 제대로 알고 플러그인을 사용하는 게 그렇지 않은 경우보다 훨씬 더 자유롭게 워드프레스와 페이스북 간을 연동할 수 있는 길이라 생각하기 때문입니다.

여기서 미처 소개하지 못한 내용들, 예를 들면, 페이스북으로 로그인하기나 자동 발행(Auto Publishing), 그리고 인스턴스 아티클(Instant Articles) 만들기 같은 기능들은 별도로 소개하기로 하겠습니다. 🙂

“워드프레스와 페이스북 연동하기”에 대한 0개의 생각