tistory에 페이스북 댓글 서비스 달고, 편하게 관리하자!

 tistory에 페이스북 댓글 서비스를 달아서 사용한지 오랜시간이 지났습니다. 그렇지만 잘 사용하지 못했었죠. 일일이 모든 페이지를 돌아다니면서 코멘트를 확인했었는데.. 이건 정말 힘든일이죠. 시간낭비 + 허무함 그렇지만 페이스북에서도 이미 코멘트를 관리해주는 사이트가 있습니다. 단순히 페북 댓글 서비스를 달아둔다고해서 사용가능하지는 않습니다. 페이스북 앱 생성도 해야하고, 페이스북 댓글 서비스도 생성해서 블로그에 달아야하고, 그리고 마지막으로 검증작업도 한번쯤 해줘야 합니다.

 인터넷에 돌아다니면서 여러 블로그의 글을 많이 보고 소셜 댓글을 달긴 했습니다. 단지 검증 작업에 대한 이야기를 하는 분들이 별로 없어서..저는 그간 해당 서비스를 재대로 사용하지 못했습니다. 그리고 최근 페북 앱 생성과 2011년 이전 페북 앱 생성 방법이 다릅니다. 거기에 대부분 앱 생성만하면 끝이라는 글입니다. 하지만 한가지 추가 작업도 해줘야 합니다.

 그래서 흔적을 남기기위해 모든 과정을 작성합니다. 페이스북 코멘트 관리인 fb:admin 역시 함께 작성합니다.

 2개의 단계로 구분하여 작성합니다. 1단계는 단순히 앱을 설치하는 과정입니다. 2단계는 설치한 코멘트 앱을 관리하는 툴을 작성하고, 사용하는 방법을 작성합니다. 이미 앱을 생성하고 사용 중이라고 하셔도 1. 페이스북 앱 생성 부분은 꼭 읽어주셨으면 합니다. 이미 적용이 되셨다면 2단계로 이동하세요. 

1단계 페이스북 앱 생성 및 코멘트 달기

1. 페이스북 앱 생성

 일단 페이스북 앱을 생성해야 합니다. 당연히 페이스북 ID도 있어야합니다!  일단 아래 사이트로 접속하고 로그인하시면 됩니다.

  https://developers.facebook.com/apps

사이트 접속하시면 아래와 같습니다. 저는 이미 생성해둔 앱이 2개가 있습니다. 오른쪽 부분에 새로운 앱 생성 버튼을 클릭합니다.

 앱 이름만 작성하시면 됩니다. App Namespace는 소셜댓글서비스에서는 사용하지 않기에..작성하지 않아도 됩니다. 앱이름 작성 후 확인을 선택합니다.

보안 코드 입력을 하셔야 합니다. 잘 안보이신다면 Try another text를 선택하셔서 다른 코드를 확인하세요.

간단하게 앱이 생성되었습니다. 이제 중요한 작업 1가지를 해주셔야 합니다.

 - 만약 아래와 같은 화면이 보이지 않으신다면 Apps의 메뉴에서 생성하신 앱을 선택하고 앱 수정을 클릭하시면 됩니다.

하단에 보시면 Website with Facebook Login 이라는 메뉴가 있고, 파란색 테두리 체크모양이 보입니다. 이 부분을 클릭하셔서 사이트 URL을 입력하셔야 합니다. 저 같은 경우 http://thdev.net 라고 입력합니다. 만약 도메인 이름이 http://test.com 이라면 그대로 입력하시면 됩니다. 페이스북 댓글 서비스를 사용하실 페이지의 URL을 입력하고 꼭 저장하셔야 합니다.

다른 부분은 수정할게 없고 아래 빨간색 테두리 안만 살펴보시면 됩니다. 사이트 주소와 앱 ID를 확인하셨다면 앱 생성은 끝이 납니다.

만약 위의 방법대로 하지 않을 경우 추후에 아래와 같은 메시지를 볼 수 있습니다.

이건 검증작업이기에 아래에서 다시 설명하겠습니다.

2. comments 생성

  https://developers.facebook.com/docs/reference/plugins/comments/ 사이트로 접속합니다. 접속하시면 아래와 같이 가운데 Get Code 부분이 보이게 됩니다. 그냥 Get Code를 클릭하시면 안되고, 위의 URL to comment on 부분에 앱 생성시 추가했던 자신의 URL을 입력하시면 됩니다. 저는 http://thdev.net 로 작성합니다.

 한번에 최대한 보여줄 포스트 수와 넓이를 선택하시면 됩니다. 저는 홈페이지 하단에 댓글을 달것이기에 사이즈는 700이 조금 넘는 사이즈로 지정했습니다.

 이제 code가 나오게 됩니다. 기본이 HTML 5입니다. 그냥 그대로 사용하면 됩니다. 잘보시면 app ID of your app: 이라는 글이 있습니다. 해당 부분에 진하게 앱 이름이 표시되는데 생성하신 앱이 하나이시라면 변경하실 필요 없지만 생성하신 앱이 여러개라면 좀전에 생성하신 앱을 선택합니다. 꼭 하나의 앱이 생성이 되어있어야 사용가능합니다. 아래 1번과 2번을 복사해서 이제 tistory에 작성해야 합니다.

 tistory의 관리자 페이지에서 HTML/CSS페이지로 접속합니다. 저는 아래와 같이 위의 내용을 그대로 복사하여 붙여넣었습니다. 위치는 페이지의 하단 부분이며 

 tistory에 페이스북 댓글 서비스를 달아서 사용한지 오랜시간이 지났습니다. 그렇지만 잘 사용하지 못했었죠. 일일이 모든 페이지를 돌아다니면서 코멘트를 확인했었는데.. 이건 정말 힘든일이죠. 시간낭비 + 허무함 그렇지만 페이스북에서도 이미 코멘트를 관리해주는 사이트가 있습니다. 단순히 페북 댓글 서비스를 달아둔다고해서 사용가능하지는 않습니다. 페이스북 앱 생성도 해야하고, 페이스북 댓글 서비스도 생성해서 블로그에 달아야하고, 그리고 마지막으로 검증작업도 한번쯤 해줘야 합니다.

 인터넷에 돌아다니면서 여러 블로그의 글을 많이 보고 소셜 댓글을 달긴 했습니다. 단지 검증 작업에 대한 이야기를 하는 분들이 별로 없어서..저는 그간 해당 서비스를 재대로 사용하지 못했습니다. 그리고 최근 페북 앱 생성과 2011년 이전 페북 앱 생성 방법이 다릅니다. 거기에 대부분 앱 생성만하면 끝이라는 글입니다. 하지만 한가지 추가 작업도 해줘야 합니다.

 그래서 흔적을 남기기위해 모든 과정을 작성합니다. 페이스북 코멘트 관리인 fb:admin 역시 함께 작성합니다.

 2개의 단계로 구분하여 작성합니다. 1단계는 단순히 앱을 설치하는 과정입니다. 2단계는 설치한 코멘트 앱을 관리하는 툴을 작성하고, 사용하는 방법을 작성합니다. 이미 앱을 생성하고 사용 중이라고 하셔도 1. 페이스북 앱 생성 부분은 꼭 읽어주셨으면 합니다. 이미 적용이 되셨다면 2단계로 이동하세요. 

1단계 페이스북 앱 생성 및 코멘트 달기

1. 페이스북 앱 생성

 일단 페이스북 앱을 생성해야 합니다. 당연히 페이스북 ID도 있어야합니다!  일단 아래 사이트로 접속하고 로그인하시면 됩니다.

  https://developers.facebook.com/apps

사이트 접속하시면 아래와 같습니다. 저는 이미 생성해둔 앱이 2개가 있습니다. 오른쪽 부분에 새로운 앱 생성 버튼을 클릭합니다.

 앱 이름만 작성하시면 됩니다. App Namespace는 소셜댓글서비스에서는 사용하지 않기에..작성하지 않아도 됩니다. 앱이름 작성 후 확인을 선택합니다.

보안 코드 입력을 하셔야 합니다. 잘 안보이신다면 Try another text를 선택하셔서 다른 코드를 확인하세요.

간단하게 앱이 생성되었습니다. 이제 중요한 작업 1가지를 해주셔야 합니다.

 - 만약 아래와 같은 화면이 보이지 않으신다면 Apps의 메뉴에서 생성하신 앱을 선택하고 앱 수정을 클릭하시면 됩니다.

하단에 보시면 Website with Facebook Login 이라는 메뉴가 있고, 파란색 테두리 체크모양이 보입니다. 이 부분을 클릭하셔서 사이트 URL을 입력하셔야 합니다. 저 같은 경우 http://thdev.net 라고 입력합니다. 만약 도메인 이름이 http://test.com 이라면 그대로 입력하시면 됩니다. 페이스북 댓글 서비스를 사용하실 페이지의 URL을 입력하고 꼭 저장하셔야 합니다.

다른 부분은 수정할게 없고 아래 빨간색 테두리 안만 살펴보시면 됩니다. 사이트 주소와 앱 ID를 확인하셨다면 앱 생성은 끝이 납니다.

만약 위의 방법대로 하지 않을 경우 추후에 아래와 같은 메시지를 볼 수 있습니다.

이건 검증작업이기에 아래에서 다시 설명하겠습니다.

2. comments 생성

  https://developers.facebook.com/docs/reference/plugins/comments/ 사이트로 접속합니다. 접속하시면 아래와 같이 가운데 Get Code 부분이 보이게 됩니다. 그냥 Get Code를 클릭하시면 안되고, 위의 URL to comment on 부분에 앱 생성시 추가했던 자신의 URL을 입력하시면 됩니다. 저는 http://thdev.net 로 작성합니다.

 한번에 최대한 보여줄 포스트 수와 넓이를 선택하시면 됩니다. 저는 홈페이지 하단에 댓글을 달것이기에 사이즈는 700이 조금 넘는 사이즈로 지정했습니다.

 이제 code가 나오게 됩니다. 기본이 HTML 5입니다. 그냥 그대로 사용하면 됩니다. 잘보시면 app ID of your app: 이라는 글이 있습니다. 해당 부분에 진하게 앱 이름이 표시되는데 생성하신 앱이 하나이시라면 변경하실 필요 없지만 생성하신 앱이 여러개라면 좀전에 생성하신 앱을 선택합니다. 꼭 하나의 앱이 생성이 되어있어야 사용가능합니다. 아래 1번과 2번을 복사해서 이제 tistory에 작성해야 합니다.

 tistory의 관리자 페이지에서 HTML/CSS페이지로 접속합니다. 저는 아래와 같이 위의 내용을 그대로 복사하여 붙여넣었습니다. 위치는 페이지의 하단 부분이며  다음 부분에 추가하였습니다.

1번의 코드는 그대로 붙여넣으면 되고, 2번의 코드는 조금 변경을 해야 합니다.

1번 코드 - 해당 부분은 그대로 복사해오시면 됩니다.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=생성된 앱 아이디";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

2번 코드

 아래와 같이 자신의 URL 뒤에 [ ##_article_rep_link_##] 를 꽅 붙여주셔야 합니다. 추가해주셔야 하는 이유는 페이지마다 별도의 코멘트를 관리하기 위해서입니다.([ # 부분에 뛰어쓰기를 제거하고 적용하세요. 이상하게도 [## 붙여쓰면 화면에 보여지지가 않네요)

<div class="fb-comments" data-href="도메인 주소[ ##_article_rep_link_##]" data-num-posts="2" data-width="728">

 위의 코드를 작성해주시면 일단은 페이스북 코멘트를 사용할 수 있습니다. 서두에서도 말했듯이 이렇게 달아두기만 하면 댓글관리하 어렵습니다. 블로그의 글이 10개라면 10개 페이지를 하나하나 다 돌아다니면서 페이스북 댓글을 확인하면 좋겠지만 그렇게 그렇게 하면 시간도 버리고 댓글이 없다면 허무하기까지 합니다. 이제 다음 단계로 관리가 가능한 툴을 추가로 작성해보겠습니다. 

2단계 관리 툴 설치 및 검증

1. 페이스북 관리툴 설치

 페이스북 댓글 서비스 소스코드 생성 페이지로 이동합니다.

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

 아래쪽으로 내려가면 Moderation tools 라는 부분이 있습니다. 해당 부분에 댓글을 관리할 수 있는 meta 태그 2개를 지원 해주고 있습니다.

  1개는 admins 라는 코멘트를 관리해줄 수 있는 관리 툴이고, 다른 하나는 app_id를 추가하여 홈페이지 내에 작성된 모든 코멘트를 관리해줄 수 있는 도구입니다. 2개의 태그 모두 <head></head> 태그 사이에 작성해야 합니다.

<meta property="fb:app_id" content="앱 ID"/>
<meta property="fb:admins" content="사용자 ID 명"/>

위의 2개 태그를 사용하시면 됩니다. 앱 ID가 뭔지 사용자 ID가 뭔지 설명하겠습니다.

 앱 ID는 1단계에서 생성했던 앱 ID를 말하는 것입니다. 앱 아이디가 1234567890123 이라면 content="1234567890123" 앱 ID에 붙여넣으시면 됩니다.

 2번째 admins 입니다. 사용자 ID라는 부분이 보입니다. 페이스북을 로그인하는 사용자 ID는 아닙니다. 페이스북의 사용자 페이지에 접속 할 수 있는 페이스북 ID를 말합니다. 페이스북 메인화면에서 ▼ 버튼을 클릭하시면 계정 설정이 보입니다. 계정설정페이지에서 사용자 이름 이라는 부분이 보일겁니다. 수정 버튼을 클릭하여 ID를 수정하시거나 페이스북 주소 뒤에 진하게 표시된 부분이 있습니다. 이게 사용자 ID를 나타냅니다. 별도의 ID에 대한 숫자가 있지만 확인이 불가능하니 해당 ID를 content="사용자 ID" 에 붙여넣으시면 됩니다. 저는 taehwan.dev 이니 content="taehwan.dev"로 수정하면 됩니다.

이제 코드를 tistory에 적용해야 합니다. 위에서 복사한 2개의 태그를 아래와 같이 붙여넣습니다.

<head></head> 사이 아무곳이나 사용가능합니다.

앱 ID와 확인한 사용자 ID를 추가하고 저장합니다.

2. 검증 작업

 facebook에서 Debugger 툴을 제공하고 있습니다. 해당 사이트로 접속하여 검증하시면 됩니다.

  https://developers.facebook.com/tools/debug

 사이트에 접속하고 가운데 Input URL, Access Token, or Open Graph Action ID 부분이 있습니다. 저희는 블로그에 추가한 코멘트가 정상동작하는지 확인하기 위해서 블로그 주소를 작성하면 됩니다. 저는 http://thdev.net 로 작성하고 검증해보도록 하겠습니다.

 1단계의 앱 생성 부분에서 추가하라고 했던 작업을 하지 않으면 아래와 같이 오류를 나타냅니다. 다시 1단계의 앱 생성부분을 참고하셔서 수정해주셔야 합니다. 이 때는 코멘트는 작성할 수 있지만 관리가되지 않는 상황입니다.

 아래와 같이 Response Code가 200이 날라와야 코멘트 관리가 가능한 페이지가 되는 겁니다. 이제 코멘트를 추가하고, 작성하면 관리자가 모든 코멘트를 하나의 도구에서 관리할 수 있게 되었습니다.

3. 통합 코멘트 확인하기

 https://developers.facebook.com/tools/comments/ 사이트에서 통합적인 코멘트를 확인 할 수 있습니다. 설정도 가능하고, 블로그에 올라온 글을 아래와 같이 확인할 수 있습니다.

설정

 앱 ID가 보이고, 앱 개발자가 보입니다. 뭐 자신이 만든 것이니...

 Moderators : 앱 코멘트를 확인할 수 있는 사용자입니다. 기본 값이 자기자신이니 아래와 같이 추가하실 필요 없습니다.

 Moderation mode가 2개가 있습니다. 기본 값은 모든 코멘트를 자동으로 보여지게 하고, 특정 문자 등의 문제가 되는 코멘트만 리스트에 추가하여 관리자 승인을 받게 하는 방법과 모든 댓글을 관리자가 확인하게 하는 방법 2가지 방법이 있습니다.

 블랙리스트 워드는 기본값으로 블랙리스트 없음과 페이스북에서 관리하는 블랙리스트 워드 3번째로 제가 직접 추가하는 방법이 있습니다.

 다른 로그인 방법제공여부를 선택할 수 있고, 5개 이상의 코멘트가 있을 경우 축소 등의 메뉴가 있습니다. 설정하셔서 사용하시면 됩니다.

 마지막으로 해당 블로그에서 확인하는 내용입니다. 아래와 같이 관리자 툴도 제공이 되고, 코멘트도 확인 할 수 있습니다. 관리자 툴은  ID가 동일해야 보여지는 메뉴입니다.

마무리

 조금 길게 작성했네요. 관리자 툴을 잘 활용하면 블로그에서 작성되는 페이스북 관련글들을 잘 활용하고, 답글도 빠르게 할 수 있는 장점이 있습니다. 거의 2달동안 단순히 코멘트 버튼만 달아놓고 운영했네요. 댓글이 가끔 있었는데 빠른 답변을 못해드렸었습니다. 이제 빠른 답변이 가능할 것 같네요!

다음 부분에 추가하였습니다.

1번의 코드는 그대로 붙여넣으면 되고, 2번의 코드는 조금 변경을 해야 합니다.

1번 코드 - 해당 부분은 그대로 복사해오시면 됩니다.

<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=생성된 앱 아이디";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

2번 코드

 아래와 같이 자신의 URL 뒤에 [ ##_article_rep_link_##] 를 꽅 붙여주셔야 합니다. 추가해주셔야 하는 이유는 페이지마다 별도의 코멘트를 관리하기 위해서입니다.([ # 부분에 뛰어쓰기를 제거하고 적용하세요. 이상하게도 [## 붙여쓰면 화면에 보여지지가 않네요)

<div class="fb-comments" data-href="도메인 주소[ ##_article_rep_link_##]" data-num-posts="2" data-width="728">

 위의 코드를 작성해주시면 일단은 페이스북 코멘트를 사용할 수 있습니다. 서두에서도 말했듯이 이렇게 달아두기만 하면 댓글관리하 어렵습니다. 블로그의 글이 10개라면 10개 페이지를 하나하나 다 돌아다니면서 페이스북 댓글을 확인하면 좋겠지만 그렇게 그렇게 하면 시간도 버리고 댓글이 없다면 허무하기까지 합니다. 이제 다음 단계로 관리가 가능한 툴을 추가로 작성해보겠습니다. 

2단계 관리 툴 설치 및 검증

1. 페이스북 관리툴 설치

 페이스북 댓글 서비스 소스코드 생성 페이지로 이동합니다.

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

 아래쪽으로 내려가면 Moderation tools 라는 부분이 있습니다. 해당 부분에 댓글을 관리할 수 있는 meta 태그 2개를 지원 해주고 있습니다.

  1개는 admins 라는 코멘트를 관리해줄 수 있는 관리 툴이고, 다른 하나는 app_id를 추가하여 홈페이지 내에 작성된 모든 코멘트를 관리해줄 수 있는 도구입니다. 2개의 태그 모두 <head></head> 태그 사이에 작성해야 합니다.

<meta property="fb:app_id" content="앱 ID"/>
<meta property="fb:admins" content="사용자 ID 명"/>

위의 2개 태그를 사용하시면 됩니다. 앱 ID가 뭔지 사용자 ID가 뭔지 설명하겠습니다.

 앱 ID는 1단계에서 생성했던 앱 ID를 말하는 것입니다. 앱 아이디가 1234567890123 이라면 content="1234567890123" 앱 ID에 붙여넣으시면 됩니다.

 2번째 admins 입니다. 사용자 ID라는 부분이 보입니다. 페이스북을 로그인하는 사용자 ID는 아닙니다. 페이스북의 사용자 페이지에 접속 할 수 있는 페이스북 ID를 말합니다. 페이스북 메인화면에서 ▼ 버튼을 클릭하시면 계정 설정이 보입니다. 계정설정페이지에서 사용자 이름 이라는 부분이 보일겁니다. 수정 버튼을 클릭하여 ID를 수정하시거나 페이스북 주소 뒤에 진하게 표시된 부분이 있습니다. 이게 사용자 ID를 나타냅니다. 별도의 ID에 대한 숫자가 있지만 확인이 불가능하니 해당 ID를 content="사용자 ID" 에 붙여넣으시면 됩니다. 저는 taehwan.dev 이니 content="taehwan.dev"로 수정하면 됩니다.

이제 코드를 tistory에 적용해야 합니다. 위에서 복사한 2개의 태그를 아래와 같이 붙여넣습니다.

<head></head> 사이 아무곳이나 사용가능합니다.

앱 ID와 확인한 사용자 ID를 추가하고 저장합니다.

2. 검증 작업

 facebook에서 Debugger 툴을 제공하고 있습니다. 해당 사이트로 접속하여 검증하시면 됩니다.

  https://developers.facebook.com/tools/debug

 사이트에 접속하고 가운데 Input URL, Access Token, or Open Graph Action ID 부분이 있습니다. 저희는 블로그에 추가한 코멘트가 정상동작하는지 확인하기 위해서 블로그 주소를 작성하면 됩니다. 저는 http://thdev.net 로 작성하고 검증해보도록 하겠습니다.

 1단계의 앱 생성 부분에서 추가하라고 했던 작업을 하지 않으면 아래와 같이 오류를 나타냅니다. 다시 1단계의 앱 생성부분을 참고하셔서 수정해주셔야 합니다. 이 때는 코멘트는 작성할 수 있지만 관리가되지 않는 상황입니다.

 아래와 같이 Response Code가 200이 날라와야 코멘트 관리가 가능한 페이지가 되는 겁니다. 이제 코멘트를 추가하고, 작성하면 관리자가 모든 코멘트를 하나의 도구에서 관리할 수 있게 되었습니다.

3. 통합 코멘트 확인하기

 https://developers.facebook.com/tools/comments/ 사이트에서 통합적인 코멘트를 확인 할 수 있습니다. 설정도 가능하고, 블로그에 올라온 글을 아래와 같이 확인할 수 있습니다.

설정

 앱 ID가 보이고, 앱 개발자가 보입니다. 뭐 자신이 만든 것이니...

 Moderators : 앱 코멘트를 확인할 수 있는 사용자입니다. 기본 값이 자기자신이니 아래와 같이 추가하실 필요 없습니다.

 Moderation mode가 2개가 있습니다. 기본 값은 모든 코멘트를 자동으로 보여지게 하고, 특정 문자 등의 문제가 되는 코멘트만 리스트에 추가하여 관리자 승인을 받게 하는 방법과 모든 댓글을 관리자가 확인하게 하는 방법 2가지 방법이 있습니다.

 블랙리스트 워드는 기본값으로 블랙리스트 없음과 페이스북에서 관리하는 블랙리스트 워드 3번째로 제가 직접 추가하는 방법이 있습니다.

 다른 로그인 방법제공여부를 선택할 수 있고, 5개 이상의 코멘트가 있을 경우 축소 등의 메뉴가 있습니다. 설정하셔서 사용하시면 됩니다.

 마지막으로 해당 블로그에서 확인하는 내용입니다. 아래와 같이 관리자 툴도 제공이 되고, 코멘트도 확인 할 수 있습니다. 관리자 툴은  ID가 동일해야 보여지는 메뉴입니다.

마무리

 조금 길게 작성했네요. 관리자 툴을 잘 활용하면 블로그에서 작성되는 페이스북 관련글들을 잘 활용하고, 답글도 빠르게 할 수 있는 장점이 있습니다. 거의 2달동안 단순히 코멘트 버튼만 달아놓고 운영했네요. 댓글이 가끔 있었는데 빠른 답변을 못해드렸었습니다. 이제 빠른 답변이 가능할 것 같네요!