블로그에 페이스북 댓글 연동하는 방법

페이스북은 국내의 포털들과 같이 컨텐츠를 가지고 있는 것이 아니라, 사용자에게 편리한 플랫폼을 제공해주고 

그곳에 뭔가 채우게 만들어 대표적인 서비스입니다. 쉽게 말해 좋은 시스템 제공해주니까 그곳에 늬들이 채워라는 거죠 ^^

강력한 친구 추천 시스템과 글, 사진, 동영상, 모임, 이벤트, 페이지 등 각각의 기능은 아주 잘 만들어져 있습니다. 

(# 언제 날 잡아서 페이스북의 친구추천 시스템에 대해서 한번 자세히 적어 보겠습니다. 아마도 이걸 알면 더러는 페이스북을 안쓰고 싶다고 하는 사람도 있을지 모르겠네요 ^^)

그 중에서도 특히 잘 되어 있는 것이 외부 사이트와 연계를 할 수 있도록 개방하고 개발 툴 들을 지원한다는 것이죠. 물론 너무 잦은 업데이트와 부실한 설명서가 못마땅하긴 하지만 ^^

그 중에서 오늘은 페이스북 지난해 공개한 댓글 서비스 연동하는 방법을 설명해 보겠습니다. 

페이스북의 댓글 모듈을 내 블로그에 추가하면, 내 블로그에 페이스북 계정으로 댓글을 달 수 있게 되는 것이죠.

뿐만 아니라 블로그에 남긴 댓글이 페이스북 담벼락에 게시되고 상호 연동됩니다.

다시 말해 댓글이 내 블로그에 저장되는 것이 아니라, 페이스북 데이터베이스에 저장되고 그것을 블로그와 페이스북 양쪽에 보여주는 것이죠.

설치하는 방법은 아래와 같습니다. 

1. 페이스북 소셜 플러그인 중에서 댓글 플러그인에 접속해서 코드를 생성합니다.

2. 내 블로그에 해당 코드를 추가합니다.

3. 댓글 모듈의 위치를 수정하거나 내용을 추가합니다. 

자 그럼 그림을 보면서 한번 해 보겠습니다.

참고로 저는 티스토리 블로그를 기준으로 설명을 하겠습니다.

1. 페이스북 소셜 댓글 플러그인 페이지에 접속하여 내 블로그 주소와 가로 길이, 처음에 보여줄 댓글 개수, 색상등을 지정하고 [Get Code]를 클릭합니다.

https://developers.facebook.com/docs/reference/plugins/comments/

2. 코드 방식을 선택합니다. 

선택하는 것이 3가지가 있는데 그중에서 댓글을 추가할 서비스의 여건에 맞게 선택하면 됩니다. 

아래 설명을 참고하세요

HTML5 는 HTML(HTML4) 의 업그레이드 버전입니다. 그동안 HTML 4.01, XHTML, DOM 등 여러 버전의 난립을 막고 하나로 통일하기 위해 제정한 차세대 웹표준입니다. 그러나 아직 HTML5를 완벽히 지원하지 못하는 브라우저가 많고 이전 버전으로 제작된 사이트가 다수라서 자리잡기까지는 시간이 좀 걸릴겁니다. 

XFBML 은 페이스북에서 제공하는 JavaScript SDK 입니다. 이것은 REST API, Graph API 등을 포함하고 있으며 페이이스북과의 외부사이트의 서비스 연동을 좀더 쉽게 하기 위한 API 입니다. 이것을 통해 페이스북에 자료를 받는다던지 내가 쓴 내용을 보내는 등의 외부 인터페이스가 가능하죠. 블로그에는 XFBML를 많이 사용합니다.

IFRAME 은 익스플로러 에서만 지원되는 HTML 태그입니다. 문서내에 또다른 숨겨진 프레임을 만들어서 다른 페이지를 불러오거나 추가할 수 있습니다. 국내에서는 아주 많이 사용하고 있을 정도로 유용한 태그라서 추후에 웹표준으로 편입 된 태그입니다. 

제가 사용하는 티스토리에는 XFBML 방식을 사용합니다. 

3. 블로그에 위의 소스를 추가합니다.

1) 위의 2번 소스를 html 최상단에 추가합니다. 추가하는 위치는 아래 그림을 참고하세요

2) 1번과 3번의 소스를 블로그 본문 아래 위치에 추가합니다. 

저는 기존 티스토리 댓글 윗 부분에 추가하였습니다. 

Ctrl + F를 눌러 <div class="article_guest">를 검색하면 쉽게 찾을 수 있습니다. 

그 윗부분에 아래 그림과 같이 추가하면 됩니다. 

## 중요사항 : 3번 소스를 붙일때 자신의 블로그 주소 다음에 를 추가해 주세요.

왜냐하면 각 블로그 게시물마다 댓글이 독립적으로 달리게 만들기 위해서 입니다. 만약 위의 태그를 추가하지 않으면 모든 게시물에 동일한 댓글이 달리게 됩니다. 

소스를 편집화면이 창이 좁아서 불편하게 보이면 Edit Plus와 같은 편집기에 복사해서 하면 쉽게 추가할 수 있습니다. 

아래 그림을 보면 한눈에 보기 쉽죠~~

그리고 필요에 따라서 관련내용을 추가하고 저장하면 됩니다.

4. 티스토리 댓글 옵션 조정

이제 블로그에 페이스북 댓글 추가가 완료되었습니다. 그러며 본문 아래와 페이스북 댓글과 티스토리 댓글이 한번에 보여지게 됩니다. 만약 티스토리 댓글을 숨기고 싶다면 [스킨-->화면설정]에서 댓글펼침을 해제하면 됩니다. 

5. 이제 모든 설정이 완료되었습니다. 

블로그에 댓글을 남기면 아래와 같이 페이스북 담벼락에도 글이 남겨지죠~~