원래는 바로 레이아웃 뜯어고친 얘기를 적을 생각이었지만 페북 코멘트로 삽질을 하고나니 이것 부터 기록하는 편이 더 나을 것 같다.. 일단 당연히 Octopress는 정적 html 페이지이니 Octopress자체가 comment를 관리하는 것은 불가능하다. 때문에 iframe으로 만들어진 social plugin이 필요한 것이고.. 사실 Disqus를 사용하면 세팅도 할 필요없이 간단하게 처리가 가능하다. 하지만 Disqus는 여러 단점이 존재하고, 무엇보다 내가 쓸 줄 모른다 -_-; 그리고 한국에서 쓰는 걸 본 적이 없음. 차라리 페북이나 트위터 댓글을 만드는 편이 훨씬 나을 것 같아서 개발 경험이 있는 페이스북 댓글로 가기로 했다.

페이스북 댓글을 만들기 위해서는 먼저 app id가 필요하다. 자신의 App관리 페이지에서 앱을 추가하고 app id만 받아오면 된다. 이 id가 있어야 페이스북 자바스크립트 API를 사용 가능하기 때문에 꼭 만들어줘야한다. (즉, 앱 이름을 제외한 나머지 옵션은 건드릴 필요가 없다)

원래 facebook document에서 자동 생성한 코드를 이용했기 때문에 id를 전부 하드코딩했었는데 좋은 포스트를 발견해서 새로운 좋은 방법을 알아냈다. 일단 받아온 앱 id를 _config.yml에 추가하자.

1

facebook_app_id = 12341234

위에서 링크한 document를 보면 알 수 있겠지만, body에서 script를 사용하여 API를 사용할 수 있도록 만들어주는 코드가 필요하고, 실제 코멘트를 추가할 위치에 fb_comments라는 div를 생성해야한다. 이게 사실 짱짱 귀찮은데 이유는 Comment를 추가해야하는 곳이 page랑 post 두개이기 때문 -_-; 거기다가 나는 이상하게 조건문이 잘 안먹어서 열이 뻗쳐서 그냥 if문도 날려버렸다. 내 코딩의 문제겠지만 오랫만에 레일즈 스타일로 html고치려니깐 뭔가 답답해서..

아무튼 그렇게 하고나서 source/_include/post/facebook_comment.html이라는 녀석을 만들어서 아래의 코드를 추가해주자

1

<div class="fb-comments" data-href="http://SanghyukChun.github.io/7/" data-width="470" data-num-posts="10"></div>

옵션은 본인이 원하는 대로 고쳐도 된다. 이제 source/_layout/page.html과 source/_layout/post.html을 수정하자

1
2
3
4
5
6
7
8

{% if site.facebook_app_id %}
  <section>
    <h1>Comments</h1>
    <div id="facebook_comments" aria-live="polite">
      &#123&#37 include post/facebook_comment.html %}
    </div>
  </section>
{% endif %}

자 이걸로 끝이다. 아까 링크했던 글에서는 head에 meta를 추가해주는데 해도 좋고, 없어도 잘 돌아는간다.

생길 수 있는 문제들

• 나처럼 옵션 잘못 걸어서 아예 Comment section자체가 안생김
• data-href에 http:// 없는 상태로 테스트함 (위와 같이해서 preview 때리면 잘 되야한다)
• app id나 등등에서 오타가 있음 (그런데 은근 고칠게 많아서 의외로 찾기 힘들다)