요즘 블로그나 기타 웹사이트들 보면 소셜 서비스랑 연동 시킨 곳이 많습니다. 제 블로그에도 몇개 연동 해놨지요. 그 중 페이스북 댓글 ( Facebook Comments ) 플러그인이 있는데, 포스트 댓글로서도 기능이 되며, 자신의 페이스북으로 글 보내기도 같이 할수 있어 좋아보이더군요.
그래서 이것을 달아보고자 페이스북 개발자 페이지도 보고, 구글에서 설치법도 검색해보고 했는데, 뭔가 잘 안되더군요. 그래서 이래저래 삽질 하다 알게된 방법들을 공유해보고자 포스팅 해봅니다.
일단 페이스북 앱 ( Facebook App )을 만들어야 합니다. [여기]로 접속하셔서 새 앱을 만듭니다. 밑의 화면 처럼 나올텐데, 다른건 신경 안쓰셔도 되고, App Name만 적당이 적어줍니다.
앱이 성공적으로 만들어지면 밑의 화면 처럼 기본 설정 페이지가 나타나게됩니다.
여기서 페이스북 소셜 플러그인 설치를 할 사이트를 등록 해주어야 합니다. App Domains 에는 티스토리 블로그니까 tistory.com을 적어주고, 밑에 Website with Facebook Login 항목에는 블로그의 URL을 적어줍니다. 저 같은 경우는 http://kindtis.tistory.com 이겠죠.
이것만 설정 해주면 이제 반은 끝났습니다. 변경 사항을 저장 해주고 다음 단계로 넘어갑니다. 이제 [여기]로 접속하시면 페이스북에서 제공하는 여러 플러그인을 찾아 볼수 있는데요. 우리는 일단 댓글 플러그인이 필요하니 그 것만 보겠습니다.
페이지 상단에 보시면 간단하게 댓글을 설치할 사이트 주소와 레이아웃을 정할수 있는 부분이 있습니다. 여기에 블로그 주소를 넣고, 원하는 레이아웃 옵션을 준다음 Get Code 버튼을 눌러줍니다.
그러면 아래와 같이 두 코드가 나옵니다.
여기서 확인해봐야 할 것은 앞서 생성한 페이스북 앱 ( Facebook App )이 제대로 적용되어 있나 하는 겁니다. 정상적으로 생성 되었으면 파란 하이라이트 부분에 앞서 생성한 페이스북 앱 이름과 하단 검은색 마스킹 부분에 앱 아이디 ( App ID )가 출력되어야 합니다.
모두 정상적으로 출력되었다면 이제 이 코드들을 블로그에 적용해주면 됩니다. 블로그에 위의 코드들을 적용해주기 위해 관리자 페이지에 들어가 HTML/CSS 편집 메뉴를 선택해줍니다.
코드들을 보시면 <body> 로 시작 하는 부분이 있습니다. 경우에 따라 <body id="[ ##_body_id_## ]"> 로 시작하기도 하는데, 어찌됐든 이 코드 바로 다음 줄에 위의 1번 코드를 붙여넣기 해줍니다.
그 다음 페이스북 댓글이 달릴 위치에 2번 코드를 넣어주어야 합니다. 저 같은 경우는 티스토리 댓글 바로 위쪽에 달았습니다. 이 위치는 <div class="comment"> 를 검색해보시면 바로 나옵니다. 이것이 티스토리 댓글 시작을 알리는 부분 입니다. 이 위쪽에 달아주면 되겠죠.
여기서 중요합니다. 페이스북 댓글은 URL을 기준으로 하기때문에 단순히 http://kindtis.tistory.com/ 형태로 들어가버리면 모든 포스팅에 똑같은 댓글들이 보이게 됩니다. 각 포스팅 마다 고유의 댓글이 달리게 하고프면 포스팅 주소가 입력되는 식으로 해주어야 합니다. 이를 위해 티스토리 같은 경우 치환자를 이용해주면 됩니다. 그러면 아래와 같이 코드를 변경해줍니다.
<div class="fb-comments" data-href="http://kindtis.tistory.com[ ##_article_rep_link_## ]" data-num-posts="6" data-width="700"></div>
(*주의 - 위의 코드에서 블로그 주소는 자신의 블로그 주소로 들어가야합니다 )
뒤의 붉은 색 부분이 치환자 입니다. 저 부분이 자동으로 포스팅 주소가 입력되는것이죠. 만약 티스토리가 아닌 다른 블로그나 고유의 사이트를 이용하신다면 이곳에 해당 게시물/포스팅의 주소가 오도록 소스를 변경 해주시면 됩니다. 이제 변경된 코드를 입력해주고, 변경된 내역을 저장 해줍니다. 정상적으로 변경이 이루어졌다면 자신의 블로그에 페이스북 댓글란이 나타날겁니다.
정상적으로 페이스북 댓글이 통합된 모습니다.
자, 이제 거의다 끝났습니다만, 제일 중요한것이 남았습니다. 단순히 페이스북 댓글 플러그인만 설치하는 것이라면 페이스북 앱 생성도 필요없습니다. 왜 앱을 생성하고, 앱 아이디가 필요하냐면, 바로 새로 달린 페이스북 댓글을 관리 하기 위해서입니다.
페이스북 댓글 플러그인을 통해 새로운 댓글이 달리면 블로그 댓글 알리미에 뜨지도 않고, 그렇다고 페이스북 알림 센터에도 뜨지 않습니다. 일일히 각 포스트를 확인해보기 전까지는 새로운 댓글이 올라왔는지 전혀 모르는 것이죠.
하지만, 페이스북 앱을 페이스북 댓글 플러그인과 연동을 해두면 페이스북 앱의 Comment Moderation Tool을 통해 새로 달린 댓글을 확인 및 관리가 가능해집니다. 모두 이를 위해 페이스 북 앱을 생성한 것이지요. ( 저도 이거 때문에 꽤나 삽질을 했습니다 )
Comment Moderation Tool을 이용하기 위해서는 위에 나오지 않은 코드를 하나 더 추가해주어야 합니다.
<meta property="fb:app_id" content="앱 아이디"/>
HTML/CSS 편집 메뉴에서 코드를 보면 <head>로 시작해 </head>로 끝나는 부분이 있습니다. 이 사이에 위의 코드를 삽입해줍니다. 앱 아이디 부분에 페이스북 아이디를 넣어주시면 됩니다.
이제 페이스북 댓글을 등록하고, [ Comment Moderation Tool ]로 접속을 해서 방금 등록한 댓글이 보인다면 모든 설치가 정상적으로 이루어졌단 증거입니다. 만약 댓글이 보이지 않는다면, 무언가를 빼먹었거나 어딘가 잘못 설정 되었다는 문제이니 [ Debug Tool ] 을 통해 사이트를 진단해보시길 바랍니다.